refactor: refactor superadmin modules

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",
@@ -40,7 +41,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/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

@@ -15,6 +15,7 @@ interface ClientTableProps {
   limit: number;
   total: number;
   onPageChange: (skip: number) => void;
+  onLimitChange: (limit: number) => void;
 }
 
 export function ClientTable({
@@ -26,6 +27,7 @@ export function ClientTable({
   limit,
   total,
   onPageChange,
+  onLimitChange,
 }: ClientTableProps) {
   return (
     <DataTable
@@ -40,7 +42,7 @@ export function ClientTable({
         limit,
         totalItems: total,
         onPageChange,
-        onLimitChange: () => undefined,
+        onLimitChange,
       }}
     />
   );

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

@@ -8,7 +8,7 @@ export type ClientStatusFilter = 'all' | 'active' | 'inactive';
 
 export function useClientFilters() {
   const [skip, setSkip] = useState(0);
-  const [limit] = useState(10);
+  const [limit, setLimitValue] = useState(10);
   const [searchTerm, setSearchTermValue] = useState('');
   const [statusFilter, setStatusFilterValue] = useState<ClientStatusFilter>('all');
   const debouncedSearchTerm = useDebounce(searchTerm.trim(), 400);
@@ -23,10 +23,16 @@ export function useClientFilters() {
     setSkip(0);
   }, []);
 
+  const setLimit = useCallback((value: number) => {
+    setLimitValue(value);
+    setSkip(0);
+  }, []);
+
   return {
     skip,
     setSkip,
     limit,
+    setLimit,
     searchTerm,
     debouncedSearchTerm,
     setSearchTerm,

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

@@ -25,6 +25,7 @@ export default function ClientsPage() {
     skip,
     setSkip,
     limit,
+    setLimit,
     searchTerm,
     debouncedSearchTerm,
     setSearchTerm,
@@ -112,6 +113,7 @@ export default function ClientsPage() {
           limit={limit}
           total={total}
           onPageChange={setSkip}
+          onLimitChange={setLimit}
         />
 
         <PoweredBy />

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

@@ -1,8 +1,6 @@
 'use client';
 
-import { Search } from 'lucide-react';
+import { TableSearchInput } from '@/components/data-table/TableSearchInput';
-
-import { Input } from '@/components/ui/input';
 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">
+      <TableSearchInput
-        <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)}
+        onChange={onSearchChange}
         placeholder="Search plans"
-          className="pl-9"
+        className="w-full sm:w-72"
       />
-      </div>
       <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

@@ -15,6 +15,7 @@ interface PlanTableProps {
   limit: number;
   total: number;
   onPageChange: (skip: number) => void;
+  onLimitChange: (limit: number) => void;
 }
 
 export function PlanTable({
@@ -26,6 +27,7 @@ export function PlanTable({
   limit,
   total,
   onPageChange,
+  onLimitChange,
 }: PlanTableProps) {
   return (
     <DataTable
@@ -40,7 +42,7 @@ export function PlanTable({
         limit,
         totalItems: total,
         onPageChange,
-        onLimitChange: () => undefined,
+        onLimitChange,
       }}
     />
   );

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

@@ -7,7 +7,7 @@ export type PlanStatusFilter = 'all' | 'active' | 'inactive';
 
 export function usePlanFilters() {
   const [skip, setSkip] = useState(0);
-  const [limit] = useState(10);
+  const [limit, setLimitValue] = useState(10);
   const [searchTerm, setSearchTerm] = useState('');
   const [statusFilter, setStatusFilter] = useState<PlanStatusFilter>('all');
   const debouncedSearchTerm = useDebounce(searchTerm, 400);
@@ -22,10 +22,16 @@ export function usePlanFilters() {
     setSkip(0);
   };
 
+  const setLimit = (value: number) => {
+    setLimitValue(value);
+    setSkip(0);
+  };
+
   return {
     skip,
     setSkip,
     limit,
+    setLimit,
     searchTerm,
     debouncedSearchTerm,
     setSearchTerm: updateSearchTerm,

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

@@ -27,6 +27,7 @@ export default function PlansPage() {
     skip,
     setSkip,
     limit,
+    setLimit,
     searchTerm,
     debouncedSearchTerm,
     setSearchTerm,
@@ -166,6 +167,7 @@ export default function PlansPage() {
           limit={limit}
           total={total}
           onPageChange={setSkip}
+          onLimitChange={setLimit}
         />
 
         <PoweredBy />

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,14 +48,19 @@ export function RoleSheet({
 }: RoleSheetProps) {
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="w-full overflow-y-auto sm:max-w-2xl">
+      <SheetContent
-        <SheetHeader>
+        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">
+
+        <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>
@@ -103,20 +109,18 @@ export function RoleSheet({
                 />
               )}
             </div>
+          </div>
 
-          <SheetFooter className="px-0">
+          <SheetFooter className="shrink-0 border-t px-6 py-4 sm:flex-row sm:justify-end">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => onOpenChange(false)}
-              disabled={isSaving}
-            >
-              Cancel
-            </Button>
             <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

@@ -15,6 +15,7 @@ interface RoleTableProps {
   limit: number;
   total: number;
   onPageChange: (skip: number) => void;
+  onLimitChange: (limit: number) => void;
 }
 
 export function RoleTable({
@@ -26,6 +27,7 @@ export function RoleTable({
   limit,
   total,
   onPageChange,
+  onLimitChange,
 }: RoleTableProps) {
   return (
     <DataTable
@@ -40,7 +42,7 @@ export function RoleTable({
         limit,
         totalItems: total,
         onPageChange,
-        onLimitChange: () => undefined,
+        onLimitChange,
       }}
     />
   );

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

@@ -8,7 +8,7 @@ const SEARCH_DEBOUNCE_MS = 400;
 
 export function useRoleFilters() {
   const [skip, setSkip] = useState(0);
-  const [limit] = useState(10);
+  const [limit, setLimitValue] = useState(10);
   const [searchTerm, setSearchTermValue] = useState('');
   const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('');
   const [statusFilter, setStatusFilterValue] = useState<StatusFilter>('all');
@@ -31,10 +31,16 @@ export function useRoleFilters() {
     setSkip(0);
   };
 
+  const setLimit = (value: number) => {
+    setLimitValue(value);
+    setSkip(0);
+  };
+
   return {
     skip,
     setSkip,
     limit,
+    setLimit,
     searchTerm,
     debouncedSearchTerm,
     setSearchTerm,

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

@@ -30,6 +30,7 @@ export default function RolesPage() {
     skip,
     setSkip,
     limit,
+    setLimit,
     searchTerm,
     debouncedSearchTerm,
     setSearchTerm,
@@ -108,8 +109,8 @@ export default function RolesPage() {
           icon={ShieldCheck}
           actions={
             <PermissionGuard permissions={PERMISSIONS.ROLE.CREATE}>
-              <Button onClick={openCreate}>
+              <Button onClick={openCreate} size="sm">
-                <Plus className="mr-2 size-4" />
+                <Plus />
                 Add Role
               </Button>
             </PermissionGuard>
@@ -125,6 +126,7 @@ export default function RolesPage() {
           limit={limit}
           total={total}
           onPageChange={setSkip}
+          onLimitChange={setLimit}
         />
 
         <PoweredBy />

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

@@ -15,6 +15,7 @@ interface TenantTableProps {
   limit: number;
   total: number;
   onPageChange: (skip: number) => void;
+  onLimitChange: (limit: number) => void;
 }
 
 export function TenantTable({
@@ -26,6 +27,7 @@ export function TenantTable({
   limit,
   total,
   onPageChange,
+  onLimitChange,
 }: TenantTableProps) {
   return (
     <DataTable
@@ -40,7 +42,7 @@ export function TenantTable({
         limit,
         totalItems: total,
         onPageChange,
-        onLimitChange: () => undefined,
+        onLimitChange,
       }}
     />
   );

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

@@ -8,7 +8,7 @@ export type TenantStatusFilter = 'all' | 'active' | 'inactive';
 
 export function useTenantFilters() {
   const [skip, setSkip] = useState(0);
-  const [limit] = useState(10);
+  const [limit, setLimitValue] = useState(10);
   const [searchTerm, setSearchTermValue] = useState('');
   const [statusFilter, setStatusFilterValue] = useState<TenantStatusFilter>('all');
   const debouncedSearchTerm = useDebounce(searchTerm.trim(), 400);
@@ -23,10 +23,16 @@ export function useTenantFilters() {
     setSkip(0);
   }, []);
 
+  const setLimit = useCallback((value: number) => {
+    setLimitValue(value);
+    setSkip(0);
+  }, []);
+
   return {
     skip,
     setSkip,
     limit,
+    setLimit,
     searchTerm,
     debouncedSearchTerm,
     setSearchTerm,

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

@@ -30,6 +30,7 @@ export default function TenantsPage() {
     skip,
     setSkip,
     limit,
+    setLimit,
     searchTerm,
     debouncedSearchTerm,
     setSearchTerm,
@@ -163,6 +164,7 @@ export default function TenantsPage() {
           limit={limit}
           total={total}
           onPageChange={setSkip}
+          onLimitChange={setLimit}
         />
 
         <PoweredBy />

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,20 @@
 'use client';
 
-import type { ComponentProps } from 'react';
+import { useMemo, useRef, type ComponentProps } from 'react';
 import type { UseFormRegister } from 'react-hook-form';
 import { Loader2 } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxTrigger,
+  ComboboxValue,
+} from '@/components/ui/combobox';
 import {
   Dialog,
   DialogContent,
@@ -15,16 +25,14 @@ import {
 } 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';
 
+type RoleComboboxItem = {
+  value: string;
+  label: string;
+};
+
 interface UserSheetProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -50,6 +58,21 @@ export function UserSheet({
   isRolesLoading,
   isSaving,
 }: UserSheetProps) {
+  const roleComboboxPortalRef = useRef<HTMLDivElement | null>(null);
+  const roleItems = useMemo<RoleComboboxItem[]>(
+    () =>
+      roles.map((role) => ({
+        value: String(role.id),
+        label: role.display_name || role.name,
+      })),
+    [roles],
+  );
+
+  const selectedRole = useMemo(
+    () => roleItems.find((item) => item.value === roleId) ?? null,
+    [roleItems, roleId],
+  );
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-h-[calc(100vh-2rem)] overflow-y-auto sm:max-w-xl">
@@ -101,18 +124,44 @@ export function UserSheet({
 
           <div className="space-y-2">
             <Label>Role</Label>
-            <Select value={roleId} onValueChange={onRoleChange}>
+            <Combobox
-              <SelectTrigger>
+              items={roleItems}
-                <SelectValue placeholder={isRolesLoading ? 'Loading roles...' : 'Select role'} />
+              value={selectedRole}
-              </SelectTrigger>
+              onValueChange={(item) => {
-              <SelectContent>
+                if (item?.value) {
-                {roles.map((role) => (
+                  onRoleChange(item.value);
-                  <SelectItem key={role.id} value={String(role.id)}>
+                }
-                    {role.display_name || role.name}
+              }}
-                  </SelectItem>
+              disabled={isRolesLoading}
-                ))}
+              itemToStringLabel={(item) => item.label}
-              </SelectContent>
+            >
-            </Select>
+              <ComboboxTrigger
+                render={
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="w-full justify-between font-normal"
+                    disabled={isRolesLoading}
+                  >
+                    <ComboboxValue
+                      placeholder={isRolesLoading ? 'Loading roles...' : 'Select role'}
+                    />
+                  </Button>
+                }
+              />
+              <ComboboxContent container={roleComboboxPortalRef}>
+                <ComboboxInput showTrigger={false} placeholder="Search roles..." />
+                <ComboboxEmpty>No roles found.</ComboboxEmpty>
+                <ComboboxList>
+                  {(item) => (
+                    <ComboboxItem key={item.value} value={item}>
+                      {item.label}
+                    </ComboboxItem>
+                  )}
+                </ComboboxList>
+              </ComboboxContent>
+            </Combobox>
+            <div ref={roleComboboxPortalRef} />
             <input
               type="hidden"
               {...register('role_id', { required: true })}

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

@@ -15,6 +15,7 @@ interface UserTableProps {
   limit: number;
   total: number;
   onPageChange: (skip: number) => void;
+  onLimitChange: (limit: number) => void;
 }
 
 export function UserTable({
@@ -26,6 +27,7 @@ export function UserTable({
   limit,
   total,
   onPageChange,
+  onLimitChange,
 }: UserTableProps) {
   return (
     <DataTable
@@ -40,7 +42,7 @@ export function UserTable({
         limit,
         totalItems: total,
         onPageChange,
-        onLimitChange: () => undefined,
+        onLimitChange,
       }}
     />
   );

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

@@ -8,7 +8,7 @@ export type StatusFilter = 'all' | UserStatus;
 
 export function useUserFilters() {
   const [skip, setSkip] = useState(0);
-  const [limit] = useState(10);
+  const [limit, setLimitValue] = useState(10);
   const [searchTerm, setSearchTermValue] = useState('');
   const [statusFilter, setStatusFilterValue] = useState<StatusFilter>('all');
   const debouncedSearchTerm = useDebounce(searchTerm.trim(), 400);
@@ -23,10 +23,16 @@ export function useUserFilters() {
     setSkip(0);
   }, []);
 
+  const setLimit = useCallback((value: number) => {
+    setLimitValue(value);
+    setSkip(0);
+  }, []);
+
   return {
     skip,
     setSkip,
     limit,
+    setLimit,
     searchTerm,
     debouncedSearchTerm,
     setSearchTerm,

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

@@ -18,7 +18,7 @@ interface UseUsersQueryParams {
 
 const roleLookupParams: RoleListParams = {
   skip: 0,
-  limit: 100,
+  limit: 500,
   effective_status: true,
   sort_by: 'display_name',
   sort_order: 'asc',

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

@@ -26,6 +26,7 @@ export default function UsersPage() {
     skip,
     setSkip,
     limit,
+    setLimit,
     searchTerm,
     debouncedSearchTerm,
     setSearchTerm,
@@ -106,8 +107,8 @@ export default function UsersPage() {
           icon={Users}
           actions={
             <PermissionGuard permissions={PERMISSIONS.USER.CREATE}>
-              <Button onClick={openCreate}>
+              <Button onClick={openCreate} size="sm">
-                <Plus className="mr-2 size-4" />
+                <Plus />
                 Add User
               </Button>
             </PermissionGuard>
@@ -130,6 +131,7 @@ export default function UsersPage() {
           limit={limit}
           total={total}
           onPageChange={setSkip}
+          onLimitChange={setLimit}
         />
 
         <PoweredBy />

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

@@ -1,21 +1,60 @@
 '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">
+    <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"
@@ -23,6 +62,7 @@ export function TableFooter<TData>({
           onClick={() => table.previousPage()}
           disabled={!table.getCanPreviousPage()}
         >
+          <ChevronLeft className="size-4" />
           Previous
         </Button>
         <Button
@@ -32,6 +72,7 @@ export function TableFooter<TData>({
           disabled={!table.getCanNextPage()}
         >
           Next
+          <ChevronRight className="size-4" />
         </Button>
       </div>
     </div>

src/components/data-table/TableHeader.tsx

@@ -5,14 +5,14 @@ import { Table } from '@tanstack/react-table';
 
 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) => {
             return (
               <TableHead
                 key={header.id}
-                className="h-10 px-2 text-foreground bg-card"
+                className="h-10 bg-card/80 px-2 text-foreground backdrop-blur-xl"
               >
                 {header.isPlaceholder ? null : (
                   <div className="flex items-center gap-2">

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

@@ -126,7 +126,14 @@ export function DataTable<TData, TValue>({
           pageIndex: Math.floor(pagination.skip / pagination.limit),
           pageSize: pagination.limit,
         });
+        const pageSizeChanged = newState.pageSize !== pagination.limit;
+
+        if (pageSizeChanged) {
           pagination.onLimitChange(newState.pageSize);
+          pagination.onPageChange(0);
+          return;
+        }
+
         pagination.onPageChange(newState.pageIndex * newState.pageSize);
       }
     },
@@ -144,7 +151,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 +161,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 +192,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/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) => (
+      showDescription={false}
-        <Badge variant="outline" className="text-[10px] capitalize">
-          {item.type}
-        </Badge>
-      )}
     />
   );
 }

src/components/ui/button.tsx

@@ -1,58 +1,64 @@
-import * as React from 'react';
+import * as React from "react"
-import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from "class-variance-authority"
-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',
+          "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',
+        secondary:
-        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        link: 'text-primary underline-offset-4 hover:underline',
+        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',
+        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',
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
-        icon: 'size-9',
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        'icon-sm': 'size-8',
+        icon: "size-9",
-        'icon-lg': 'size-10',
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
       },
     },
     defaultVariants: {
-      variant: 'default',
+      variant: "default",
-      size: 'default',
+      size: "default",
     },
-  },
+  }
-);
+)
 
 function Button({
   className,
-  variant,
+  variant = "default",
-  size,
+  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 * as React from "react"
-import { XIcon } from 'lucide-react';
+import { XIcon } from "lucide-react"
-import { Dialog as DialogPrimitive } from 'radix-ui';
+import { Dialog as DialogPrimitive } from "radix-ui"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
-import { Button } from '@/components/ui/button';
+import { Button } from "@/components/ui/button"
 
-function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+function Dialog({
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
 }
 
-function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+function DialogTrigger({
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
 }
 
-function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+function DialogPortal({
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
 }
 
-function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+function DialogClose({
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+  ...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',
+        "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,
+        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',
+          "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,
+          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'> & {
+}: React.ComponentProps<"div"> & {
-  showCloseButton?: boolean;
+  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 React from "react"
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-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>) {
+function DropdownMenu({
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+  ...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',
+          "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,
+          className
         )}
         {...props}
       />
     </DropdownMenuPrimitive.Portal>
-  );
+  )
 }
 
-function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+function DropdownMenuGroup({
-  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+  ...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;
+  inset?: boolean
-  variant?: 'default' | 'destructive';
+  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",
+        "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,
+        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",
+        "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,
+        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",
+        "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,
+        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>) {
+function DropdownMenuSub({
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+  ...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",
+        "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,
+        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',
+        "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,
+        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',
+        "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-ring/50 focus-visible:ring-[3px]',
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
-        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
-        className,
+        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 React from "react"
-import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { XIcon } from "lucide-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>) {
+function SheetTrigger({
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
 }
 
-function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
+function SheetClose({
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
 }
 
-function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+function SheetPortal({
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+  ...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',
+        "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,
+        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',
+          "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' &&
+          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',
+            "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' &&
+          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',
+            "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' &&
+          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',
+            "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' &&
+          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',
+            "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-          className,
+          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">
+        {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,13 +65,14 @@ 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">
+      <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="mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground transition hover:bg-muted hover:text-foreground"
+              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'}`}
@@ -83,15 +86,14 @@ function CheckboxTreeNode<TItem extends TreeItem>({
             indeterminate={indeterminate}
             onChange={(isChecked) => onToggle(item, isChecked)}
           />
-        <div className="min-w-0 flex-1 leading-none">
+          <div className="flex min-w-0 flex-1 items-center gap-2">
-          <div className="flex min-h-5 flex-wrap items-center gap-2">
+            <span className="truncate text-sm font-medium leading-none">{item.label}</span>
-            <span className="text-sm font-medium leading-5">{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>