@phsa.tec/design-system-react
Version:
A modern React component library built with TypeScript, Tailwind CSS, and Radix UI.
1 lines • 242 kB
Source Map (JSON)
{"version":3,"sources":["../src/components/dataDisplay/Table/components/DynamicTable/index.tsx","../src/components/ui/table.tsx","../src/lib/utils.ts","../src/components/dataDisplay/Table/components/DynamicTable/data-table-view-options.tsx","../src/components/ui/button.tsx","../src/components/ui/dropdown-menu.tsx","../src/components/dataDisplay/Table/components/DynamicTable/data-table-toolbar.tsx","../src/components/dataDisplay/Table/components/DynamicTable/data-table-pagination.tsx","../src/components/ui/select.tsx","../src/components/dataDisplay/Table/components/DynamicTable/data-table-column-header.tsx","../src/components/ui/badge.tsx","../src/components/dataDisplay/Icon/Icon.tsx","../src/components/ui/avatar.tsx","../src/components/dataDisplay/DataPairList/DataPairList.tsx","../src/components/dataDisplay/Text/Text.tsx","../src/components/dataInput/checkbox/Checkbox.tsx","../src/components/ui/checkbox.tsx","../src/components/ui/label.tsx","../src/components/dataInput/form/index.ts","../src/components/ui/form.tsx","../src/components/dataDisplay/ErrorMessage/ErrorMessage.tsx","../src/components/ui/input.tsx","../src/components/dataInput/Input/components/Input/index.tsx","../src/components/feedback/ErrorLabel/index.tsx","../src/components/dataInput/Input/components/InputBase/index.tsx","../src/hooks/use-conditional-controller.tsx","../src/components/dataInput/Input/components/NumberInput/number-input.tsx","../src/components/dataInput/Input/components/MaskInput/mask-input.tsx","../src/hooks/use-mask.tsx","../src/components/actions/Button/Button.tsx","../src/components/ui/spinner.tsx","../src/hooks/use-toast.ts","../src/components/ui/toast.tsx","../src/components/ui/toaster.tsx","../src/components/dataInput/Input/components/MultipleInput/MultipleInput.tsx","../src/components/ui/dialog.tsx","../src/components/actions/Dialog/Dialog.tsx","../src/components/ui/collapsible.tsx","../src/components/actions/Steps/Steps.tsx","../src/components/ui/drawer.tsx","../src/components/layout/Drawer/CustomDrawer/index.tsx","../src/components/ui/sheet.tsx","../src/components/layout/Sheet/Sheet.tsx","../src/components/ui/sidebar.tsx","../src/hooks/use-mobile.tsx","../src/components/ui/separator.tsx","../src/components/ui/skeleton.tsx","../src/components/ui/tooltip.tsx","../src/components/layout/Sidebar/components/app-sidebar.tsx","../src/components/layout/Sidebar/components/team-switcher.tsx","../src/components/layout/Sidebar/components/menus.tsx","../src/components/ui/breadcrumb.tsx","../src/components/layout/Sidebar/provider/index.tsx","../src/components/layout/Sidebar/components/header-sidebar.tsx","../src/components/layout/Sidebar/components/footer-sidebar.tsx","../src/components/layout/Sidebar/Sidebar.tsx","../src/components/layout/Sidebar/components/nav-user.tsx","../src/components/layout/PageLayout/index.tsx","../src/components/ui/tabs.tsx","../src/components/layout/Tabs/Tabs.tsx","../src/components/ui/alert-dialog.tsx","../src/components/actions/AlertDialog/AlertDialog.tsx","../src/components/dataInput/Input/components/MultipleInput/MultipleInputBase.tsx","../src/components/dataInput/Input/components/MultipleInput/MultipleMaskInput.tsx","../src/components/dataInput/Select/SelectBase.tsx","../src/components/dataInput/Select/Select.tsx","../src/components/dataDisplay/Label/Label.tsx","../src/components/dataInput/Select/MultiSelect/MultiSelectBase.tsx","../src/components/dataInput/Select/MultiSelect/index.tsx","../src/components/ui/switch.tsx","../src/components/dataInput/Switch/Switch.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n flexRender,\n getCoreRowModel,\n getSortedRowModel,\n getPaginationRowModel,\n useReactTable,\n SortingState,\n VisibilityState,\n PaginationState,\n} from \"@tanstack/react-table\";\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"../../../../../components/ui/table\";\nimport { DataTableToolbar } from \"./data-table-toolbar\";\nimport { DataTablePagination } from \"./data-table-pagination\";\nimport { cn } from \"../../../../../lib/utils\";\nimport { DataTableColumnHeader } from \"./data-table-column-header\";\nimport { DynamicTableProps } from \"./types\";\n\nexport function DynamicTable<TData>({\n data,\n columns,\n className,\n toolbar,\n pagination: showPagination = true,\n sorting: showSorting = true,\n columnVisibility: showColumnVisibility = true,\n filters,\n rowsPerPage = [10, 20, 30, 40, 50],\n defaultSort = [],\n defaultVisibility = {},\n}: DynamicTableProps<TData>) {\n const [sorting, setSorting] = React.useState<SortingState>(defaultSort);\n const [columnVisibility, setColumnVisibility] =\n React.useState<VisibilityState>(defaultVisibility);\n const [{ pageIndex, pageSize }, setPagination] =\n React.useState<PaginationState>({\n pageIndex: 0,\n pageSize: rowsPerPage[0],\n });\n\n const pagination = React.useMemo(\n () => ({\n pageIndex,\n pageSize,\n }),\n [pageIndex, pageSize]\n );\n\n const table = useReactTable({\n data,\n columns,\n getCoreRowModel: getCoreRowModel(),\n onSortingChange: setSorting,\n getSortedRowModel: showSorting ? getSortedRowModel() : undefined,\n getPaginationRowModel: getPaginationRowModel(),\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n manualPagination: false,\n pageCount: Math.ceil(data.length / pageSize),\n state: {\n sorting,\n columnVisibility,\n pagination,\n },\n enableSorting: showSorting,\n });\n\n return (\n <div className=\"space-y-4\">\n {(toolbar || filters || showColumnVisibility) && (\n <DataTableToolbar\n table={table}\n filters={filters}\n showColumnVisibility={showColumnVisibility}\n />\n )}\n <div className={cn(\"rounded-md border\", className)}>\n <Table>\n <TableHeader>\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n {headerGroup.headers.map((header) => (\n <TableHead key={header.id}>\n {header.isPlaceholder ? null : (\n <DataTableColumnHeader\n column={header.column}\n title={header.column.columnDef.header as string}\n />\n )}\n </TableHead>\n ))}\n </TableRow>\n ))}\n </TableHeader>\n <TableBody>\n {table.getRowModel().rows?.length ? (\n table.getRowModel().rows.map((row) => (\n <TableRow key={row.id}>\n {row.getVisibleCells().map((cell) => (\n <TableCell key={cell.id}>\n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext()\n )}\n </TableCell>\n ))}\n </TableRow>\n ))\n ) : (\n <TableRow>\n <TableCell\n colSpan={columns.length}\n className=\"h-24 text-center\"\n >\n Nenhum resultado encontrado.\n </TableCell>\n </TableRow>\n )}\n </TableBody>\n </Table>\n </div>\n {showPagination && (\n <DataTablePagination table={table} pageSizeOptions={rowsPerPage} />\n )}\n </div>\n );\n}\n","import * as React from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst Table = React.forwardRef<\n HTMLTableElement,\n React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n <div className=\"relative w-full overflow-auto\">\n <table\n ref={ref}\n className={cn(\"w-full caption-bottom text-sm\", className)}\n {...props}\n />\n </div>\n));\nTable.displayName = \"Table\";\n\nconst TableHeader = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <thead ref={ref} className={cn(\"[&_tr]:border-b\", className)} {...props} />\n));\nTableHeader.displayName = \"TableHeader\";\n\nconst TableBody = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <tbody\n ref={ref}\n className={cn(\"[&_tr:last-child]:border-0\", className)}\n {...props}\n />\n));\nTableBody.displayName = \"TableBody\";\n\nconst TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <tfoot\n ref={ref}\n className={cn(\n \"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n className\n )}\n {...props}\n />\n));\nTableFooter.displayName = \"TableFooter\";\n\nconst TableRow = React.forwardRef<\n HTMLTableRowElement,\n React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n <tr\n ref={ref}\n className={cn(\n \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n className\n )}\n {...props}\n />\n));\nTableRow.displayName = \"TableRow\";\n\nconst TableHead = React.forwardRef<\n HTMLTableCellElement,\n React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n <th\n ref={ref}\n className={cn(\n \"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n className\n )}\n {...props}\n />\n));\nTableHead.displayName = \"TableHead\";\n\nconst TableCell = React.forwardRef<\n HTMLTableCellElement,\n React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n <td\n ref={ref}\n className={cn(\n \"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n className\n )}\n {...props}\n />\n));\nTableCell.displayName = \"TableCell\";\n\nconst TableCaption = React.forwardRef<\n HTMLTableCaptionElement,\n React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n <caption\n ref={ref}\n className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n {...props}\n />\n));\nTableCaption.displayName = \"TableCaption\";\n\nexport {\n Table,\n TableHeader,\n TableBody,\n TableFooter,\n TableHead,\n TableRow,\n TableCell,\n TableCaption,\n};\n","import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","\"use client\";\n\nimport { DropdownMenuTrigger } from \"@radix-ui/react-dropdown-menu\";\nimport { MixerHorizontalIcon } from \"@radix-ui/react-icons\";\nimport { Table } from \"@tanstack/react-table\";\nimport { Button } from \"../../../../../components/ui/button\";\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n} from \"../../../../../components/ui/dropdown-menu\";\n\ninterface DataTableViewOptionsProps<TData> {\n table: Table<TData>;\n}\n\nexport function DataTableViewOptions<TData>({\n table,\n}: DataTableViewOptionsProps<TData>) {\n return (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button\n variant=\"outline\"\n size=\"sm\"\n className=\"ml-auto hidden h-8 lg:flex\"\n >\n <MixerHorizontalIcon className=\"mr-2 h-4 w-4\" />\n Colunas\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-[150px]\">\n <DropdownMenuLabel>Colunas visíveis</DropdownMenuLabel>\n <DropdownMenuSeparator />\n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" && column.getCanHide()\n )\n .map((column) => {\n return (\n <DropdownMenuCheckboxItem\n key={column.id}\n className=\"capitalize\"\n checked={column.getIsVisible()}\n onCheckedChange={(value) => column.toggleVisibility(!!value)}\n >\n {column.id}\n </DropdownMenuCheckboxItem>\n );\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n );\n}\n","import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\n outline:\n \"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2\",\n sm: \"h-8 rounded-md px-3 text-xs\",\n lg: \"h-10 rounded-md px-8\",\n icon: \"h-9 w-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n);\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\";\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n {...props}\n />\n );\n }\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","\"use client\";\n\nimport * as React from \"react\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { Check, ChevronRight, Circle } from \"lucide-react\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst DropdownMenu = DropdownMenuPrimitive.Root;\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group;\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal;\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub;\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n inset?: boolean;\n }\n>(({ className, inset, children, ...props }, ref) => (\n <DropdownMenuPrimitive.SubTrigger\n ref={ref}\n className={cn(\n \"flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n inset && \"pl-8\",\n className\n )}\n {...props}\n >\n {children}\n <ChevronRight className=\"ml-auto\" />\n </DropdownMenuPrimitive.SubTrigger>\n));\nDropdownMenuSubTrigger.displayName =\n DropdownMenuPrimitive.SubTrigger.displayName;\n\nconst DropdownMenuSubContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n <DropdownMenuPrimitive.SubContent\n ref={ref}\n className={cn(\n \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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\",\n className\n )}\n {...props}\n />\n));\nDropdownMenuSubContent.displayName =\n DropdownMenuPrimitive.SubContent.displayName;\n\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n className={cn(\n \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md\",\n \"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\",\n className\n )}\n {...props}\n />\n </DropdownMenuPrimitive.Portal>\n));\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;\n\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean;\n }\n>(({ className, inset, ...props }, ref) => (\n <DropdownMenuPrimitive.Item\n ref={ref}\n className={cn(\n \"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0\",\n inset && \"pl-8\",\n className\n )}\n {...props}\n />\n));\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n <DropdownMenuPrimitive.CheckboxItem\n ref={ref}\n className={cn(\n \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n className\n )}\n checked={checked}\n {...props}\n >\n <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <DropdownMenuPrimitive.ItemIndicator>\n <Check className=\"h-4 w-4\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.CheckboxItem>\n));\nDropdownMenuCheckboxItem.displayName =\n DropdownMenuPrimitive.CheckboxItem.displayName;\n\nconst DropdownMenuRadioItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n <DropdownMenuPrimitive.RadioItem\n ref={ref}\n className={cn(\n \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n className\n )}\n {...props}\n >\n <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <DropdownMenuPrimitive.ItemIndicator>\n <Circle className=\"h-2 w-2 fill-current\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.RadioItem>\n));\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;\n\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n inset?: boolean;\n }\n>(({ className, inset, ...props }, ref) => (\n <DropdownMenuPrimitive.Label\n ref={ref}\n className={cn(\n \"px-2 py-1.5 text-sm font-semibold\",\n inset && \"pl-8\",\n className\n )}\n {...props}\n />\n));\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;\n\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <DropdownMenuPrimitive.Separator\n ref={ref}\n className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n {...props}\n />\n));\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;\n\nconst DropdownMenuShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n return (\n <span\n className={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n {...props}\n />\n );\n};\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\";\n\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuGroup,\n DropdownMenuPortal,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuRadioGroup,\n};\n","\"use client\";\n\nimport { DataTableViewOptions } from \"./data-table-view-options\";\nimport { DynamicTableToolbarProps } from \"./types\";\n\nexport function DataTableToolbar<TData>({\n table,\n filters,\n showColumnVisibility,\n}: DynamicTableToolbarProps<TData>) {\n return (\n <div className=\"flex items-center justify-between\">\n <div className=\"flex flex-1 items-center space-x-2\">{filters}</div>\n {showColumnVisibility && <DataTableViewOptions table={table} />}\n </div>\n );\n}\n","\"use client\";\n\nimport {\n ChevronLeftIcon,\n ChevronRightIcon,\n DoubleArrowLeftIcon,\n DoubleArrowRightIcon,\n} from \"@radix-ui/react-icons\";\nimport { Button } from \"../../../../../components/ui/button\";\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"../../../../../components/ui/select\";\nimport { DynamicTablePaginationProps } from \"./types\";\n\nexport function DataTablePagination<TData>({\n table,\n pageSizeOptions = [10, 20, 30, 40, 50],\n}: DynamicTablePaginationProps<TData>) {\n return (\n <div className=\"flex items-center justify-between px-2\">\n <div className=\"flex-1 text-sm text-muted-foreground\">\n {table.getFilteredSelectedRowModel().rows.length} de{\" \"}\n {table.getFilteredRowModel().rows.length} linha(s) selecionada(s).\n </div>\n <div className=\"flex items-center space-x-6 lg:space-x-8\">\n <div className=\"flex items-center space-x-2\">\n <p className=\"text-sm font-medium\">Linhas por página</p>\n <Select\n value={`${table.getState().pagination.pageSize}`}\n onValueChange={(value) => {\n table.setPageSize(Number(value));\n }}\n >\n <SelectTrigger className=\"h-8 w-[70px]\">\n <SelectValue placeholder={table.getState().pagination.pageSize} />\n </SelectTrigger>\n <SelectContent side=\"top\">\n {pageSizeOptions.map((pageSize) => (\n <SelectItem key={pageSize} value={`${pageSize}`}>\n {pageSize}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n <div className=\"flex w-[100px] items-center justify-center text-sm font-medium\">\n Página {table.getState().pagination.pageIndex + 1} de{\" \"}\n {table.getPageCount()}\n </div>\n <div className=\"flex items-center space-x-2\">\n <Button\n variant=\"outline\"\n className=\"hidden h-8 w-8 p-0 lg:flex\"\n onClick={() => table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n <DoubleArrowLeftIcon className=\"h-4 w-4\" />\n </Button>\n <Button\n variant=\"outline\"\n className=\"h-8 w-8 p-0\"\n onClick={() => table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n <ChevronLeftIcon className=\"h-4 w-4\" />\n </Button>\n <Button\n variant=\"outline\"\n className=\"h-8 w-8 p-0\"\n onClick={() => table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n <ChevronRightIcon className=\"h-4 w-4\" />\n </Button>\n <Button\n variant=\"outline\"\n className=\"hidden h-8 w-8 p-0 lg:flex\"\n onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n <DoubleArrowRightIcon className=\"h-4 w-4\" />\n </Button>\n </div>\n </div>\n </div>\n );\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { Check, ChevronDown, ChevronUp } from \"lucide-react\";\n\nimport { cn } from \"../../lib/utils\";\n\nexport type SelectProps = SelectPrimitive.SelectProps;\n\nconst Select = SelectPrimitive.Root;\n\nconst SelectGroup = SelectPrimitive.Group;\n\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectTrigger = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Trigger\n ref={ref}\n className={cn(\n \"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1\",\n className\n )}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon asChild>\n <ChevronDown className=\"h-4 w-4 opacity-50\" />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n));\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\nconst SelectScrollUpButton = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollUpButton\n ref={ref}\n className={cn(\n \"flex cursor-default items-center justify-center py-1\",\n className\n )}\n {...props}\n >\n <ChevronUp className=\"h-4 w-4\" />\n </SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollDownButton\n ref={ref}\n className={cn(\n \"flex cursor-default items-center justify-center py-1\",\n className\n )}\n {...props}\n >\n <ChevronDown className=\"h-4 w-4\" />\n </SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName =\n SelectPrimitive.ScrollDownButton.displayName;\n\nconst SelectContent = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n ref={ref}\n className={cn(\n \"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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\",\n position === \"popper\" &&\n \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n className\n )}\n position={position}\n {...props}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.Viewport\n className={cn(\n \"p-1\",\n position === \"popper\" &&\n \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\"\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n));\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nconst SelectLabel = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Label\n ref={ref}\n className={cn(\"px-2 py-1.5 text-sm font-semibold\", className)}\n {...props}\n />\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nconst SelectItem = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Item\n ref={ref}\n className={cn(\n \"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n className\n )}\n {...props}\n >\n <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n <SelectPrimitive.ItemIndicator>\n <Check className=\"h-4 w-4\" />\n </SelectPrimitive.ItemIndicator>\n </span>\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n\nconst SelectSeparator = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Separator\n ref={ref}\n className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n {...props}\n />\n));\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n\nexport {\n Select,\n SelectGroup,\n SelectValue,\n SelectTrigger,\n SelectContent,\n SelectLabel,\n SelectItem,\n SelectSeparator,\n SelectScrollUpButton,\n SelectScrollDownButton,\n};\n","\"use client\";\n\nimport {\n ArrowDownIcon,\n ArrowUpIcon,\n CaretSortIcon,\n EyeNoneIcon,\n} from \"@radix-ui/react-icons\";\nimport { Column } from \"@tanstack/react-table\";\nimport { cn } from \"../../../../../lib/utils\";\nimport { Button } from \"../../../../../components/ui/button\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"../../../../../components/ui/dropdown-menu\";\n\ninterface DataTableColumnHeaderProps<TData, TValue>\n extends React.HTMLAttributes<HTMLDivElement> {\n column: Column<TData, TValue>;\n title: string;\n}\n\nexport function DataTableColumnHeader<TData, TValue>({\n column,\n title,\n className,\n}: DataTableColumnHeaderProps<TData, TValue>) {\n if (!column.getCanSort()) {\n return <div className={cn(className)}>{title}</div>;\n }\n\n return (\n <div className={cn(\"flex items-center space-x-2\", className)}>\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button\n variant=\"ghost\"\n size=\"sm\"\n className=\"-ml-3 h-8 data-[state=open]:bg-accent\"\n >\n <span>{title}</span>\n {column.getIsSorted() === \"desc\" ? (\n <ArrowDownIcon className=\"ml-2 h-4 w-4\" />\n ) : column.getIsSorted() === \"asc\" ? (\n <ArrowUpIcon className=\"ml-2 h-4 w-4\" />\n ) : (\n <CaretSortIcon className=\"ml-2 h-4 w-4\" />\n )}\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n <DropdownMenuItem onClick={() => column.toggleSorting(false)}>\n <ArrowUpIcon className=\"mr-2 h-3.5 w-3.5 text-muted-foreground/70\" />\n Crescente\n </DropdownMenuItem>\n <DropdownMenuItem onClick={() => column.toggleSorting(true)}>\n <ArrowDownIcon className=\"mr-2 h-3.5 w-3.5 text-muted-foreground/70\" />\n Decrescente\n </DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>\n <EyeNoneIcon className=\"mr-2 h-3.5 w-3.5 text-muted-foreground/70\" />\n Ocultar\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n );\n}\n","import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst badgeVariants = cva(\n \"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n {\n variants: {\n variant: {\n default:\n \"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80\",\n secondary:\n \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n destructive:\n \"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80\",\n success:\n \"border-transparent bg-success text-primary-foreground shadow hover:bg-success/80\",\n warning:\n \"border-transparent bg-warning text-primary-foreground shadow hover:bg-warning/80\",\n outline: \"text-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n);\n\nexport interface BadgeProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n return (\n <div className={cn(badgeVariants({ variant }), className)} {...props} />\n );\n}\n\nexport { Badge, badgeVariants };\n","import React, { useCallback, useMemo } from \"react\";\nimport { IconContext } from \"react-icons\";\nimport { IconProps } from \"./types\";\n\nexport const Icon: React.FC<IconProps> = ({ name, size = 24, ...rest }) => {\n const nameIcon = useMemo(() => name, [name]);\n\n const iconsModulePath = useMemo(\n () => ({\n // eslint-disable-next-line @typescript-eslint/no-require-imports\n md: require(\"react-icons/md\"),\n // eslint-disable-next-line @typescript-eslint/no-require-imports\n fa: require(\"react-icons/fa\"),\n // eslint-disable-next-line @typescript-eslint/no-require-imports\n bs: require(\"react-icons/bs\"),\n }),\n []\n );\n\n const typeIcon = useMemo(() => {\n const matches = [...nameIcon.matchAll(/[A-Z]/g)];\n return String(\n nameIcon.slice(0, matches[1]?.index) || \"\"\n ).toLocaleLowerCase();\n }, [nameIcon]);\n\n const Icon = useCallback(\n (props: typeof rest) => {\n try {\n if (!typeIcon || !nameIcon) return <></>;\n\n return iconsModulePath[typeIcon as keyof typeof iconsModulePath][\n nameIcon\n ]?.(props);\n } catch {\n return <></>;\n }\n },\n [iconsModulePath, nameIcon, typeIcon]\n );\n\n return (\n <IconContext.Provider value={{ size: String(size) }}>\n <Icon {...rest} />\n </IconContext.Provider>\n );\n};\n","\"use client\";\n\nimport * as React from \"react\";\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst Avatar = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n <AvatarPrimitive.Root\n ref={ref}\n className={cn(\n \"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full\",\n className\n )}\n {...props}\n />\n));\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n\nconst AvatarImage = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Image>,\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n <AvatarPrimitive.Image\n ref={ref}\n className={cn(\"aspect-square h-full w-full\", className)}\n {...props}\n />\n));\nAvatarImage.displayName = AvatarPrimitive.Image.displayName;\n\nconst AvatarFallback = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Fallback>,\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n <AvatarPrimitive.Fallback\n ref={ref}\n className={cn(\n \"flex h-full w-full items-center justify-center rounded-full bg-muted\",\n className\n )}\n {...props}\n />\n));\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;\n\nexport { Avatar, AvatarImage, AvatarFallback };\n","import React from \"react\";\nimport { isEmpty } from \"lodash\";\nimport { DataPairListProps } from \"./types\";\nimport { cn } from \"../../../lib/utils\";\nimport { Text } from \"../Text\";\n\nexport const DataPairList = ({\n title,\n data,\n labels,\n className,\n infoDirection = \"horizontal\",\n direction = \"vertical\",\n withBorder = false,\n header = <></>,\n}: DataPairListProps) => {\n if (isEmpty(data)) return null;\n\n return (\n <div\n className={cn(\n \"flex flex-col gap-2 rounded-md p-4\",\n withBorder && \"border border-muted\",\n className\n )}\n >\n <div className=\"flex gap-3\">\n {title && <Text variant=\"title\">{title}</Text>}\n {header}\n </div>\n <div\n className={cn(\n \"grid grid-cols-1 mt-5\",\n direction === \"vertical\"\n ? \"gap-3\"\n : \"sm:grid-cols-2 md:grid-cols-4 gap-10\"\n )}\n >\n {Object.entries(data || {}).map(([key, value], index) => (\n <div\n className={cn(\n \"flex gap-3\",\n infoDirection === \"horizontal\" ? \"flex-row\" : \"flex-col\"\n )}\n key={index}\n >\n <Text className=\"uppercase text-muted-foreground font-bold\">\n {labels?.[key] || key}:\n </Text>\n <Text>{value}</Text>\n </div>\n ))}\n </div>\n </div>\n );\n};\n","import { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../..//lib/utils\";\n\n// Definição das variantes com pesos adequados\nconst textVariants = cva(\"\", {\n variants: {\n variant: {\n display: \"text-5xl font-extrabold tracking-tight\",\n title: \"text-3xl font-bold tracking-tight\",\n subtitle: \"text-2xl font-semibold\",\n normal: \"text-base font-normal\",\n caption: \"text-sm font-medium\",\n muted: \"text-sm font-normal text-muted-foreground\",\n },\n align: {\n left: \"text-left\",\n center: \"text-center\",\n right: \"text-right\",\n justify: \"text-justify\",\n },\n },\n defaultVariants: {\n variant: \"normal\",\n align: \"left\",\n },\n});\n\n// Mapeia variantes para as tags HTML corretas\nconst tagMap = {\n display: \"h1\",\n title: \"h2\",\n subtitle: \"h3\",\n normal: \"p\",\n caption: \"small\",\n muted: \"p\",\n} as const;\n\ntype TextProps = VariantProps<typeof textVariants> & {\n className?: string;\n children: React.ReactNode;\n};\n\nexport function Text({\n variant = \"normal\",\n align,\n className,\n children,\n}: TextProps) {\n const Tag = tagMap[variant || \"normal\"] || \"p\";\n\n return (\n <Tag className={cn(textVariants({ variant, align }), className)}>\n {children}\n </Tag>\n );\n}\n","import { useFormContext } from \"react-hook-form\";\nimport {\n Checkbox as CheckboxUI,\n CheckboxProps as CheckboxUIProps,\n} from \"../../ui/checkbox\";\nimport { Label } from \"../../../components/ui/label\";\n\nimport { FormControl, FormField, FormItem, FormLabel } from \"../form\";\n\nimport { ErrorMessage } from \"../../../components/dataDisplay/ErrorMessage\";\n\nexport type CheckboxProps = CheckboxUIProps & {\n label: string;\n error?: string;\n withoutForm?: boolean;\n};\n\nexport const Checkbox = ({\n label,\n error,\n withoutForm,\n ...props\n}: CheckboxProps) => {\n const form = useFormContext();\n\n const hasForm = !withoutForm && !!form && !!props.name;\n if (!hasForm)\n return (\n <div className=\"flex items-center space-x-2\">\n <CheckboxUI {...props} />\n {label && <Label htmlFor={props.id}>{label}</Label>}\n {error && <ErrorMessage>{error}</ErrorMessage>}\n </div>\n );\n\n return (\n <FormField\n control={form.control}\n name={props.name ?? \"\"}\n render={({ field }) => (\n <FormItem className=\"flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4\">\n <FormControl>\n <CheckboxUI\n checked={field.value}\n onCheckedChange={field.onChange}\n />\n </FormControl>\n {label && (\n <div className=\"space-y-1 leading-none\">\n <FormLabel>{label}</FormLabel>\n </div>\n )}\n </FormItem>\n )}\n />\n );\n};\n","\"use client\";\n\nimport * as React from \"react\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { Check } from \"lucide-react\";\n\nimport { cn } from \"../../lib/utils\";\n\nexport type CheckboxProps = React.ComponentPropsWithoutRef<\n typeof CheckboxPrimitive.Root\n>;\n\nconst Checkbox = React.forwardRef<\n React.ElementRef<typeof CheckboxPrimitive.Root>,\n CheckboxProps\n>(({ className, ...props }, ref) => (\n <CheckboxPrimitive.Root\n ref={ref}\n className={cn(\n \"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n className\n )}\n {...props}\n >\n <CheckboxPrimitive.Indicator\n className={cn(\"flex items-center justify-center text-current\")}\n >\n <Check className=\"h-4 w-4\" />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n));\nCheckbox.displayName = CheckboxPrimitive.Root.displayName;\n\nexport { Checkbox };\n","\"use client\";\n\nimport * as React from \"react\";\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst labelVariants = cva(\n \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n);\n\nexport type LabelProps = React.ComponentPropsWithoutRef<\n typeof LabelPrimitive.Root\n> &\n VariantProps<typeof labelVariants>;\n\nconst Label = React.forwardRef<\n React.ElementRef<typeof LabelPrimitive.Root>,\n LabelProps\n>(({ className, ...props }, ref) => (\n <LabelPrimitive.Root\n ref={ref}\n className={cn(labelVariants(), className)}\n {...props}\n />\n));\nLabel.displayName = LabelPrimitive.Root.displayName;\n\nexport { Label };\n","import { useFormContext } from \"react-hook-form\";\nexport * from \"../../ui/form\";\nexport { useFormContext };\n","\"use client\";\n\nimport * as React from \"react\";\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n Controller,\n ControllerProps,\n FieldPath,\n FieldValues,\n FormProvider,\n useFormContext,\n} from \"react-hook-form\";\n\nimport { cn } from \"../../lib/utils\";\nimport { Label } from \"../../components/ui/label\";\n\nconst Form = FormProvider;\n\ntype FormFieldContextValue<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = {\n name: TName;\n};\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n {} as FormFieldContextValue\n);\n\nconst FormField = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n ...props\n}: ControllerProps<TFieldValues, TName>) => {\n return (\n <FormFieldContext.Provider value={{ name: props.name }}>\n <Controller {...props} />\n </FormFieldContext.Provider>\n );\n};\n\nconst useFormField = () => {\n const fieldContext = React.useContext(FormFieldContext);\n const itemContext = React.useContext(FormItemContext);\n const { getFieldState, formState } = useFormContext();\n\n const fieldState = getFieldState(fieldContext.name, formState);\n\n if (!fieldContext) {\n throw new Error(\"useFormField should be used within <FormField>\");\n }\n\n const { id } = itemContext;\n\n return {\n id,\n name: fieldContext.name,\n formItemId: `${id}-form-item`,\n formDescriptionId: `${id}-form-item-description`,\n formMessageId: `${id}-form-item-message`,\n ...fieldState,\n };\n};\n\ntype FormItemContextValue = {\n id: string;\n};\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n {} as FormItemContextValue\n);\n\nconst FormItem = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n const id = React.useId();\n\n return (\n <FormItemContext.Provider value={{ id }}>\n <div ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n </FormItemContext.Provider>\n );\n});\nFormItem.displayName = \"FormItem\";\n\nconst FormLabel = React.forwardRef<\n React.ElementRef<typeof LabelPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n const { error, formItemId } = useFormField();\n\n return (\n <Label\n ref={ref}\n className={cn(error && \"text-destructive\", className)}\n htmlFor={formItemId}\n {...props}\n />\n );\n});\nFormLabel.displayName = \"FormLabel\";\n\nconst FormControl = React.forwardRef<\n React.ElementRef<typeof Slot>,\n React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n const { error, formItemId, formDescriptionId, formMessageId } =\n useFormField();\n\n return (\n <Slot\n ref={ref}\n id={formItemId}\n aria-describedby={\n !error\n ? `${formDescriptionId}`\n : `${formDescriptionId} ${formMessageId}`\n }\n aria-invalid={!!error}\n {...props}\n />\n );\n});\nFormControl.displayName = \"FormControl\";\n\nconst FormDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n const { formDescriptionId } = useFormField();\n\n return (\n <p\n ref={ref}\n id={formDescriptionId}\n className={cn(\"text-[0.8rem] text-muted-foreground\", className)}\n {...props}\n />\n );\n});\nFormDescription.displayName = \"FormDescription\";\n\nconst FormMessage = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n const { error, formMessageId } = useFormField();\n const body = error ? String(error?.message) : children;\n\n if (!body) {\n return null;\n }\n\n return (\n <p\n ref={ref}\n id={formMessageId}\n className={cn(\"text-[0.8rem] font-medium text-destructive\", className)}\n {...props}\n >\n {body}\n </p>\n );\n});\nFormMessage.displayName = \"FormMessage\";\n\nexport {\n useFormField,\n Form,\n FormItem,\n FormLabel,\n FormControl,\n FormDescription,\n FormMessage,\n FormField,\n};\n","export type ErrorMessageProps = {\n children: string;\n};\nexport const ErrorMessage = ({ children }: ErrorMessageProps) => {\n return <p className=\"text-sm font-medium text-destructive\">{children}</p>;\n};\n","import * as React from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nexport type InputProps = React.ComponentProps<\"input\">;\n\nconst Input = React