eai-frontend-components 2.0.4 → 2.0.6

package/src/components/ui/custom/table/data-table.tsx

@@ -1,285 +0,0 @@
-import {
-	ColumnDef,
-	PaginationState,
-	SortingState,
-	getCoreRowModel,
-	getFilteredRowModel,
-	getPaginationRowModel,
-	getSortedRowModel,
-	useReactTable,
-} from '@tanstack/react-table';
-import { Filter, Search } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
-import { cn } from '../../../../lib/utils';
-import { Button } from '../../button';
-import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '../../sheet';
-import { Table, TableBody } from '../../table';
-import { DataTableFooter } from './data-table-footer';
-import { DataTableHeader } from './data-table-header';
-import { DataTableRows } from './data-table-rows';
-import { ActionRow, ActionTable, ExportDataTable, FiltersActions } from './types/data-table';
-
-export interface DataTableProps<TData> {
-	columns: ColumnDef<TData>[];
-	data: TData[];
-	actions?: ActionTable[];
-	actionsRow?: ActionRow[];
-	customFilters?: JSX.Element;
-	className?: string;
-	title?: string;
-	rowsPage?: number;
-	setSearch?: (value?: string) => void;
-	setSelectRows?: (ids: string[]) => void;
-	pageChanged?: (pageNumber: number) => void;
-	pageSizeChanged?: (pageSize: number) => void;
-	totalRows?: number;
-	filtersActions?: FiltersActions;
-	exportData?: ExportDataTable;
-	textNoRecords?: string;
-	heightRemainingScroll?: number;
-	hideFilterField?: boolean;
-	multiRowSelection?: {
-		callback: (selectedRows: any[]) => void;
-	};
-	hidePagination?: boolean;
-	disablePagination?: boolean;
-	isLoading?: boolean;
-	fixedHeight?: number;
-}
-
-export interface OriginalDataTableData {
-	id: string;
-	checked?: boolean;
-}
-
-export function DataTable<TData>({
-	columns,
-	data,
-	className,
-	title,
-	rowsPage,
-	actions,
-	actionsRow,
-	customFilters,
-	setSearch,
-	pageChanged,
-	pageSizeChanged,
-	totalRows,
-	filtersActions,
-	exportData,
-	textNoRecords,
-	heightRemainingScroll,
-	hideFilterField,
-	multiRowSelection,
-	hidePagination,
-	disablePagination,
-	isLoading,
-	fixedHeight,
-}: DataTableProps<TData>) {
-	const [sorting, setSorting] = useState<SortingState>([]);
-	const [pagination, setPagination] = useState<PaginationState>({
-		pageIndex: 0,
-		pageSize: rowsPage ?? 25,
-	});
-	const enableMultiRowSelection = multiRowSelection !== undefined;
-	const [rowSelection, setRowSelection] = useState(
-		enableMultiRowSelection
-			? Object.fromEntries(
-					(Array.isArray(data) ? data : []).map((row: any, idx: number) => {
-						return [idx, row.checked];
-					}),
-			  )
-			: {},
-	);
-	const debounceTimeout = useRef<NodeJS.Timeout | null>(null);
-	const tableContainerRef = useRef<HTMLDivElement>(null);
-	const [tableHeight, setTableHeight] = useState('auto');
-	totalRows = totalRows ?? data.length;
-
-	const table = useReactTable({
-		manualPagination: true,
-		data: data,
-		columns,
-		getPaginationRowModel: getPaginationRowModel(),
-		onPaginationChange: setPagination,
-		getCoreRowModel: getCoreRowModel(),
-		onSortingChange: setSorting,
-		getSortedRowModel: getSortedRowModel(),
-		getFilteredRowModel: getFilteredRowModel(),
-		onRowSelectionChange: (rowSelection) => {
-			setRowSelection(rowSelection);
-		},
-		enableMultiRowSelection: enableMultiRowSelection,
-		state: { pagination, rowSelection, sorting },
-		pageCount: Math.ceil(totalRows / pagination.pageSize),
-	});
-
-	const totalPages = table.getPageCount();
-	const currentPage = table.getState().pagination.pageIndex;
-	const selectedRows = table.getSelectedRowModel().rows;
-	const selectedIds = selectedRows.map((row) => (row.original as OriginalDataTableData).id);
-
-	useEffect(() => {
-		if (data.length === 0 && pagination.pageIndex > 0) {
-			setPagination({ ...pagination, pageIndex: 0 });
-		}
-	}, [data]);
-
-	useEffect(() => {
-		handleResize();
-
-		window.addEventListener('resize', handleResize);
-		return () => {
-			window.removeEventListener('resize', handleResize);
-		};
-	}, []);
-
-	useEffect(() => {
-		if (pageChanged) pageChanged(pagination.pageIndex + 1);
-	}, [pagination]);
-
-	useEffect(() => {
-		const selectedRowsChecked = selectedRows.map((row) => row.original);
-		if (multiRowSelection && selectedRowsChecked.length > 0) {
-			multiRowSelection.callback(selectedRowsChecked);
-		}
-	}, [rowSelection]);
-
-	const handleResize = () => {
-		if (tableContainerRef.current) {
-			const newHeight = window.innerHeight - tableContainerRef.current.getBoundingClientRect().top - (hidePagination ? 30 : 74);
-
-			setTableHeight(`${newHeight - (heightRemainingScroll ?? 0)}px`);
-		}
-	};
-
-	const handleSearchChange = (event: React.KeyboardEvent<HTMLInputElement>) => {
-		const value = event.currentTarget.value;
-
-		if (debounceTimeout.current) {
-			clearTimeout(debounceTimeout.current);
-		}
-
-		debounceTimeout.current = setTimeout(() => {
-			setSearch?.(value);
-			handlePage(0);
-		}, 300);
-	};
-
-	const handlePageSize = (value: number) => {
-		pageSizeChanged?.(value);
-		setPagination({ pageIndex: 0, pageSize: value });
-	};
-
-	const handlePage = (index: number) => {
-		if (index !== currentPage) {
-			setPagination({ ...pagination, pageIndex: index });
-		}
-	};
-
-	return (
-		<div className='flex flex-col flex-1'>
-			{(!hideFilterField || filtersActions || customFilters || actions) && (
-				<div className='flex items-end justify-between mb-4 space-x-6'>
-					<div className='flex items-center gap-x-4'>
-						{!hideFilterField && (
-							<div className='flex bg-background items-center border border-slate-300 rounded-sm w-[350px] overflow-hidden focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 group'>
-								<div className='pl-3.5 transform transition-transform duration-300 group-hover:-translate-x-1'>
-									<Search size={18} className='w-5 h-5 stroke-zinc-500 dark:stroke-default' />
-								</div>
-
-								<input
-									placeholder='Buscar'
-									onKeyUp={(event) => {
-										handleSearchChange(event);
-									}}
-									className='w-full bg-background text-default border-none focus:ring-0 focus:outline-none px-3 py-2 transform transition-transform duration-300 group-hover:-translate-x-1 '
-								/>
-							</div>
-						)}
-						{filtersActions && (
-							<Sheet open={filtersActions.filterOpen} onOpenChange={filtersActions.setFilterOpen}>
-								<SheetTrigger asChild>
-									<Button variant='secondary' type='button'>
-										<Filter size={20} className='h-4 w-4' /> Filtros
-										{filtersActions.countFilters > 0 && (
-											<div className='bg-background-primary text-white rounded-full h-5 w-5 flex items-center justify-center text-sm placeholder:text-muted-foreground'>
-												{filtersActions.countFilters}
-											</div>
-										)}
-									</Button>
-								</SheetTrigger>
-								<SheetContent>
-									<SheetHeader>
-										<SheetTitle>Filtros</SheetTitle>
-										<SheetDescription />
-									</SheetHeader>
-									<div className='flex flex-col py-6'>{filtersActions.fields}</div>
-								</SheetContent>
-							</Sheet>
-						)}
-					</div>
-					{customFilters}
-					<div className='flex space-x-4 content-end'>
-						{actions?.map((action, index) => (
-							<div key={`action-table-${index}`}>
-								<Button
-									onClick={() => action.onClick?.(selectedIds, selectedRows)}
-									className={cn(action.className, action.hideUnselectedRows && selectedRows.length === 0 ? 'hidden' : '')}
-									variant={(action.variant as 'link' | 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost') || 'default'}
-									disabled={action.disabled}
-								>
-									<div className='[&_svg]:size-5'>{action.icon}</div>
-									{action.label}
-								</Button>
-							</div>
-						))}
-					</div>
-				</div>
-			)}
-
-			<div className={`flex-1 flex flex-col rounded-md border ${className}`}>
-				<div className='flex items-center justify-between'>{title && <div className='text-h4 p-4'>{title}</div>}</div>
-				<div
-					id='data-table'
-					ref={tableContainerRef}
-					style={fixedHeight ? { height: fixedHeight } : { height: tableHeight }}
-					className='flex flex-col justify-between rounded-md overflow-x-auto overflow-y-auto'
-				>
-					<Table>
-						<DataTableHeader
-							table={table}
-							canActionsRow={actionsRow && actionsRow.length > 0}
-							enableMultiRowSelection={enableMultiRowSelection}
-						/>
-						<TableBody className='bg-background'>
-							<DataTableRows
-								table={table}
-								columns={columns}
-								isLoading={isLoading}
-								actionsRow={actionsRow}
-								textNoRecords={textNoRecords}
-								enableMultiRowSelection={enableMultiRowSelection}
-							/>
-						</TableBody>
-					</Table>
-				</div>
-			</div>
-
-			<DataTableFooter
-				hidePagination={hidePagination}
-				disablePagination={disablePagination}
-				isLoading={isLoading}
-				totalRows={totalRows}
-				totalPages={totalPages}
-				currentPage={currentPage}
-				pagination={pagination}
-				handlePageSize={handlePageSize}
-				handlePage={handlePage}
-				previousPage={{ action: () => table.previousPage(), disabled: !table.getCanPreviousPage() }}
-				nextPage={{ action: () => table.nextPage(), disabled: !table.getCanNextPage() }}
-				exportData={exportData}
-			/>
-		</div>
-	);
-}

package/src/components/ui/custom/table/types/data-table.ts

@@ -1,31 +0,0 @@
-export type ActionTable = {
-	label: string;
-	icon?: JSX.Element;
-	variant?: string;
-	onClick?: (ids: any[], rows: any[]) => void;
-	className?: string;
-	hideUnselectedRows?: boolean;
-	disabled?: boolean;
-};
-
-export type ActionRow = {
-	label: string;
-	icon?: JSX.Element;
-	variant?: string;
-	onClick?: (row: any) => void;
-	className?: (row: any) => string;
-	disabled?: (row: any) => boolean;
-};
-
-export interface ExportDataTable {
-	type: 'xlsx' | 'dialog';
-	url: string;
-	params?: Record<string, string>;
-}
-
-export interface FiltersActions {
-	fields: JSX.Element;
-	countFilters: number;
-	filterOpen: boolean;
-	setFilterOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}

package/src/components/ui/custom/theme-provider.tsx

@@ -1,121 +0,0 @@
-import { createContext, useContext, useEffect, useState } from 'react';
-import { replaceThemeTailwindColors } from '../../../lib/help/theme';
-
-type Theme = 'light' | 'dark' | 'dark-side';
-
-type PortalDefinitions = {
-	faviconPath: string;
-	fullLogoPath: string;
-	bannerDesktopPath: string;
-	mvnoPrimaryColor: string;
-	mvnoMainTheme: Theme;
-	title: string;
-	hideModuleSwitcher: boolean;
-};
-
-type ThemeProviderProps = {
-	children: React.ReactNode;
-	defaultTheme?: PortalDefinitions;
-	storageKey?: string;
-};
-
-type ThemeProviderState = {
-	portalDefinitions: PortalDefinitions;
-	setPortalDefinitions: (portalDefinitions: PortalDefinitions) => void;
-};
-
-export const DEFAULT_THEME_DATA: PortalDefinitions = {
-	faviconPath: '/logos/logosEai/Eai_roxo_48x48px.png',
-	fullLogoPath: '/logos/logosEai/Eai_Roxo_60x42px.png',
-	bannerDesktopPath: '/imgs/background-auth.png',
-	mvnoPrimaryColor: 'violet',
-	mvnoMainTheme: 'light',
-	title: 'Eaí',
-	hideModuleSwitcher: false,
-};
-
-const initialState: ThemeProviderState = {
-	portalDefinitions: DEFAULT_THEME_DATA,
-	setPortalDefinitions: () => null,
-};
-
-const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
-
-export function ThemeProvider({ children, defaultTheme = DEFAULT_THEME_DATA, storageKey = 'vite-ui-theme', ...props }: ThemeProviderProps) {
-	const [portalDefinitions, setPortalDefinitionsState] = useState<PortalDefinitions>({
-		faviconPath: localStorage.getItem(`${storageKey}-faviconPath`) || defaultTheme.faviconPath,
-		fullLogoPath: localStorage.getItem(`${storageKey}-fullLogoPath`) || defaultTheme.fullLogoPath,
-		bannerDesktopPath: localStorage.getItem(`${storageKey}-bannerDesktopPath`) || defaultTheme.bannerDesktopPath,
-		mvnoPrimaryColor: localStorage.getItem(`${storageKey}-mvnoPrimaryColor`) || defaultTheme.mvnoPrimaryColor,
-		mvnoMainTheme: (localStorage.getItem(storageKey) as Theme) || defaultTheme.mvnoMainTheme,
-		title: localStorage.getItem(`${storageKey}-title`) || defaultTheme.title,
-		hideModuleSwitcher: localStorage.getItem(`${storageKey}-hideModuleSwitcher`) === 'true',
-	});
-
-	useEffect(() => {
-		const theme = portalDefinitions?.mvnoMainTheme;
-
-		const root = window.document.documentElement;
-		root.classList.remove('light', 'dark', 'dark-side');
-		root.classList.add(theme);
-
-		document.title = portalDefinitions?.title;
-		const meta = document.querySelector('meta[name="description"]');
-		if (meta) {
-			meta.setAttribute('content', portalDefinitions?.title);
-		}
-
-		let link = document.querySelector<HTMLLinkElement>("link[rel~='icon']");
-		if (!link) {
-			link = document.createElement('link');
-			link.rel = 'icon';
-			document.getElementsByTagName('head')[0].appendChild(link);
-		}
-		link.href = portalDefinitions?.faviconPath;
-
-		const el = replaceThemeTailwindColors(theme, portalDefinitions?.mvnoPrimaryColor);
-
-		document.getElementById('theme-variables') &&
-			document.getElementsByTagName('head')[0].removeChild(document.getElementById('theme-variables')!);
-		document.getElementsByTagName('head')[0].appendChild(el);
-	}, [portalDefinitions]);
-
-	const setPortalDefinitions = (portalDefinitions: PortalDefinitions) => {
-		localStorage.setItem(`${storageKey}-faviconPath`, portalDefinitions.faviconPath);
-		localStorage.setItem(`${storageKey}-fullLogoPath`, portalDefinitions.fullLogoPath);
-		localStorage.setItem(`${storageKey}-bannerDesktopPath`, portalDefinitions.bannerDesktopPath);
-		localStorage.setItem(`${storageKey}-mvnoPrimaryColor`, portalDefinitions.mvnoPrimaryColor);
-		localStorage.setItem(`${storageKey}-mvnoMainTheme`, portalDefinitions.mvnoMainTheme);
-		localStorage.setItem(`${storageKey}-title`, portalDefinitions.title);
-		localStorage.setItem(`${storageKey}-hideModuleSwitcher`, String(portalDefinitions.hideModuleSwitcher));
-
-		setPortalDefinitionsState({
-			faviconPath: portalDefinitions.faviconPath || DEFAULT_THEME_DATA.faviconPath,
-			fullLogoPath: portalDefinitions.fullLogoPath || DEFAULT_THEME_DATA.fullLogoPath,
-			bannerDesktopPath: portalDefinitions.bannerDesktopPath || DEFAULT_THEME_DATA.bannerDesktopPath,
-			mvnoPrimaryColor: portalDefinitions.mvnoPrimaryColor || DEFAULT_THEME_DATA.mvnoPrimaryColor,
-			mvnoMainTheme: portalDefinitions.mvnoMainTheme ? (portalDefinitions.mvnoMainTheme as Theme) : DEFAULT_THEME_DATA.mvnoMainTheme,
-			title: portalDefinitions.title || DEFAULT_THEME_DATA.title,
-			hideModuleSwitcher: portalDefinitions.hideModuleSwitcher || DEFAULT_THEME_DATA.hideModuleSwitcher,
-		});
-	};
-
-	const value: ThemeProviderState = {
-		portalDefinitions,
-		setPortalDefinitions: setPortalDefinitions,
-	};
-
-	return (
-		<ThemeProviderContext.Provider {...props} value={value}>
-			{children}
-		</ThemeProviderContext.Provider>
-	);
-}
-
-export const useTheme = () => {
-	const context = useContext(ThemeProviderContext);
-
-	if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider');
-
-	return context;
-};

package/src/components/ui/dateRangePicker.tsx

@@ -1,63 +0,0 @@
-import { addDays, format } from "date-fns"
-import { CalendarIcon } from "lucide-react"
-import * as React from "react"
-import { DateRange } from "react-day-picker"
-
-import { cn } from "@/lib/utils"
-import { Button } from "./button"
-import { Calendar } from "./calendar"
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-} from "./popover"
-
-export function DatePickerWithRange({
-  className,
-}: React.HTMLAttributes<HTMLDivElement>) {
-  const [date, setDate] = React.useState<DateRange | undefined>({
-    from: new Date(2022, 0, 20),
-    to: addDays(new Date(2022, 0, 20), 20),
-  })
-
-  return (
-    <div className={cn("grid gap-2", className)}>
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button
-            id="date"
-            variant={"outline"}
-            className={cn(
-              "w-[300px] justify-start text-left font-normal",
-              !date && "text-muted-foreground"
-            )}
-          >
-            <CalendarIcon />
-            {date?.from ? (
-              date.to ? (
-                <>
-                  {format(date.from, "LLL dd, y")} -{" "}
-                  {format(date.to, "LLL dd, y")}
-                </>
-              ) : (
-                format(date.from, "LLL dd, y")
-              )
-            ) : (
-              <span>Pick a date</span>
-            )}
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-auto p-0" align="start">
-          <Calendar
-            initialFocus
-            mode="range"
-            defaultMonth={date?.from}
-            selected={date}
-            onSelect={setDate}
-            numberOfMonths={2}
-          />
-        </PopoverContent>
-      </Popover>
-    </div>
-  )
-}

package/src/components/ui/dialog.tsx

@@ -1,84 +0,0 @@
-'use client';
-
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X } from 'lucide-react';
-import * as React from 'react';
-import { cn } from '../../lib/utils';
-
-const Dialog = DialogPrimitive.Root;
-
-const DialogTrigger = DialogPrimitive.Trigger;
-
-const DialogPortal = DialogPrimitive.Portal;
-
-const DialogClose = DialogPrimitive.Close;
-
-const DialogOverlay = React.forwardRef<
-	React.ElementRef<typeof DialogPrimitive.Overlay>,
-	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-	<DialogPrimitive.Overlay
-		ref={ref}
-		className={cn(
-			'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-			className,
-		)}
-		{...props}
-	/>
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
-	hideClose?: boolean;
-}
-
-const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, DialogContentProps>(
-	({ className, children, hideClose, ...props }, ref) => (
-		<DialogPortal>
-			<DialogOverlay />
-			<DialogPrimitive.Content
-				ref={ref}
-				className={cn(
-					'fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-					className,
-				)}
-				{...props}
-			>
-				{children}
-				{!hideClose && (
-					<DialogPrimitive.Close className='absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground'>
-						<X className='h-4 w-4' />
-						<span className='sr-only'>Close</span>
-					</DialogPrimitive.Close>
-				)}
-			</DialogPrimitive.Content>
-		</DialogPortal>
-	),
-);
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-	<div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
-);
-DialogHeader.displayName = 'DialogHeader';
-
-const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-	<div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
-);
-DialogFooter.displayName = 'DialogFooter';
-
-const DialogTitle = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Title>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>>(
-	({ className, ...props }, ref) => (
-		<DialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props} />
-	),
-);
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-const DialogDescription = React.forwardRef<
-	React.ElementRef<typeof DialogPrimitive.Description>,
-	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => <DialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />);
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
-

package/src/components/ui/drawer.tsx

@@ -1,116 +0,0 @@
-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
-
-import { cn } from "@/lib/utils"
-
-const Drawer = ({
-  shouldScaleBackground = true,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-  <DrawerPrimitive.Root
-    shouldScaleBackground={shouldScaleBackground}
-    {...props}
-  />
-)
-Drawer.displayName = "Drawer"
-
-const DrawerTrigger = DrawerPrimitive.Trigger
-
-const DrawerPortal = DrawerPrimitive.Portal
-
-const DrawerClose = DrawerPrimitive.Close
-
-const DrawerOverlay = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Overlay
-    ref={ref}
-    className={cn("fixed inset-0 z-50 bg-black/80", className)}
-    {...props}
-  />
-))
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
-
-const DrawerContent = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DrawerPortal>
-    <DrawerOverlay />
-    <DrawerPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-        className
-      )}
-      {...props}
-    >
-      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
-      {children}
-    </DrawerPrimitive.Content>
-  </DrawerPortal>
-))
-DrawerContent.displayName = "DrawerContent"
-
-const DrawerHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
-    {...props}
-  />
-)
-DrawerHeader.displayName = "DrawerHeader"
-
-const DrawerFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-    {...props}
-  />
-)
-DrawerFooter.displayName = "DrawerFooter"
-
-const DrawerTitle = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName
-
-const DrawerDescription = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName
-
-export {
-  Drawer,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerTrigger,
-  DrawerClose,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
-}