feat: add server-side table sorting

package.json

@@ -20,6 +20,7 @@
     ]
   },
   "dependencies": {
+    "@base-ui/react": "^1.5.0",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -32,6 +33,7 @@
     "@tanstack/react-query": "^5.101.0",
     "@tanstack/react-query-devtools": "^5.101.0",
     "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.14.3",
     "axios": "^1.13.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -40,7 +42,7 @@
     "motion": "^12.38.0",
     "next": "16.0.10",
     "next-themes": "^0.4.6",
-    "radix-ui": "^1.4.3",
+    "radix-ui": "^1.6.0",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "react-hook-form": "^7.79.0",

src/app/(modules)/clients/components/ClientColumns.tsx

@@ -81,6 +81,7 @@ export function useClientColumns({
     columns.push({
       id: 'actions',
       header: () => <div className="text-right">Actions</div>,
+      enableSorting: false,
       cell: ({ row }) => {
         const client = row.original;
         return (

src/app/(modules)/clients/components/ClientFilters.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Input } from '@/components/ui/input';
+import { TableSearchInput } from '@/components/data-table/TableSearchInput';
 import {
   Select,
   SelectContent,
@@ -25,11 +25,10 @@ export function ClientFilters({
 }: ClientFiltersProps) {
   return (
     <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-      <Input
+      <TableSearchInput
         value={searchTerm}
-        onChange={(event) => onSearchChange(event.target.value)}
+        onChange={onSearchChange}
         placeholder="Search clients"
-        className="md:max-w-sm"
       />
       <Select
         value={statusFilter}

src/app/(modules)/clients/components/ClientTable.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { ReactNode } from 'react';
-import type { ColumnDef } from '@tanstack/react-table';
+import type { ColumnDef, SortingState } from '@tanstack/react-table';
 
 import { DataTable } from '@/components/data-table';
 import type { Client } from '@/types';
@@ -14,7 +14,10 @@ interface ClientTableProps {
   skip: number;
   limit: number;
   total: number;
+  sorting: SortingState;
   onPageChange: (skip: number) => void;
+  onLimitChange: (limit: number) => void;
+  onSortingChange: (sorting: SortingState) => void;
 }
 
 export function ClientTable({
@@ -25,7 +28,10 @@ export function ClientTable({
   skip,
   limit,
   total,
+  sorting,
   onPageChange,
+  onLimitChange,
+  onSortingChange,
 }: ClientTableProps) {
   return (
     <DataTable
@@ -40,8 +46,10 @@ export function ClientTable({
         limit,
         totalItems: total,
         onPageChange,
-        onLimitChange: () => undefined,
+        onLimitChange,
       }}
+      sorting={sorting}
+      onSortingChange={onSortingChange}
     />
   );
 }

src/app/(modules)/clients/hooks/useClientFilters.ts

@@ -1,6 +1,7 @@
 'use client';
 
 import { useCallback, useState } from 'react';
+import type { SortingState } from '@tanstack/react-table';
 
 import { useDebounce } from '@/hooks/useDebounce';
 
@@ -8,7 +9,8 @@ export type ClientStatusFilter = 'all' | 'active' | 'inactive';
 
 export function useClientFilters() {
   const [skip, setSkip] = useState(0);
-  const [limit] = useState(10);
+  const [limit, setLimitValue] = useState(10);
+  const [sorting, setSortingValue] = useState<SortingState>([]);
   const [searchTerm, setSearchTermValue] = useState('');
   const [statusFilter, setStatusFilterValue] = useState<ClientStatusFilter>('all');
   const debouncedSearchTerm = useDebounce(searchTerm.trim(), 400);
@@ -23,10 +25,23 @@ export function useClientFilters() {
     setSkip(0);
   }, []);
 
+  const setLimit = useCallback((value: number) => {
+    setLimitValue(value);
+    setSkip(0);
+  }, []);
+
+  const setSorting = useCallback((value: SortingState) => {
+    setSortingValue(value);
+    setSkip(0);
+  }, []);
+
   return {
     skip,
     setSkip,
     limit,
+    setLimit,
+    sorting,
+    setSorting,
     searchTerm,
     debouncedSearchTerm,
     setSearchTerm,

src/app/(modules)/clients/hooks/useClientQueries.ts

@@ -2,7 +2,9 @@
 
 import { useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
+import type { SortingState } from '@tanstack/react-table';
 
+import { getServerSortParams } from '@/components/data-table/sorting';
 import { clientService } from '@/services/api';
 import type { ClientListParams } from '@/types';
 import { clientKeys } from '../queries/clientKeys';
@@ -13,6 +15,7 @@ interface UseClientsQueryParams {
   limit: number;
   searchTerm: string;
   statusFilter: ClientStatusFilter;
+  sorting: SortingState;
 }
 
 function buildClientListParams({
@@ -20,22 +23,22 @@ function buildClientListParams({
   limit,
   searchTerm,
   statusFilter,
+  sorting,
 }: UseClientsQueryParams): ClientListParams {
   return {
     skip,
     limit,
     search_term: searchTerm || undefined,
     is_active: statusFilter === 'all' ? undefined : statusFilter === 'active',
-    sort_by: 'created_at',
-    sort_order: 'desc',
+    ...getServerSortParams(sorting),
   };
 }
 
 export function useClientsQuery(params: UseClientsQueryParams) {
-  const { skip, limit, searchTerm, statusFilter } = params;
+  const { skip, limit, searchTerm, statusFilter, sorting } = params;
   const listParams = useMemo(
-    () => buildClientListParams({ skip, limit, searchTerm, statusFilter }),
-    [limit, searchTerm, skip, statusFilter],
+    () => buildClientListParams({ skip, limit, searchTerm, statusFilter, sorting }),
+    [limit, searchTerm, skip, sorting, statusFilter],
   );
 
   return useQuery({

src/app/(modules)/clients/page.tsx

@@ -25,6 +25,9 @@ export default function ClientsPage() {
     skip,
     setSkip,
     limit,
+    setLimit,
+    sorting,
+    setSorting,
     searchTerm,
     debouncedSearchTerm,
     setSearchTerm,
@@ -37,6 +40,7 @@ export default function ClientsPage() {
     limit,
     searchTerm: debouncedSearchTerm,
     statusFilter,
+    sorting,
   });
   const clientForm = useClientForm({
     onSaved: () => setIsSheetOpen(false),
@@ -111,7 +115,10 @@ export default function ClientsPage() {
           skip={skip}
           limit={limit}
           total={total}
+          sorting={sorting}
           onPageChange={setSkip}
+          onLimitChange={setLimit}
+          onSortingChange={setSorting}
         />
 
         <PoweredBy />

src/app/(modules)/plans/components/PlanColumns.tsx

@@ -65,6 +65,7 @@ export function usePlanColumns({
       {
         id: 'limits',
         header: 'Limits',
+        enableSorting: false,
         cell: ({ row }) => (
           <div className="text-xs text-muted-foreground">
             <p>{row.original.max_projects} projects</p>
@@ -96,6 +97,7 @@ export function usePlanColumns({
     columns.push({
       id: 'actions',
       header: () => <div className="text-right">Actions</div>,
+      enableSorting: false,
       cell: ({ row }) => {
         const plan = row.original;
         return (

src/app/(modules)/plans/components/PlanFilters.tsx

@@ -1,8 +1,6 @@
 'use client';
 
-import { Search } from 'lucide-react';
-
-import { Input } from '@/components/ui/input';
+import { TableSearchInput } from '@/components/data-table/TableSearchInput';
 import {
   Select,
   SelectContent,
@@ -27,15 +25,12 @@ export function PlanFilters({
 }: PlanFiltersProps) {
   return (
     <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-      <div className="relative w-full sm:w-72">
-        <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-        <Input
-          value={searchTerm}
-          onChange={(event) => onSearchChange(event.target.value)}
-          placeholder="Search plans"
-          className="pl-9"
-        />
-      </div>
+      <TableSearchInput
+        value={searchTerm}
+        onChange={onSearchChange}
+        placeholder="Search plans"
+        className="w-full sm:w-72"
+      />
       <Select value={statusFilter} onValueChange={(value) => onStatusChange(value as PlanStatusFilter)}>
         <SelectTrigger className="w-full sm:w-40">
           <SelectValue placeholder="Status" />

src/app/(modules)/plans/components/PlanTable.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { ReactNode } from 'react';
-import type { ColumnDef } from '@tanstack/react-table';
+import type { ColumnDef, SortingState } from '@tanstack/react-table';
 
 import { DataTable } from '@/components/data-table';
 import type { Plan } from '@/types';
@@ -14,7 +14,10 @@ interface PlanTableProps {
   skip: number;
   limit: number;
   total: number;
+  sorting: SortingState;
   onPageChange: (skip: number) => void;
+  onLimitChange: (limit: number) => void;
+  onSortingChange: (sorting: SortingState) => void;
 }
 
 export function PlanTable({
@@ -25,7 +28,10 @@ export function PlanTable({
   skip,
   limit,
   total,
+  sorting,
   onPageChange,
+  onLimitChange,
+  onSortingChange,
 }: PlanTableProps) {
   return (
     <DataTable
@@ -40,8 +46,10 @@ export function PlanTable({
         limit,
         totalItems: total,
         onPageChange,
-        onLimitChange: () => undefined,
+        onLimitChange,
       }}
+      sorting={sorting}
+      onSortingChange={onSortingChange}
     />
   );
 }

src/app/(modules)/plans/hooks/usePlanFilters.ts

@@ -1,13 +1,15 @@
 'use client';
 
 import { useState } from 'react';
+import type { SortingState } from '@tanstack/react-table';
 import { useDebounce } from '@/hooks/useDebounce';
 
 export type PlanStatusFilter = 'all' | 'active' | 'inactive';
 
 export function usePlanFilters() {
   const [skip, setSkip] = useState(0);
-  const [limit] = useState(10);
+  const [limit, setLimitValue] = useState(10);
+  const [sorting, setSortingValue] = useState<SortingState>([]);
   const [searchTerm, setSearchTerm] = useState('');
   const [statusFilter, setStatusFilter] = useState<PlanStatusFilter>('all');
   const debouncedSearchTerm = useDebounce(searchTerm, 400);
@@ -22,10 +24,23 @@ export function usePlanFilters() {
     setSkip(0);
   };
 
+  const setLimit = (value: number) => {
+    setLimitValue(value);
+    setSkip(0);
+  };
+
+  const setSorting = (value: SortingState) => {
+    setSortingValue(value);
+    setSkip(0);
+  };
+
   return {
     skip,
     setSkip,
     limit,
+    setLimit,
+    sorting,
+    setSorting,
     searchTerm,
     debouncedSearchTerm,
     setSearchTerm: updateSearchTerm,

src/app/(modules)/plans/hooks/usePlanQueries.ts

@@ -2,7 +2,9 @@
 
 import { useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
+import type { SortingState } from '@tanstack/react-table';
 
+import { getServerSortParams } from '@/components/data-table/sorting';
 import { mapPermissionTree } from '@/components/permission-tree';
 import { permissionService, planService } from '@/services/api';
 import type { PlanListParams } from '@/types';
@@ -15,6 +17,7 @@ interface UsePlansQueryParams {
   limit: number;
   searchTerm: string;
   statusFilter: PlanStatusFilter;
+  sorting: SortingState;
 }
 
 function buildPlanListParams({
@@ -22,14 +25,14 @@ function buildPlanListParams({
   limit,
   searchTerm,
   statusFilter,
+  sorting,
 }: UsePlansQueryParams): PlanListParams {
   return {
     skip,
     limit,
     search_term: searchTerm || undefined,
     is_active: statusFilter === 'all' ? undefined : statusFilter === 'active',
-    sort_by: 'created_at',
-    sort_order: 'desc',
+    ...getServerSortParams(sorting),
   };
 }
 

src/app/(modules)/plans/page.tsx

@@ -27,6 +27,9 @@ export default function PlansPage() {
     skip,
     setSkip,
     limit,
+    setLimit,
+    sorting,
+    setSorting,
     searchTerm,
     debouncedSearchTerm,
     setSearchTerm,
@@ -39,6 +42,7 @@ export default function PlansPage() {
     limit,
     searchTerm: debouncedSearchTerm,
     statusFilter,
+    sorting,
   });
   const permissionsQuery = useOrganizationPermissionTreeQuery(isSheetOpen);
 
@@ -165,7 +169,10 @@ export default function PlansPage() {
           skip={skip}
           limit={limit}
           total={total}
+          sorting={sorting}
           onPageChange={setSkip}
+          onLimitChange={setLimit}
+          onSortingChange={setSorting}
         />
 
         <PoweredBy />

src/app/(modules)/roles/components/RoleColumns.tsx

@@ -66,6 +66,7 @@ export function useRoleColumns({
     columns.push({
       id: 'actions',
       header: () => <div className="text-right">Actions</div>,
+      enableSorting: false,
       cell: ({ row }) => {
         const role = row.original;
         return (

src/app/(modules)/roles/components/RoleFilters.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Input } from '@/components/ui/input';
+import { TableSearchInput } from '@/components/data-table/TableSearchInput';
 import {
   Select,
   SelectContent,
@@ -26,11 +26,10 @@ export function RoleFilters({
 }: RoleFiltersProps) {
   return (
     <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-      <Input
+      <TableSearchInput
         value={searchTerm}
-        onChange={(event) => onSearchChange(event.target.value)}
+        onChange={onSearchChange}
         placeholder="Search roles"
-        className="md:max-w-sm"
       />
       <Select value={statusFilter} onValueChange={(value) => onStatusChange(value as StatusFilter)}>
         <SelectTrigger className="md:w-44">

src/app/(modules)/roles/components/RoleSheet.tsx

@@ -10,6 +10,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import {
   Sheet,
+  SheetClose,
   SheetContent,
   SheetDescription,
   SheetFooter,
@@ -47,76 +48,79 @@ export function RoleSheet({
 }: RoleSheetProps) {
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="w-full overflow-y-auto sm:max-w-2xl">
-        <SheetHeader>
+      <SheetContent
+        side="right"
+        className="flex h-full flex-col gap-0 p-0  sm:max-w-3xl lg:max-w-2xl"
+      >
+        <SheetHeader className="shrink-0 border-b px-6 py-4">
           <SheetTitle>{roleId ? 'Edit Role' : 'Create Role'}</SheetTitle>
           <SheetDescription>
             Assign the role details and permission access for this organization.
           </SheetDescription>
         </SheetHeader>
-        <form onSubmit={onSubmit} className="flex flex-1 flex-col gap-5 px-4">
-          <div className="grid gap-4 md:grid-cols-2">
-            <div className="space-y-2">
-              <Label htmlFor="role-name">Role Name</Label>
-              <Input
-                id="role-name"
-                placeholder="Enter role name"
-                {...register('name', { required: true })}
-                required
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="role-display-name">Display Name</Label>
-              <Input
-                id="role-display-name"
-                placeholder="Enter display name"
-                {...register('display_name', { required: true })}
-                required
-              />
-            </div>
-          </div>
 
-          <div className="space-y-2">
-            <Label htmlFor="role-description">Description</Label>
-            <textarea
-              id="role-description"
-              placeholder="Describe this role"
-              {...register('description')}
-              className="min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            />
-          </div>
-
-          <div className="space-y-3">
-            <div className="flex items-center justify-between gap-3">
-              <Label>Permissions</Label>
-              <span className="text-xs text-muted-foreground">{permissionIds.length} selected</span>
-            </div>
-            {isPermissionsLoading ? (
-              <div className="rounded-md border p-6 text-sm text-muted-foreground">
-                Loading permissions...
+        <form onSubmit={onSubmit} className="flex min-h-0 flex-1 flex-col">
+          <div className="flex-1 space-y-5 overflow-y-auto px-6 py-4">
+            <div className="grid gap-4 md:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="role-name">Role Name</Label>
+                <Input
+                  id="role-name"
+                  placeholder="Enter role name"
+                  {...register('name', { required: true })}
+                  required
+                />
               </div>
-            ) : (
-              <PermissionTree
-                items={permissionTree}
-                selectedIds={permissionIds}
-                onChange={onPermissionIdsChange}
+              <div className="space-y-2">
+                <Label htmlFor="role-display-name">Display Name</Label>
+                <Input
+                  id="role-display-name"
+                  placeholder="Enter display name"
+                  {...register('display_name', { required: true })}
+                  required
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="role-description">Description</Label>
+              <textarea
+                id="role-description"
+                placeholder="Describe this role"
+                {...register('description')}
+                className="min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               />
-            )}
+            </div>
+
+            <div className="space-y-3">
+              <div className="flex items-center justify-between gap-3">
+                <Label>Permissions</Label>
+                <span className="text-xs text-muted-foreground">{permissionIds.length} selected</span>
+              </div>
+              {isPermissionsLoading ? (
+                <div className="rounded-md border p-6 text-sm text-muted-foreground">
+                  Loading permissions...
+                </div>
+              ) : (
+                <PermissionTree
+                  items={permissionTree}
+                  selectedIds={permissionIds}
+                  onChange={onPermissionIdsChange}
+                />
+              )}
+            </div>
           </div>
 
-          <SheetFooter className="px-0">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => onOpenChange(false)}
-              disabled={isSaving}
-            >
-              Cancel
-            </Button>
+          <SheetFooter className="shrink-0 border-t px-6 py-4 sm:flex-row sm:justify-end">
             <Button type="submit" disabled={isSaving}>
               {isSaving ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}
               {roleId ? 'Update Role' : 'Create Role'}
             </Button>
+            <SheetClose asChild>
+              <Button type="button" variant="outline" disabled={isSaving}>
+                Cancel
+              </Button>
+            </SheetClose>
           </SheetFooter>
         </form>
       </SheetContent>

src/app/(modules)/roles/components/RoleTable.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { ColumnDef } from '@tanstack/react-table';
+import type { ColumnDef, SortingState } from '@tanstack/react-table';
 import type { ReactNode } from 'react';
 
 import { DataTable } from '@/components/data-table';
@@ -14,7 +14,10 @@ interface RoleTableProps {
   skip: number;
   limit: number;
   total: number;
+  sorting: SortingState;
   onPageChange: (skip: number) => void;
+  onLimitChange: (limit: number) => void;
+  onSortingChange: (sorting: SortingState) => void;
 }
 
 export function RoleTable({
@@ -25,7 +28,10 @@ export function RoleTable({
   skip,
   limit,
   total,
+  sorting,
   onPageChange,
+  onLimitChange,
+  onSortingChange,
 }: RoleTableProps) {
   return (
     <DataTable
@@ -40,8 +46,10 @@ export function RoleTable({
         limit,
         totalItems: total,
         onPageChange,
-        onLimitChange: () => undefined,
+        onLimitChange,
       }}
+      sorting={sorting}
+      onSortingChange={onSortingChange}
     />
   );
 }

src/app/(modules)/roles/hooks/useRoleFilters.ts

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import type { SortingState } from '@tanstack/react-table';
 
 export type StatusFilter = 'all' | 'active' | 'inactive';
 
@@ -8,7 +9,8 @@ const SEARCH_DEBOUNCE_MS = 400;
 
 export function useRoleFilters() {
   const [skip, setSkip] = useState(0);
-  const [limit] = useState(10);
+  const [limit, setLimitValue] = useState(10);
+  const [sorting, setSortingValue] = useState<SortingState>([]);
   const [searchTerm, setSearchTermValue] = useState('');
   const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('');
   const [statusFilter, setStatusFilterValue] = useState<StatusFilter>('all');
@@ -31,10 +33,23 @@ export function useRoleFilters() {
     setSkip(0);
   };
 
+  const setLimit = (value: number) => {
+    setLimitValue(value);
+    setSkip(0);
+  };
+
+  const setSorting = (value: SortingState) => {
+    setSortingValue(value);
+    setSkip(0);
+  };
+
   return {
     skip,
     setSkip,
     limit,
+    setLimit,
+    sorting,
+    setSorting,
     searchTerm,
     debouncedSearchTerm,
     setSearchTerm,

src/app/(modules)/roles/hooks/useRoleQueries.ts

@@ -1,9 +1,11 @@
 'use client';
 
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import type { SortingState } from '@tanstack/react-table';
 import { useMemo } from 'react';
 import { toast } from 'sonner';
 
+import { getServerSortParams } from '@/components/data-table/sorting';
 import { mapPermissionTree } from '@/components/permission-tree';
 import { permissionService, roleService } from '@/services/api';
 import type { Role, RoleListParams } from '@/types';
@@ -16,6 +18,7 @@ interface UseRolesQueryParams {
   limit: number;
   searchTerm: string;
   statusFilter: StatusFilter;
+  sorting: SortingState;
 }
 
 function buildRoleListParams({
@@ -23,22 +26,22 @@ function buildRoleListParams({
   limit,
   searchTerm,
   statusFilter,
+  sorting,
 }: UseRolesQueryParams): RoleListParams {
   return {
     skip,
     limit,
     search_term: searchTerm || undefined,
     effective_status: statusFilter === 'all' ? undefined : statusFilter === 'active',
-    sort_by: 'created_at',
-    sort_order: 'desc',
+    ...getServerSortParams(sorting),
   };
 }
 
 export function useRolesQuery(params: UseRolesQueryParams) {
-  const { skip, limit, searchTerm, statusFilter } = params;
+  const { skip, limit, searchTerm, statusFilter, sorting } = params;
   const listParams = useMemo(
-    () => buildRoleListParams({ skip, limit, searchTerm, statusFilter }),
-    [limit, searchTerm, skip, statusFilter],
+    () => buildRoleListParams({ skip, limit, searchTerm, statusFilter, sorting }),
+    [limit, searchTerm, skip, sorting, statusFilter],
   );
 
   return useQuery({

src/app/(modules)/roles/page.tsx

@@ -30,6 +30,9 @@ export default function RolesPage() {
     skip,
     setSkip,
     limit,
+    setLimit,
+    sorting,
+    setSorting,
     searchTerm,
     debouncedSearchTerm,
     setSearchTerm,
@@ -42,6 +45,7 @@ export default function RolesPage() {
     limit,
     searchTerm: debouncedSearchTerm,
     statusFilter,
+    sorting,
   });
   const permissionsQuery = usePermissionsTreeQuery(isSheetOpen);
   const roleForm = useRoleForm({
@@ -108,8 +112,8 @@ export default function RolesPage() {
           icon={ShieldCheck}
           actions={
             <PermissionGuard permissions={PERMISSIONS.ROLE.CREATE}>
-              <Button onClick={openCreate}>
-                <Plus className="mr-2 size-4" />
+              <Button onClick={openCreate} size="sm">
+                <Plus />
                 Add Role
               </Button>
             </PermissionGuard>
@@ -124,7 +128,10 @@ export default function RolesPage() {
           skip={skip}
           limit={limit}
           total={total}
+          sorting={sorting}
           onPageChange={setSkip}
+          onLimitChange={setLimit}
+          onSortingChange={setSorting}
         />
 
         <PoweredBy />

src/app/(modules)/tenants/components/TenantColumns.tsx

@@ -82,6 +82,7 @@ export function useTenantColumns({
     columns.push({
       id: 'actions',
       header: () => <div className="text-right">Actions</div>,
+      enableSorting: false,
       cell: ({ row }) => {
         const tenant = row.original;
         return (

src/app/(modules)/tenants/components/TenantFilters.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Input } from '@/components/ui/input';
+import { TableSearchInput } from '@/components/data-table/TableSearchInput';
 import {
   Select,
   SelectContent,
@@ -25,11 +25,10 @@ export function TenantFilters({
 }: TenantFiltersProps) {
   return (
     <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-      <Input
+      <TableSearchInput
         value={searchTerm}
-        onChange={(event) => onSearchChange(event.target.value)}
+        onChange={onSearchChange}
         placeholder="Search tenants"
-        className="md:max-w-sm"
       />
       <Select
         value={statusFilter}

src/app/(modules)/tenants/components/TenantTable.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { ReactNode } from 'react';
-import type { ColumnDef } from '@tanstack/react-table';
+import type { ColumnDef, SortingState } from '@tanstack/react-table';
 
 import { DataTable } from '@/components/data-table';
 import type { Tenant } from '@/types';
@@ -14,7 +14,10 @@ interface TenantTableProps {
   skip: number;
   limit: number;
   total: number;
+  sorting: SortingState;
   onPageChange: (skip: number) => void;
+  onLimitChange: (limit: number) => void;
+  onSortingChange: (sorting: SortingState) => void;
 }
 
 export function TenantTable({
@@ -25,7 +28,10 @@ export function TenantTable({
   skip,
   limit,
   total,
+  sorting,
   onPageChange,
+  onLimitChange,
+  onSortingChange,
 }: TenantTableProps) {
   return (
     <DataTable
@@ -40,8 +46,10 @@ export function TenantTable({
         limit,
         totalItems: total,
         onPageChange,
-        onLimitChange: () => undefined,
+        onLimitChange,
       }}
+      sorting={sorting}
+      onSortingChange={onSortingChange}
     />
   );
 }

src/app/(modules)/tenants/hooks/useTenantFilters.ts

@@ -1,6 +1,7 @@
 'use client';
 
 import { useCallback, useState } from 'react';
+import type { SortingState } from '@tanstack/react-table';
 
 import { useDebounce } from '@/hooks/useDebounce';
 
@@ -8,7 +9,8 @@ export type TenantStatusFilter = 'all' | 'active' | 'inactive';
 
 export function useTenantFilters() {
   const [skip, setSkip] = useState(0);
-  const [limit] = useState(10);
+  const [limit, setLimitValue] = useState(10);
+  const [sorting, setSortingValue] = useState<SortingState>([]);
   const [searchTerm, setSearchTermValue] = useState('');
   const [statusFilter, setStatusFilterValue] = useState<TenantStatusFilter>('all');
   const debouncedSearchTerm = useDebounce(searchTerm.trim(), 400);
@@ -23,10 +25,23 @@ export function useTenantFilters() {
     setSkip(0);
   }, []);
 
+  const setLimit = useCallback((value: number) => {
+    setLimitValue(value);
+    setSkip(0);
+  }, []);
+
+  const setSorting = useCallback((value: SortingState) => {
+    setSortingValue(value);
+    setSkip(0);
+  }, []);
+
   return {
     skip,
     setSkip,
     limit,
+    setLimit,
+    sorting,
+    setSorting,
     searchTerm,
     debouncedSearchTerm,
     setSearchTerm,

src/app/(modules)/tenants/hooks/useTenantQueries.ts

@@ -2,7 +2,9 @@
 
 import { useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
+import type { SortingState } from '@tanstack/react-table';
 
+import { getServerSortParams } from '@/components/data-table/sorting';
 import { clientService, planService, tenantService } from '@/services/api';
 import type { TenantListParams } from '@/types';
 
@@ -14,6 +16,7 @@ interface UseTenantsQueryParams {
   limit: number;
   searchTerm: string;
   statusFilter: TenantStatusFilter;
+  sorting: SortingState;
 }
 
 const clientLookupParams = {
@@ -37,14 +40,14 @@ function buildTenantListParams({
   limit,
   searchTerm,
   statusFilter,
+  sorting,
 }: UseTenantsQueryParams): TenantListParams {
   return {
     skip,
     limit,
     search_term: searchTerm || undefined,
     is_active: statusFilter === 'all' ? undefined : statusFilter === 'active',
-    sort_by: 'created_at',
-    sort_order: 'desc',
+    ...getServerSortParams(sorting),
   };
 }
 

src/app/(modules)/tenants/page.tsx

@@ -30,6 +30,9 @@ export default function TenantsPage() {
     skip,
     setSkip,
     limit,
+    setLimit,
+    sorting,
+    setSorting,
     searchTerm,
     debouncedSearchTerm,
     setSearchTerm,
@@ -42,6 +45,7 @@ export default function TenantsPage() {
     limit,
     searchTerm: debouncedSearchTerm,
     statusFilter,
+    sorting,
   });
   const clientsLookupQuery = useClientLookupQuery(isSheetOpen);
   const plansLookupQuery = usePlanLookupQuery(isSheetOpen);
@@ -162,7 +166,10 @@ export default function TenantsPage() {
           skip={skip}
           limit={limit}
           total={total}
+          sorting={sorting}
           onPageChange={setSkip}
+          onLimitChange={setLimit}
+          onSortingChange={setSorting}
         />
 
         <PoweredBy />

src/app/(modules)/users/components/UserColumns.tsx

@@ -58,6 +58,7 @@ export function useUserColumns({
       {
         accessorKey: 'roles',
         header: 'Roles',
+        enableSorting: false,
         cell: ({ row }) => (
           <div className="flex flex-wrap gap-1">
             {row.original.roles?.length ? (
@@ -93,6 +94,7 @@ export function useUserColumns({
     columns.push({
       id: 'actions',
       header: () => <div className="text-right">Actions</div>,
+      enableSorting: false,
       cell: ({ row }) => {
         const user = row.original;
         return (

src/app/(modules)/users/components/UserFilters.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Input } from '@/components/ui/input';
+import { TableSearchInput } from '@/components/data-table/TableSearchInput';
 import {
   Select,
   SelectContent,
@@ -25,11 +25,10 @@ export function UserFilters({
 }: UserFiltersProps) {
   return (
     <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-      <Input
+      <TableSearchInput
         value={searchTerm}
-        onChange={(event) => onSearchChange(event.target.value)}
+        onChange={onSearchChange}
         placeholder="Search users"
-        className="md:max-w-sm"
       />
       <Select value={statusFilter} onValueChange={(value) => onStatusChange(value as StatusFilter)}>
         <SelectTrigger className="md:w-44">

src/app/(modules)/users/components/UserSheet.tsx

@@ -1,10 +1,14 @@
 'use client';
 
-import type { ComponentProps } from 'react';
+import { useRef, type ComponentProps } from 'react';
+
 import type { UseFormRegister } from 'react-hook-form';
+
 import { Loader2 } from 'lucide-react';
 
+import { RoleCombobox } from '@/components/lookups/RoleCombobox';
 import { Button } from '@/components/ui/button';
+
 import {
   Dialog,
   DialogContent,
@@ -13,54 +17,64 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+
 import { Input } from '@/components/ui/input';
+
 import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import type { Role } from '@/types';
+
 import type { UserFormValues } from '../hooks/useUserForm';
 
 interface UserSheetProps {
   open: boolean;
+
   onOpenChange: (open: boolean) => void;
+
   userId?: number;
+
   register: UseFormRegister<UserFormValues>;
+
   onSubmit: ComponentProps<'form'>['onSubmit'];
+
   roleId: string;
+
   onRoleChange: (roleId: string) => void;
-  roles: Role[];
-  isRolesLoading: boolean;
+
   isSaving: boolean;
 }
 
 export function UserSheet({
   open,
+
   onOpenChange,
+
   userId,
+
   register,
+
   onSubmit,
+
   roleId,
+
   onRoleChange,
-  roles,
-  isRolesLoading,
+
   isSaving,
 }: UserSheetProps) {
+  const roleComboboxPortalRef = useRef<HTMLDivElement | null>(null);
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-h-[calc(100vh-2rem)] overflow-y-auto sm:max-w-xl">
         <DialogHeader>
           <DialogTitle>{userId ? 'Edit User' : 'Create User'}</DialogTitle>
+
           <DialogDescription>Assign user details and a role.</DialogDescription>
         </DialogHeader>
+
         <form onSubmit={onSubmit} className="flex flex-1 flex-col gap-5 px-4">
           <div className="grid gap-4 md:grid-cols-2">
             <div className="space-y-2">
               <Label htmlFor="first-name">First Name</Label>
+
               <Input
                 id="first-name"
                 placeholder="Enter first name"
@@ -68,8 +82,10 @@ export function UserSheet({
                 required
               />
             </div>
+
             <div className="space-y-2">
               <Label htmlFor="last-name">Last Name</Label>
+
               <Input
                 id="last-name"
                 placeholder="Enter last name"
@@ -81,6 +97,7 @@ export function UserSheet({
 
           <div className="space-y-2">
             <Label htmlFor="email">Email</Label>
+
             <Input
               id="email"
               type="email"
@@ -92,6 +109,7 @@ export function UserSheet({
 
           <div className="space-y-2">
             <Label htmlFor="phone-number">Phone Number</Label>
+
             <Input
               id="phone-number"
               placeholder="Enter phone number"
@@ -101,18 +119,17 @@ export function UserSheet({
 
           <div className="space-y-2">
             <Label>Role</Label>
-            <Select value={roleId} onValueChange={onRoleChange}>
-              <SelectTrigger>
-                <SelectValue placeholder={isRolesLoading ? 'Loading roles...' : 'Select role'} />
-              </SelectTrigger>
-              <SelectContent>
-                {roles.map((role) => (
-                  <SelectItem key={role.id} value={String(role.id)}>
-                    {role.display_name || role.name}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+
+            <RoleCombobox
+              value={roleId}
+              onValueChange={onRoleChange}
+              enabled={open}
+              disabled={isSaving}
+              portalContainer={roleComboboxPortalRef}
+            />
+
+            <div ref={roleComboboxPortalRef} />
+
             <input
               type="hidden"
               {...register('role_id', { required: true })}
@@ -130,8 +147,10 @@ export function UserSheet({
             >
               Cancel
             </Button>
+
             <Button type="submit" disabled={isSaving}>
               {isSaving ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}
+
               {userId ? 'Update User' : 'Create User'}
             </Button>
           </DialogFooter>

src/app/(modules)/users/components/UserTable.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { ReactNode } from 'react';
-import type { ColumnDef } from '@tanstack/react-table';
+import type { ColumnDef, SortingState } from '@tanstack/react-table';
 
 import { DataTable } from '@/components/data-table';
 import type { AdministrationUser } from '@/types';
@@ -14,7 +14,10 @@ interface UserTableProps {
   skip: number;
   limit: number;
   total: number;
+  sorting: SortingState;
   onPageChange: (skip: number) => void;
+  onLimitChange: (limit: number) => void;
+  onSortingChange: (sorting: SortingState) => void;
 }
 
 export function UserTable({
@@ -25,7 +28,10 @@ export function UserTable({
   skip,
   limit,
   total,
+  sorting,
   onPageChange,
+  onLimitChange,
+  onSortingChange,
 }: UserTableProps) {
   return (
     <DataTable
@@ -40,8 +46,10 @@ export function UserTable({
         limit,
         totalItems: total,
         onPageChange,
-        onLimitChange: () => undefined,
+        onLimitChange,
       }}
+      sorting={sorting}
+      onSortingChange={onSortingChange}
     />
   );
 }

src/app/(modules)/users/hooks/useUserFilters.ts

@@ -2,13 +2,15 @@
 
 import { useDebounce } from '@/hooks/useDebounce';
 import type { UserStatus } from '@/types';
+import type { SortingState } from '@tanstack/react-table';
 import { useCallback, useState } from 'react';
 
 export type StatusFilter = 'all' | UserStatus;
 
 export function useUserFilters() {
   const [skip, setSkip] = useState(0);
-  const [limit] = useState(10);
+  const [limit, setLimitValue] = useState(10);
+  const [sorting, setSortingValue] = useState<SortingState>([]);
   const [searchTerm, setSearchTermValue] = useState('');
   const [statusFilter, setStatusFilterValue] = useState<StatusFilter>('all');
   const debouncedSearchTerm = useDebounce(searchTerm.trim(), 400);
@@ -23,10 +25,23 @@ export function useUserFilters() {
     setSkip(0);
   }, []);
 
+  const setLimit = useCallback((value: number) => {
+    setLimitValue(value);
+    setSkip(0);
+  }, []);
+
+  const setSorting = useCallback((value: SortingState) => {
+    setSortingValue(value);
+    setSkip(0);
+  }, []);
+
   return {
     skip,
     setSkip,
     limit,
+    setLimit,
+    sorting,
+    setSorting,
     searchTerm,
     debouncedSearchTerm,
     setSearchTerm,

src/app/(modules)/users/hooks/useUserQueries.ts

@@ -2,10 +2,11 @@
 
 import { useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
+import type { SortingState } from '@tanstack/react-table';
 
-import { roleService, userService } from '@/services/api';
-import type { RoleListParams, UserListParams } from '@/types';
-import { roleKeys } from '../../roles/queries/roleKeys';
+import { getServerSortParams } from '@/components/data-table/sorting';
+import { userService } from '@/services/api';
+import type { UserListParams } from '@/types';
 import { userKeys } from '../queries/userKeys';
 import type { StatusFilter } from './useUserFilters';
 
@@ -14,37 +15,30 @@ interface UseUsersQueryParams {
   limit: number;
   searchTerm: string;
   statusFilter: StatusFilter;
+  sorting: SortingState;
 }
 
-const roleLookupParams: RoleListParams = {
-  skip: 0,
-  limit: 100,
-  effective_status: true,
-  sort_by: 'display_name',
-  sort_order: 'asc',
-};
-
 function buildUserListParams({
   skip,
   limit,
   searchTerm,
   statusFilter,
+  sorting,
 }: UseUsersQueryParams): UserListParams {
   return {
     skip,
     limit,
     search_term: searchTerm || undefined,
     effective_status: statusFilter === 'all' ? undefined : statusFilter,
-    sort_by: 'created_at',
-    sort_order: 'desc',
+    ...getServerSortParams(sorting),
   };
 }
 
 export function useUsersQuery(params: UseUsersQueryParams) {
-  const { skip, limit, searchTerm, statusFilter } = params;
+  const { skip, limit, searchTerm, statusFilter, sorting } = params;
   const listParams = useMemo(
-    () => buildUserListParams({ skip, limit, searchTerm, statusFilter }),
-    [limit, searchTerm, skip, statusFilter],
+    () => buildUserListParams({ skip, limit, searchTerm, statusFilter, sorting }),
+    [limit, searchTerm, skip, sorting, statusFilter],
   );
 
   return useQuery({
@@ -52,13 +46,3 @@ export function useUsersQuery(params: UseUsersQueryParams) {
     queryFn: () => userService.getUsers(listParams),
   });
 }
-
-export function useRoleLookupQuery(enabled: boolean) {
-  return useQuery({
-    queryKey: roleKeys.list(roleLookupParams),
-    queryFn: () => roleService.getRoles(roleLookupParams),
-    enabled,
-    staleTime: 5 * 60 * 1000,
-    gcTime: 30 * 60 * 1000,
-  });
-}

src/app/(modules)/users/page.tsx

@@ -18,7 +18,7 @@ import { UserTable } from './components/UserTable';
 import { useUserFilters } from './hooks/useUserFilters';
 import { useUserForm } from './hooks/useUserForm';
 import { useUserStatusMutation } from './hooks/useUserMutations';
-import { useRoleLookupQuery, useUsersQuery } from './hooks/useUserQueries';
+import { useUsersQuery } from './hooks/useUserQueries';
 
 export default function UsersPage() {
   const [isSheetOpen, setIsSheetOpen] = useState(false);
@@ -26,6 +26,9 @@ export default function UsersPage() {
     skip,
     setSkip,
     limit,
+    setLimit,
+    sorting,
+    setSorting,
     searchTerm,
     debouncedSearchTerm,
     setSearchTerm,
@@ -38,8 +41,8 @@ export default function UsersPage() {
     limit,
     searchTerm: debouncedSearchTerm,
     statusFilter,
+    sorting,
   });
-  const rolesQuery = useRoleLookupQuery(isSheetOpen);
   const userForm = useUserForm({
     onSaved: () => setIsSheetOpen(false),
   });
@@ -84,7 +87,6 @@ export default function UsersPage() {
 
   const total = usersQuery.data?.total ?? 0;
   const users = usersQuery.data?.items ?? [];
-  const roleOptions = rolesQuery.data?.items ?? [];
   const toolbar = useMemo(
     () => (
       <UserFilters
@@ -106,8 +108,8 @@ export default function UsersPage() {
           icon={Users}
           actions={
             <PermissionGuard permissions={PERMISSIONS.USER.CREATE}>
-              <Button onClick={openCreate}>
-                <Plus className="mr-2 size-4" />
+              <Button onClick={openCreate} size="sm">
+                <Plus />
                 Add User
               </Button>
             </PermissionGuard>
@@ -129,7 +131,10 @@ export default function UsersPage() {
           skip={skip}
           limit={limit}
           total={total}
+          sorting={sorting}
           onPageChange={setSkip}
+          onLimitChange={setLimit}
+          onSortingChange={setSorting}
         />
 
         <PoweredBy />
@@ -143,8 +148,6 @@ export default function UsersPage() {
         onSubmit={handleSubmit}
         roleId={roleId}
         onRoleChange={setRoleId}
-        roles={roleOptions}
-        isRolesLoading={rolesQuery.isLoading}
         isSaving={isSaving}
       />
     </>

src/components/async-combobox/AsyncCombobox.tsx

@@ -0,0 +1,156 @@
+'use client';
+
+import { useCallback, useRef, useState } from 'react';
+import { Loader2 } from 'lucide-react';
+import type { Virtualizer } from '@tanstack/react-virtual';
+
+import { Button } from '@/components/ui/button';
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxList,
+  ComboboxTrigger,
+  ComboboxValue,
+} from '@/components/ui/combobox';
+
+import type { AsyncComboboxOption, AsyncComboboxProps } from './AsyncCombobox.types';
+import { VirtualComboboxList } from './VirtualComboboxList';
+
+type VirtualizerHandle = Virtualizer<HTMLDivElement, Element>;
+
+export function AsyncCombobox({
+  lookup,
+  onValueChange,
+  placeholder = 'Select option',
+  searchPlaceholder = 'Search...',
+  emptyMessage = 'No items found.',
+  disabled = false,
+  portalContainer,
+}: AsyncComboboxProps) {
+  const [open, setOpen] = useState(false);
+  const virtualizerRef = useRef<VirtualizerHandle | null>(null);
+  const {
+    options,
+    selectedOption,
+    search,
+    setSearch,
+    isLoading,
+    isFetchingNextPage,
+    isError,
+    errorMessage,
+    hasNextPage,
+    fetchNextPage,
+  } = lookup;
+
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      setOpen(nextOpen);
+      if (!nextOpen) {
+        setSearch('');
+      }
+    },
+    [setSearch],
+  );
+
+  const handleValueChange = useCallback(
+    (item: AsyncComboboxOption | null) => {
+      if (item?.value) {
+        onValueChange(item.value);
+      }
+    },
+    [onValueChange],
+  );
+
+  const handleItemHighlighted = useCallback(
+    (
+      _item: AsyncComboboxOption | undefined,
+      event: { reason: string; index: number },
+    ) => {
+      const virtualizer = virtualizerRef.current;
+      if (!virtualizer) {
+        return;
+      }
+
+      const { reason, index } = event;
+      const isStart = index === 0;
+      const isEnd = index === virtualizer.options.count - 1;
+      const shouldScroll =
+        reason === 'none' || (reason === 'keyboard' && (isStart || isEnd));
+
+      if (shouldScroll) {
+        queueMicrotask(() => {
+          virtualizer.scrollToIndex(index, { align: isEnd ? 'start' : 'end' });
+        });
+      }
+    },
+    [],
+  );
+
+  const handleLoadMore = useCallback(() => {
+    void fetchNextPage();
+  }, [fetchNextPage]);
+
+  const isDisabled = disabled || isLoading;
+  const triggerPlaceholder = isLoading ? 'Loading...' : placeholder;
+
+  return (
+    <Combobox
+      virtualized
+      items={options}
+      value={selectedOption}
+      onValueChange={handleValueChange}
+      open={open}
+      onOpenChange={handleOpenChange}
+      inputValue={search}
+      onInputValueChange={setSearch}
+      filter={null}
+      disabled={isDisabled}
+      itemToStringLabel={(item) => item.label}
+      isItemEqualToValue={(item, currentValue) => item.value === currentValue.value}
+      onItemHighlighted={handleItemHighlighted}
+    >
+      <ComboboxTrigger
+        render={
+          <Button
+            type="button"
+            variant="outline"
+            className="w-full justify-between font-normal"
+            disabled={isDisabled}
+          >
+            {isLoading && !selectedOption ? (
+              <span className="flex items-center gap-2 text-muted-foreground">
+                <Loader2 className="size-4 animate-spin" />
+                Loading...
+              </span>
+            ) : (
+              <ComboboxValue placeholder={triggerPlaceholder} />
+            )}
+          </Button>
+        }
+      />
+      <ComboboxContent container={portalContainer}>
+        <ComboboxInput showTrigger={false} placeholder={searchPlaceholder} disabled={isDisabled} />
+        {isError ? (
+          <div className="px-3 py-2 text-sm text-destructive">
+            {errorMessage || 'Unable to load options.'}
+          </div>
+        ) : (
+          <>
+            <ComboboxEmpty>{emptyMessage}</ComboboxEmpty>
+            <ComboboxList className="p-0">
+              <VirtualComboboxList
+                open={open}
+                virtualizerRef={virtualizerRef}
+                hasNextPage={hasNextPage}
+                isFetchingNextPage={isFetchingNextPage}
+                onLoadMore={handleLoadMore}
+              />
+            </ComboboxList>
+          </>
+        )}
+      </ComboboxContent>
+    </Combobox>
+  );
+}

src/components/async-combobox/AsyncCombobox.types.ts

@@ -0,0 +1,50 @@
+import type { RefObject } from 'react';
+
+export type AsyncComboboxOption = {
+  value: string;
+  label: string;
+};
+
+export type PaginatedResult<T> = {
+  items: T[];
+  total: number;
+};
+
+export type PaginatedLookupConfig<T> = {
+  enabled?: boolean;
+  pageSize?: number;
+  debounceMs?: number;
+  selectedValue?: string;
+  queryKey: (searchTerm: string) => readonly unknown[];
+  queryFn: (args: {
+    searchTerm: string;
+    skip: number;
+    limit: number;
+  }) => Promise<PaginatedResult<T>>;
+  mapOption: (item: T) => AsyncComboboxOption;
+  resolveSelected?: (value: string) => Promise<T | null>;
+  resolveSelectedQueryKey?: (value: string) => readonly unknown[];
+};
+
+export interface PaginatedLookupState {
+  options: AsyncComboboxOption[];
+  selectedOption: AsyncComboboxOption | null;
+  search: string;
+  setSearch: (value: string) => void;
+  isLoading: boolean;
+  isFetchingNextPage: boolean;
+  isError: boolean;
+  errorMessage?: string;
+  hasNextPage: boolean;
+  fetchNextPage: () => void | Promise<unknown>;
+}
+
+export interface AsyncComboboxProps {
+  lookup: PaginatedLookupState;
+  onValueChange: (value: string) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  disabled?: boolean;
+  portalContainer?: RefObject<HTMLDivElement | null>;
+}

src/components/async-combobox/VirtualComboboxList.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import { useCallback, useEffect, useImperativeHandle, useRef, type RefObject } from 'react';
+import { Combobox } from '@base-ui/react/combobox';
+import { useVirtualizer, type Virtualizer } from '@tanstack/react-virtual';
+import { Loader2 } from 'lucide-react';
+
+import { ComboboxItem } from '@/components/ui/combobox';
+import { cn } from '@/lib/utils';
+
+import type { AsyncComboboxOption } from './AsyncCombobox.types';
+
+type VirtualizerHandle = Virtualizer<HTMLDivElement, Element>;
+const LOAD_MORE_THRESHOLD = 3;
+
+interface VirtualComboboxListProps {
+  open: boolean;
+  virtualizerRef: RefObject<VirtualizerHandle | null>;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  onLoadMore: () => void;
+  estimateSize?: number;
+}
+
+export function VirtualComboboxList({
+  open,
+  virtualizerRef,
+  hasNextPage,
+  isFetchingNextPage,
+  onLoadMore,
+  estimateSize = 36,
+}: VirtualComboboxListProps) {
+  const filteredItems = Combobox.useFilteredItems<AsyncComboboxOption>();
+  const scrollElementRef = useRef<HTMLDivElement | null>(null);
+  const itemCount = filteredItems.length + (hasNextPage ? 1 : 0);
+
+  const virtualizer = useVirtualizer({
+    enabled: open,
+    count: itemCount,
+    getScrollElement: () => scrollElementRef.current,
+    estimateSize: () => estimateSize,
+    overscan: 8,
+    paddingStart: 4,
+    paddingEnd: 4,
+  });
+
+  useImperativeHandle(virtualizerRef, () => virtualizer, [virtualizer]);
+
+  const handleScrollElementRef = useCallback(
+    (element: HTMLDivElement | null) => {
+      scrollElementRef.current = element;
+      if (element) {
+        virtualizer.measure();
+      }
+    },
+    [virtualizer],
+  );
+
+  const virtualItems = virtualizer.getVirtualItems();
+  const totalSize = virtualizer.getTotalSize();
+  const lastVirtualIndex = virtualItems[virtualItems.length - 1]?.index ?? -1;
+
+  useEffect(() => {
+    if (lastVirtualIndex < 0) {
+      return;
+    }
+
+    if (
+      lastVirtualIndex >= filteredItems.length - LOAD_MORE_THRESHOLD &&
+      hasNextPage &&
+      !isFetchingNextPage
+    ) {
+      onLoadMore();
+    }
+  }, [filteredItems.length, hasNextPage, isFetchingNextPage, lastVirtualIndex, onLoadMore]);
+
+  if (!filteredItems.length && !hasNextPage) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={handleScrollElementRef}
+      className={cn(
+        'max-h-[min(21.75rem,calc(var(--available-height)-2.25rem))] overflow-y-auto overscroll-contain p-1',
+      )}
+      style={{ height: Math.min(totalSize + 8, 348) }}
+    >
+      <div className="relative w-full" style={{ height: totalSize }}>
+        {virtualItems.map((virtualItem) => {
+          const isLoaderRow = virtualItem.index >= filteredItems.length;
+          const item = filteredItems[virtualItem.index];
+
+          return (
+            <div
+              key={virtualItem.key}
+              data-index={virtualItem.index}
+              ref={virtualizer.measureElement}
+              className="absolute top-0 left-0 w-full"
+              style={{
+                height: virtualItem.size,
+                transform: `translateY(${virtualItem.start}px)`,
+              }}
+            >
+              {isLoaderRow ? (
+                <div className="flex items-center justify-center py-2 text-muted-foreground">
+                  <Loader2 className="size-4 animate-spin" />
+                </div>
+              ) : (
+                <ComboboxItem
+                  value={item}
+                  index={virtualItem.index}
+                  aria-setsize={filteredItems.length}
+                  aria-posinset={virtualItem.index + 1}
+                >
+                  {item.label}
+                </ComboboxItem>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/components/async-combobox/index.ts

@@ -0,0 +1,9 @@
+export { AsyncCombobox } from './AsyncCombobox';
+export { usePaginatedLookup } from './usePaginatedLookup';
+export type {
+  AsyncComboboxProps,
+  AsyncComboboxOption,
+  PaginatedLookupState,
+  PaginatedLookupConfig,
+  PaginatedResult,
+} from './AsyncCombobox.types';

src/components/async-combobox/usePaginatedLookup.ts

@@ -0,0 +1,94 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+
+import { useDebounce } from '@/hooks/useDebounce';
+
+import type { AsyncComboboxOption, PaginatedLookupConfig } from './AsyncCombobox.types';
+
+export function usePaginatedLookup<T>({
+  enabled = true,
+  pageSize = 20,
+  debounceMs = 400,
+  selectedValue = '',
+  queryKey,
+  queryFn,
+  mapOption,
+  resolveSelected,
+  resolveSelectedQueryKey,
+}: PaginatedLookupConfig<T>) {
+  const [search, setSearch] = useState('');
+  const debouncedSearch = useDebounce(search.trim(), debounceMs);
+
+  const infiniteQuery = useInfiniteQuery({
+    queryKey: queryKey(debouncedSearch),
+    queryFn: ({ pageParam }) =>
+      queryFn({
+        searchTerm: debouncedSearch,
+        skip: pageParam,
+        limit: pageSize,
+      }),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, allPages) => {
+      if (lastPage.items.length === 0) {
+        return undefined;
+      }
+
+      const loadedCount = allPages.reduce((count, page) => count + page.items.length, 0);
+      return loadedCount < lastPage.total ? loadedCount : undefined;
+    },
+    enabled,
+    staleTime: 5 * 60 * 1000,
+    gcTime: 30 * 60 * 1000,
+  });
+
+  const options = useMemo<AsyncComboboxOption[]>(() => {
+    const items = infiniteQuery.data?.pages.flatMap((page) => page.items) ?? [];
+    return items.map(mapOption);
+  }, [infiniteQuery.data?.pages, mapOption]);
+
+  const selectedInList = useMemo(
+    () => options.find((option) => option.value === selectedValue) ?? null,
+    [options, selectedValue],
+  );
+
+  const resolvedSelectedQuery = useQuery({
+    queryKey: resolveSelectedQueryKey?.(selectedValue) ?? [
+      ...queryKey(''),
+      'selected',
+      selectedValue,
+    ],
+    queryFn: async () => {
+      if (!selectedValue || !resolveSelected) {
+        return null;
+      }
+
+      const item = await resolveSelected(selectedValue);
+      return item ? mapOption(item) : null;
+    },
+    enabled: enabled && Boolean(selectedValue) && !selectedInList && Boolean(resolveSelected),
+    staleTime: 5 * 60 * 1000,
+    gcTime: 30 * 60 * 1000,
+  });
+
+  const selectedOption = selectedInList ?? resolvedSelectedQuery.data ?? null;
+
+  return {
+    search,
+    setSearch,
+    options,
+    selectedOption,
+    isLoading: infiniteQuery.isLoading,
+    isError: infiniteQuery.isError || resolvedSelectedQuery.isError,
+    errorMessage:
+      infiniteQuery.error instanceof Error
+        ? infiniteQuery.error.message
+        : resolvedSelectedQuery.error instanceof Error
+          ? resolvedSelectedQuery.error.message
+          : undefined,
+    isFetchingNextPage: infiniteQuery.isFetchingNextPage,
+    hasNextPage: infiniteQuery.hasNextPage ?? false,
+    fetchNextPage: infiniteQuery.fetchNextPage,
+  };
+}

src/components/data-table/Footer/index.tsx

@@ -1,38 +1,79 @@
 'use client';
+
 import { Table } from '@tanstack/react-table';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
 import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
+const PAGE_SIZE_OPTIONS = [10, 20, 40, 50, 100];
 
 export function TableFooter<TData>({
   table,
   totalItems,
+  pageSize,
+  onPageSizeChange,
 }: {
   table: Table<TData>;
   totalItems: number;
+  pageSize?: number;
+  onPageSizeChange?: (pageSize: number) => void;
 }) {
   const rows = table.getRowModel().rows.length;
+  const currentPageSize = pageSize ?? table.getState().pagination.pageSize;
 
   return (
-    <div className="flex items-center justify-between gap-3 text-sm text-muted-foreground">
-      <span>
-        Showing {rows} of {totalItems}
-      </span>
+    <div className="flex flex-col gap-3 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex flex-wrap items-center gap-3">
+        <span>
+          Showing {rows} of {totalItems}
+        </span>
+        {onPageSizeChange ? (
+          <div className="flex items-center gap-2">
+            <span >Rows per page</span>
+            <Select
+              value={String(currentPageSize)}
+              onValueChange={(value) => onPageSizeChange(Number(value))}
+            >
+              <SelectTrigger className="h-8 w-18 bg-background">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {PAGE_SIZE_OPTIONS.map((size) => (
+                  <SelectItem key={size} value={String(size)}>
+                    {size}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        ) : null}
+      </div>
       <div className="flex gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => table.previousPage()}
-            disabled={!table.getCanPreviousPage()}
-          >
-            Previous
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => table.nextPage()}
-            disabled={!table.getCanNextPage()}
-          >
-            Next
-          </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          <ChevronLeft className="size-4" />
+          Previous
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          Next
+          <ChevronRight className="size-4" />
+        </Button>
       </div>
     </div>
   );

src/components/data-table/TableHeader.tsx

@@ -2,21 +2,47 @@
 import { flexRender } from '@tanstack/react-table';
 import { TableHead, TableHeader as ShadTableHeader, TableRow } from '@/components/ui/table';
 import { Table } from '@tanstack/react-table';
+import { ArrowDownWideNarrow, ArrowUpDown, ArrowUpNarrowWide } from 'lucide-react';
+import { cn } from '@/lib/utils';
 
 const TableHeader = <TData, _>({ table }: { table: Table<TData> }) => {
   return (
-    <ShadTableHeader className="sticky top-0 z-10 bg-card">
+    <ShadTableHeader className="sticky top-0 z-10 bg-card/80 backdrop-blur-xl">
       {table.getHeaderGroups().map((headerGroup) => (
         <TableRow key={headerGroup.id}>
           {headerGroup.headers.map((header) => {
+            const canSort = header.column.getCanSort();
+            const sortDirection = header.column.getIsSorted();
+            const SortIcon =
+              sortDirection === 'asc'
+                ? ArrowUpNarrowWide
+                : sortDirection === 'desc'
+                  ? ArrowDownWideNarrow
+                  : ArrowUpDown;
+
             return (
               <TableHead
                 key={header.id}
-                className="h-10 px-2 text-foreground bg-card"
+                onClick={canSort ? header.column.getToggleSortingHandler() : undefined}
+                className={cn(
+                  'h-10 bg-card/80 px-2 text-foreground backdrop-blur-xl transition-colors',
+                  canSort && 'cursor-pointer select-none hover:bg-muted/60',
+                  sortDirection && 'bg-muted/70',
+                )}
               >
                 {header.isPlaceholder ? null : (
-                  <div className="flex items-center gap-2">
-                    {flexRender(header.column.columnDef.header, header.getContext())}
+                  <div className="flex min-h-8 w-full items-center justify-between gap-2">
+                    <span className="truncate">
+                      {flexRender(header.column.columnDef.header, header.getContext())}
+                    </span>
+                    {canSort ? (
+                      <SortIcon
+                        className={cn(
+                          'size-3.5 shrink-0 transition-colors',
+                          sortDirection ? 'text-foreground' : 'text-muted-foreground/60',
+                        )}
+                      />
+                    ) : null}
                   </div>
                 )}
               </TableHead>

src/components/data-table/TableSearchInput.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { Search } from 'lucide-react';
+
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from '@/components/ui/input-group';
+import { cn } from '@/lib/utils';
+
+interface TableSearchInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+export function TableSearchInput({
+  value,
+  onChange,
+  placeholder = 'Search...',
+  className,
+}: TableSearchInputProps) {
+  return (
+    <InputGroup className={cn('md:max-w-xs', className)}>
+      <InputGroupAddon>
+        <Search />
+      </InputGroupAddon>
+      <InputGroupInput
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder={placeholder}
+      />
+    </InputGroup>
+  );
+}

src/components/data-table/index.tsx

@@ -38,6 +38,8 @@ export interface DataTableProps<TData, TValue> {
     onPageChange: (newSkip: number) => void;
     onLimitChange: (newLimit: number) => void;
   };
+  sorting?: SortingState;
+  onSortingChange?: (sorting: SortingState) => void;
 }
 
 export function DataTable<TData, TValue>({
@@ -53,9 +55,24 @@ export function DataTable<TData, TValue>({
   emptyTitle = 'No results found.',
   emptyDescription = 'Try adjusting your filters or search terms.',
   pagination,
+  sorting: controlledSorting,
+  onSortingChange,
 }: DataTableProps<TData, TValue>) {
   const [rowSelection, setRowSelection] = React.useState({});
-  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [internalSorting, setInternalSorting] = React.useState<SortingState>([]);
+  const sorting = controlledSorting ?? internalSorting;
+  const isManualSorting = Boolean(onSortingChange);
+  const handleSortingChange = React.useCallback(
+    (updater: SortingState | ((old: SortingState) => SortingState)) => {
+      const nextSorting = typeof updater === 'function' ? updater(sorting) : updater;
+      if (onSortingChange) {
+        onSortingChange(nextSorting);
+        return;
+      }
+      setInternalSorting(nextSorting);
+    },
+    [onSortingChange, sorting],
+  );
 
   const columns = React.useMemo(() => {
     const cols: ColumnDef<TData, TValue>[] = [...initialColumns];
@@ -105,10 +122,11 @@ export function DataTable<TData, TValue>({
     columns,
     getCoreRowModel: getCoreRowModel(),
     onRowSelectionChange: setRowSelection,
-    onSortingChange: setSorting,
+    onSortingChange: handleSortingChange,
     getSortedRowModel: getSortedRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     manualPagination: !!pagination,
+    manualSorting: isManualSorting,
     pageCount: pagination?.totalItems ? Math.ceil(pagination.totalItems / pagination.limit) : -1,
     state: {
       rowSelection,
@@ -126,7 +144,14 @@ export function DataTable<TData, TValue>({
           pageIndex: Math.floor(pagination.skip / pagination.limit),
           pageSize: pagination.limit,
         });
-        pagination.onLimitChange(newState.pageSize);
+        const pageSizeChanged = newState.pageSize !== pagination.limit;
+
+        if (pageSizeChanged) {
+          pagination.onLimitChange(newState.pageSize);
+          pagination.onPageChange(0);
+          return;
+        }
+
         pagination.onPageChange(newState.pageIndex * newState.pageSize);
       }
     },
@@ -144,7 +169,7 @@ export function DataTable<TData, TValue>({
 
         <div>
           <Table
-            containerClassName="max-h-[calc(100vh-300px)] overflow-y-auto"
+            containerClassName="max-h-[calc(100vh-350px)] overflow-y-auto"
             className="border-separate border-spacing-0"
           >
             <TableHeader table={table} />
@@ -154,7 +179,7 @@ export function DataTable<TData, TValue>({
                   <TableRow key={idx}>
                     {columns.map((_, colIdx) => (
                       <TableCell key={colIdx}>
-                        <Skeleton className="h-4 w-full max-w-[140px]" />
+                        <Skeleton className="h-4 w-full max-w-35" />
                       </TableCell>
                     ))}
                   </TableRow>
@@ -185,7 +210,12 @@ export function DataTable<TData, TValue>({
             </TableBody>
           </Table>
         </div>
-        <TableFooter table={table} totalItems={pagination?.totalItems ?? data.length} />
+        <TableFooter
+          table={table}
+          totalItems={pagination?.totalItems ?? data.length}
+          pageSize={pagination?.limit}
+          onPageSizeChange={pagination?.onLimitChange}
+        />
     </section>
   );
 }

src/components/data-table/sorting.ts

@@ -0,0 +1,14 @@
+import type { SortingState } from '@tanstack/react-table';
+
+export function getServerSortParams(sorting: SortingState) {
+  const activeSort = sorting[0];
+
+  if (!activeSort) {
+    return {};
+  }
+
+  return {
+    sort_by: activeSort.id,
+    sort_order: activeSort.desc ? 'desc' : 'asc',
+  };
+}

src/components/lookups/RoleCombobox.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { AsyncCombobox, usePaginatedLookup } from '@/components/async-combobox';
+import type { AsyncComboboxOption } from '@/components/async-combobox';
+import { roleService } from '@/services/api';
+import type { Role } from '@/types';
+
+import { roleKeys } from '@/app/(modules)/roles/queries/roleKeys';
+import type { RoleComboboxProps } from './RoleCombobox.types';
+
+const ROLE_PAGE_SIZE = 20;
+
+function parseRoleId(value: string) {
+  const roleId = Number(value);
+  return Number.isFinite(roleId) ? roleId : null;
+}
+
+function mapRoleOption(role: Role): AsyncComboboxOption {
+  return {
+    value: String(role.id),
+    label: role.display_name || role.name,
+  };
+}
+
+export function RoleCombobox({
+  value,
+  onValueChange,
+  enabled = true,
+  disabled = false,
+  portalContainer,
+}: RoleComboboxProps) {
+  const lookup = usePaginatedLookup<Role>({
+    enabled,
+    selectedValue: value,
+    pageSize: ROLE_PAGE_SIZE,
+    queryKey: (searchTerm) =>
+      [
+        ...roleKeys.lists(),
+        'async-lookup',
+        searchTerm,
+        ROLE_PAGE_SIZE,
+      ] as const,
+    queryFn: ({ searchTerm, skip, limit }) =>
+      roleService.getRoles({
+        search_term: searchTerm || undefined,
+        skip,
+        limit,
+        effective_status: true,
+        sort_by: 'display_name',
+        sort_order: 'asc',
+    }),
+    mapOption: mapRoleOption,
+    resolveSelected: (roleId) => {
+      const numericRoleId = parseRoleId(roleId);
+      return numericRoleId ? roleService.getRoleById(numericRoleId) : Promise.resolve(null);
+    },
+    resolveSelectedQueryKey: (roleId) => {
+      const numericRoleId = parseRoleId(roleId);
+      return numericRoleId ? roleKeys.detail(numericRoleId) : [...roleKeys.details(), 'invalid', roleId];
+    },
+  });
+
+  return (
+    <AsyncCombobox
+      lookup={lookup}
+      onValueChange={onValueChange}
+      disabled={disabled}
+      placeholder="Select role"
+      searchPlaceholder="Search roles..."
+      emptyMessage="No roles found."
+      portalContainer={portalContainer}
+    />
+  );
+}

src/components/lookups/RoleCombobox.types.ts

@@ -0,0 +1,9 @@
+import type { RefObject } from 'react';
+
+export interface RoleComboboxProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  enabled?: boolean;
+  disabled?: boolean;
+  portalContainer?: RefObject<HTMLDivElement | null>;
+}

src/components/permission-tree.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { Badge } from '@/components/ui/badge';
 import { CheckboxTree } from '@/components/ui/tree';
 import type { PermissionTreeItem, PermissionTreeNode } from '@/types';
 
@@ -46,11 +45,7 @@ export function PermissionTree({
       selectedIds={selectedIds}
       onSelectedIdsChange={onChange}
       emptyMessage="No permissions available."
-      renderMeta={(item) => (
-        <Badge variant="outline" className="text-[10px] capitalize">
-          {item.type}
-        </Badge>
-      )}
+      showDescription={false}
     />
   );
 }

src/components/ui/button.tsx

@@ -1,58 +1,64 @@
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
-          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
         outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        link: 'text-primary underline-offset-4 hover:underline',
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: 'size-9',
-        'icon-sm': 'size-8',
-        'icon-lg': 'size-10',
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
       },
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default',
+      variant: "default",
+      size: "default",
     },
-  },
-);
+  }
+)
 
 function Button({
   className,
-  variant,
-  size,
+  variant = "default",
+  size = "default",
   asChild = false,
   ...props
-}: React.ComponentProps<'button'> &
+}: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
+    asChild?: boolean
   }) {
-  const Comp = asChild ? Slot : 'button';
+  const Comp = asChild ? Slot.Root : "button"
 
   return (
     <Comp
       data-slot="button"
+      data-variant={variant}
+      data-size={size}
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
-  );
+  )
 }
 
-export { Button, buttonVariants };
+export { Button, buttonVariants }

src/components/ui/combobox.tsx

@@ -0,0 +1,313 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as ComboboxPrimitive } from "@base-ui/react"
+import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group"
+
+const Combobox = ComboboxPrimitive.Root
+
+function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
+}
+
+function ComboboxTrigger({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Trigger.Props) {
+  return (
+    <ComboboxPrimitive.Trigger
+      data-slot="combobox-trigger"
+      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon
+        data-slot="combobox-trigger-icon"
+        className="pointer-events-none size-4 text-muted-foreground"
+      />
+    </ComboboxPrimitive.Trigger>
+  )
+}
+
+function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
+  return (
+    <ComboboxPrimitive.Clear
+      data-slot="combobox-clear"
+      render={<InputGroupButton variant="ghost" size="icon-xs" />}
+      className={cn(className)}
+      {...props}
+    >
+      <XIcon className="pointer-events-none" />
+    </ComboboxPrimitive.Clear>
+  )
+}
+
+function ComboboxInput({
+  className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
+}: ComboboxPrimitive.Input.Props & {
+  showTrigger?: boolean
+  showClear?: boolean
+}) {
+  return (
+    <InputGroup className={cn("w-auto", className)}>
+      <ComboboxPrimitive.Input
+        render={<InputGroupInput disabled={disabled} />}
+        {...props}
+      />
+      <InputGroupAddon align="inline-end">
+        {showTrigger && (
+          <InputGroupButton
+            size="icon-xs"
+            variant="ghost"
+            asChild
+            data-slot="input-group-button"
+            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+            disabled={disabled}
+          >
+            <ComboboxTrigger />
+          </InputGroupButton>
+        )}
+        {showClear && <ComboboxClear disabled={disabled} />}
+      </InputGroupAddon>
+      {children}
+    </InputGroup>
+  )
+}
+
+function ComboboxContent({
+  className,
+  side = "bottom",
+  sideOffset = 6,
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  container,
+  ...props
+}: ComboboxPrimitive.Popup.Props &
+  Pick<
+    ComboboxPrimitive.Positioner.Props,
+    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
+  > & {
+    container?: ComboboxPrimitive.Portal.Props["container"]
+  }) {
+  return (
+    <ComboboxPrimitive.Portal container={container}>
+      <ComboboxPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="isolate z-50"
+      >
+        <ComboboxPrimitive.Popup
+          data-slot="combobox-content"
+          data-chips={!!anchor}
+          className={cn(
+            "group/combobox-content relative max-h-96 w-[var(--anchor-width)] max-w-[var(--available-width)] min-w-[calc(var(--anchor-width)+1.75rem)] origin-[var(--transform-origin)] overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-[var(--anchor-width)] 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 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        />
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  )
+}
+
+function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
+  return (
+    <ComboboxPrimitive.List
+      data-slot="combobox-list"
+      className={cn(
+        "max-h-[min(21.75rem,calc(var(--available-height)-2.25rem))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxItem({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Item.Props) {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot="combobox-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ComboboxPrimitive.ItemIndicator
+        data-slot="combobox-item-indicator"
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none size-4 pointer-coarse:size-5" />
+      </ComboboxPrimitive.ItemIndicator>
+    </ComboboxPrimitive.Item>
+  )
+}
+
+function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
+  return (
+    <ComboboxPrimitive.Group
+      data-slot="combobox-group"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxLabel({
+  className,
+  ...props
+}: ComboboxPrimitive.GroupLabel.Props) {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      data-slot="combobox-label"
+      className={cn(
+        "px-2 py-1.5 text-xs text-muted-foreground pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
+  return (
+    <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
+  )
+}
+
+function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot="combobox-empty"
+      className={cn(
+        "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxSeparator({
+  className,
+  ...props
+}: ComboboxPrimitive.Separator.Props) {
+  return (
+    <ComboboxPrimitive.Separator
+      data-slot="combobox-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChips({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
+  ComboboxPrimitive.Chips.Props) {
+  return (
+    <ComboboxPrimitive.Chips
+      data-slot="combobox-chips"
+      className={cn(
+        "flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-[3px] has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChip({
+  className,
+  children,
+  showRemove = true,
+  ...props
+}: ComboboxPrimitive.Chip.Props & {
+  showRemove?: boolean
+}) {
+  return (
+    <ComboboxPrimitive.Chip
+      data-slot="combobox-chip"
+      className={cn(
+        "flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showRemove && (
+        <ComboboxPrimitive.ChipRemove
+          render={<Button variant="ghost" size="icon-xs" />}
+          className="-ml-1 opacity-50 hover:opacity-100"
+          data-slot="combobox-chip-remove"
+        >
+          <XIcon className="pointer-events-none" />
+        </ComboboxPrimitive.ChipRemove>
+      )}
+    </ComboboxPrimitive.Chip>
+  )
+}
+
+function ComboboxChipsInput({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Input.Props) {
+  return (
+    <ComboboxPrimitive.Input
+      data-slot="combobox-chip-input"
+      className={cn("min-w-16 flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+function useComboboxAnchor() {
+  return React.useRef<HTMLDivElement | null>(null)
+}
+
+export {
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxCollection,
+  ComboboxEmpty,
+  ComboboxSeparator,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+}

src/components/ui/dialog.tsx

@@ -1,26 +1,34 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import { XIcon } from 'lucide-react';
-import { Dialog as DialogPrimitive } from 'radix-ui';
+import * as React from "react"
+import { XIcon } from "lucide-react"
+import { Dialog as DialogPrimitive } from "radix-ui"
 
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
 
-function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
 }
 
-function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
 }
 
-function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
 }
 
-function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
 }
 
 function DialogOverlay({
@@ -31,21 +39,22 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        'fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
-        className,
+        "fixed inset-0 z-50 bg-black/50 backdrop-blur-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function DialogContent({
   className,
   children,
   showCloseButton = true,
+  onInteractOutside,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean;
+  showCloseButton?: boolean
 }) {
   return (
     <DialogPortal data-slot="dialog-portal">
@@ -53,9 +62,13 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          '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 border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg',
-          className,
+          "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 border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          className
         )}
+        onInteractOutside={(event) => {
+          event.preventDefault()
+          onInteractOutside?.(event)
+        }}
         {...props}
       >
         {children}
@@ -70,17 +83,17 @@ function DialogContent({
         )}
       </DialogPrimitive.Content>
     </DialogPortal>
-  );
+  )
 }
 
-function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="dialog-header"
-      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
       {...props}
     />
-  );
+  )
 }
 
 function DialogFooter({
@@ -88,13 +101,16 @@ function DialogFooter({
   showCloseButton = false,
   children,
   ...props
-}: React.ComponentProps<'div'> & {
-  showCloseButton?: boolean;
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
 }) {
   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}
     >
       {children}
@@ -104,17 +120,20 @@ function DialogFooter({
         </DialogPrimitive.Close>
       )}
     </div>
-  );
+  )
 }
 
-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"
-      className={cn('text-lg leading-none font-semibold', className)}
+      className={cn("text-lg leading-none font-semibold", className)}
       {...props}
     />
-  );
+  )
 }
 
 function DialogDescription({
@@ -124,10 +143,10 @@ function DialogDescription({
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn('text-sm text-muted-foreground', className)}
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -141,4 +160,4 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-};
+}

src/components/ui/dropdown-menu.tsx

@@ -1,25 +1,34 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+import * as React from "react"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
-function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
 }
 
 function DropdownMenuPortal({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
 }
 
 function DropdownMenuTrigger({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
 }
 
 function DropdownMenuContent({
@@ -33,27 +42,31 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          'bg-popover text-popover-foreground 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 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
-          className,
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          className
         )}
         {...props}
       />
     </DropdownMenuPrimitive.Portal>
-  );
+  )
 }
 
-function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
 }
 
 function DropdownMenuItem({
   className,
   inset,
-  variant = 'default',
+  variant = "default",
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean;
-  variant?: 'default' | 'destructive';
+  inset?: boolean
+  variant?: "default" | "destructive"
 }) {
   return (
     <DropdownMenuPrimitive.Item
@@ -61,12 +74,12 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function DropdownMenuCheckboxItem({
@@ -79,8 +92,8 @@ function DropdownMenuCheckboxItem({
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
       )}
       checked={checked}
       {...props}
@@ -92,13 +105,18 @@ function DropdownMenuCheckboxItem({
       </span>
       {children}
     </DropdownMenuPrimitive.CheckboxItem>
-  );
+  )
 }
 
 function DropdownMenuRadioGroup({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-  return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
 }
 
 function DropdownMenuRadioItem({
@@ -110,8 +128,8 @@ function DropdownMenuRadioItem({
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
       )}
       {...props}
     >
@@ -122,7 +140,7 @@ function DropdownMenuRadioItem({
       </span>
       {children}
     </DropdownMenuPrimitive.RadioItem>
-  );
+  )
 }
 
 function DropdownMenuLabel({
@@ -130,16 +148,19 @@ function DropdownMenuLabel({
   inset,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean;
+  inset?: boolean
 }) {
   return (
     <DropdownMenuPrimitive.Label
       data-slot="dropdown-menu-label"
       data-inset={inset}
-      className={cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
       {...props}
     />
-  );
+  )
 }
 
 function DropdownMenuSeparator({
@@ -149,24 +170,32 @@ function DropdownMenuSeparator({
   return (
     <DropdownMenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
-  );
+  )
 }
 
-function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="dropdown-menu-shortcut"
-      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
       {...props}
     />
-  );
+  )
 }
 
-function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
 }
 
 function DropdownMenuSubTrigger({
@@ -175,22 +204,22 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean;
+  inset?: boolean
 }) {
   return (
     <DropdownMenuPrimitive.SubTrigger
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
       )}
       {...props}
     >
       {children}
       <ChevronRightIcon className="ml-auto size-4" />
     </DropdownMenuPrimitive.SubTrigger>
-  );
+  )
 }
 
 function DropdownMenuSubContent({
@@ -201,12 +230,12 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        'bg-popover text-popover-foreground 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 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
-        className,
+        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -225,4 +254,4 @@ export {
   DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
-};
+}

src/components/ui/input-group.tsx

@@ -0,0 +1,170 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30",
+        "h-9 min-w-0 has-[>textarea]:h-auto",
+
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
+
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end":
+          "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start":
+          "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
+        "block-end":
+          "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}

src/components/ui/input.tsx

@@ -1,21 +1,21 @@
-import * as React from 'react';
+import * as React from "react"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
-function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
     <input
       type={type}
       data-slot="input"
       className={cn(
-        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-        className,
+        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-export { Input };
+export { Input }

src/components/ui/select.tsx

@@ -56,7 +56,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          'relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+          'relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
           position === 'popper' &&
             'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           className,
@@ -70,7 +70,7 @@ function SelectContent({
           className={cn(
             'p-1',
             position === 'popper' &&
-              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
+              'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1',
           )}
         >
           {children}
@@ -100,7 +100,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className,
       )}
       {...props}

src/components/ui/sheet.tsx

@@ -1,25 +1,31 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import * as SheetPrimitive from '@radix-ui/react-dialog';
-import { XIcon } from 'lucide-react';
+import * as React from "react"
+import { XIcon } from "lucide-react"
+import { Dialog as SheetPrimitive } from "radix-ui"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
 }
 
-function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
 }
 
-function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
 }
 
-function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
 }
 
 function SheetOverlay({
@@ -30,21 +36,23 @@ function SheetOverlay({
     <SheetPrimitive.Overlay
       data-slot="sheet-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,
+        "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function SheetContent({
   className,
   children,
-  side = 'right',
+  side = "right",
+  showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  side?: 'top' | 'right' | 'bottom' | 'left';
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
 }) {
   return (
     <SheetPortal>
@@ -52,57 +60,62 @@ function SheetContent({
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-          side === 'right' &&
-            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
-          side === 'left' &&
-            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
-          side === 'top' &&
-            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
-          side === 'bottom' &&
-            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
-          className,
+          "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
+          side === "right" &&
+            "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+          side === "left" &&
+            "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+          side === "top" &&
+            "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+          side === "bottom" &&
+            "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+          className
         )}
         {...props}
       >
         {children}
-        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
-          <XIcon className="size-4" />
-          <span className="sr-only">Close</span>
-        </SheetPrimitive.Close>
+        {showCloseButton && (
+          <SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary">
+            <XIcon className="size-4" />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
       </SheetPrimitive.Content>
     </SheetPortal>
-  );
+  )
 }
 
-function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sheet-header"
-      className={cn('flex flex-col gap-1.5 p-4', className)}
+      className={cn("flex flex-col gap-1.5 p-4", className)}
       {...props}
     />
-  );
+  )
 }
 
-function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sheet-footer"
-      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
       {...props}
     />
-  );
+  )
 }
 
-function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
   return (
     <SheetPrimitive.Title
       data-slot="sheet-title"
-      className={cn('text-foreground font-semibold', className)}
+      className={cn("font-semibold text-foreground", className)}
       {...props}
     />
-  );
+  )
 }
 
 function SheetDescription({
@@ -112,10 +125,10 @@ function SheetDescription({
   return (
     <SheetPrimitive.Description
       data-slot="sheet-description"
-      className={cn('text-muted-foreground text-sm', className)}
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -127,4 +140,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-};
+}

src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

src/components/ui/tree.tsx

@@ -38,7 +38,7 @@ function TreeCheckbox({
       type="checkbox"
       checked={checked}
       onChange={(event) => onChange(event.target.checked)}
-      className="size-4 rounded border-border accent-primary"
+      className="size-4 shrink-0 rounded border-border accent-primary"
     />
   );
 }
@@ -48,11 +48,13 @@ function CheckboxTreeNode<TItem extends TreeItem>({
   selectedIds,
   onToggle,
   renderMeta,
+  showDescription = true,
 }: {
   item: TItem;
   selectedIds: Set<number>;
   onToggle: (item: TItem, checked: boolean) => void;
   renderMeta?: (item: TItem) => ReactNode;
+  showDescription?: boolean;
 }) {
   const [isExpanded, setIsExpanded] = useState(true);
   const itemIds = collectTreeItemIds(item);
@@ -63,35 +65,35 @@ function CheckboxTreeNode<TItem extends TreeItem>({
 
   return (
     <li className="space-y-2">
-      <div className="flex items-start gap-2 rounded-md border border-border/60 bg-background px-3 py-2">
-        {hasChildren ? (
-          <button
-            type="button"
-            onClick={() => setIsExpanded((current) => !current)}
-            aria-label={isExpanded ? `Collapse ${item.label}` : `Expand ${item.label}`}
-            className="mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground transition hover:bg-muted hover:text-foreground"
-          >
-            <ChevronDown
-              className={`size-4 transition-transform ${isExpanded ? '' : '-rotate-90'}`}
-            />
-          </button>
-        ) : (
-          <span className="size-5 shrink-0" aria-hidden="true" />
-        )}
-        <TreeCheckbox
-          checked={checked}
-          indeterminate={indeterminate}
-          onChange={(isChecked) => onToggle(item, isChecked)}
-        />
-        <div className="min-w-0 flex-1 leading-none">
-          <div className="flex min-h-5 flex-wrap items-center gap-2">
-            <span className="text-sm font-medium leading-5">{item.label}</span>
+      <div className="rounded-md border border-border/60 bg-background px-3 py-2">
+        <div className="flex items-center gap-2">
+          {hasChildren ? (
+            <button
+              type="button"
+              onClick={() => setIsExpanded((current) => !current)}
+              aria-label={isExpanded ? `Collapse ${item.label}` : `Expand ${item.label}`}
+              className="inline-flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground transition hover:bg-muted hover:text-foreground"
+            >
+              <ChevronDown
+                className={`size-4 transition-transform ${isExpanded ? '' : '-rotate-90'}`}
+              />
+            </button>
+          ) : (
+            <span className="size-5 shrink-0" aria-hidden="true" />
+          )}
+          <TreeCheckbox
+            checked={checked}
+            indeterminate={indeterminate}
+            onChange={(isChecked) => onToggle(item, isChecked)}
+          />
+          <div className="flex min-w-0 flex-1 items-center gap-2">
+            <span className="truncate text-sm font-medium leading-none">{item.label}</span>
             {renderMeta?.(item)}
           </div>
-          {item.description ? (
-            <p className="mt-1 text-xs text-muted-foreground">{item.description}</p>
-          ) : null}
         </div>
+        {showDescription && item.description ? (
+          <p className="mt-1.5 pl-11 text-xs text-muted-foreground">{item.description}</p>
+        ) : null}
       </div>
       {hasChildren && isExpanded ? (
         <ul className="ml-5 space-y-2 border-l border-border/70 pl-3">
@@ -102,6 +104,7 @@ function CheckboxTreeNode<TItem extends TreeItem>({
               selectedIds={selectedIds}
               onToggle={onToggle}
               renderMeta={renderMeta}
+              showDescription={showDescription}
             />
           ))}
         </ul>
@@ -116,12 +119,14 @@ export function CheckboxTree<TItem extends TreeItem>({
   onSelectedIdsChange,
   renderMeta,
   emptyMessage = 'No items available.',
+  showDescription = true,
 }: {
   items: TItem[];
   selectedIds: number[];
   onSelectedIdsChange: (ids: number[]) => void;
   renderMeta?: (item: TItem) => ReactNode;
   emptyMessage?: string;
+  showDescription?: boolean;
 }) {
   const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
 
@@ -154,6 +159,7 @@ export function CheckboxTree<TItem extends TreeItem>({
           selectedIds={selectedSet}
           onToggle={handleToggle}
           renderMeta={renderMeta}
+          showDescription={showDescription}
         />
       ))}
     </ul>