lecom-ui 5.0.6 → 5.0.7

package/dist/data-table/data-table.js

@@ -0,0 +1,490 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, flexRender } from '@tanstack/react-table';
+import { ArrowUpDownIcon, TriangleAlertIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import { cn } from '../lib/utils.js';
+import { Button } from '../button.js';
+import { Skeleton } from '../skeleton.js';
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../table.js';
+
+const SelectByType = {
+  SELECT_ALL: "all",
+  SELECT_NONE: "none"
+};
+const DataTable = ({
+  columns,
+  dataSource,
+  isLoading = false,
+  renderEmptyContent,
+  searchValue = "",
+  searchableColumns = [],
+  hiddenColumns = [],
+  pagination = {
+    controlExternal: false,
+    currentPage: 0,
+    pageSize: 10,
+    totalPages: 0,
+    totalItems: 0,
+    position: "topRight",
+    textOf: ""
+  },
+  rowSelection,
+  showHeaderDivider,
+  className,
+  classNameTable,
+  classNameHeader,
+  classNameBody
+}) => {
+  const [sorting, setSorting] = useState([]);
+  const [columnFilters, setColumnFilters] = useState([]);
+  const [columnVisibility, setColumnVisibility] = useState({});
+  const [internalRowSelection, setInternalRowSelection] = useState({});
+  const [search, setSearch] = useState(searchValue);
+  const [columnPinning, setColumnPinning] = useState({
+    left: [],
+    right: []
+  });
+  const [page, setPage] = useState(pagination.currentPage ?? 0);
+  const [pageSearch, setPageSearch] = useState(0);
+  const [size, setSize] = useState(pagination.pageSize ?? 10);
+  const selectedRowsRef = useRef([]);
+  const tableRef = useRef(null);
+  const table = useReactTable({
+    data: dataSource,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onColumnPinningChange: setColumnPinning,
+    onRowSelectionChange: setInternalRowSelection,
+    getPaginationRowModel: getPaginationRowModel(),
+    state: {
+      sorting,
+      columnPinning,
+      columnFilters,
+      columnVisibility,
+      rowSelection: internalRowSelection,
+      pagination: { pageIndex: page, pageSize: size }
+    }
+  });
+  useEffect(() => {
+    setSearch(searchValue);
+  }, [searchValue]);
+  useEffect(() => {
+    if (!table || !Array.isArray(searchableColumns))
+      return;
+    if (search.trim() === "") {
+      searchableColumns.forEach((columnId) => {
+        const column = table.getColumn(columnId);
+        if (column) {
+          column.setFilterValue("");
+        }
+      });
+      setPage(pageSearch);
+      table.setPageIndex(pageSearch);
+    } else {
+      searchableColumns.forEach((columnId) => {
+        const column = table.getColumn(columnId);
+        if (column)
+          column.setFilterValue(search.trim());
+      });
+      setPage(0);
+      table.setPageIndex(0);
+    }
+  }, [search, searchableColumns, table]);
+  const total = pagination.totalItems || table.getPageCount() * size;
+  const handlePageChange = (newPage) => {
+    setPage(newPage);
+    setPageSearch(newPage);
+    table.setPageIndex(newPage);
+  };
+  useEffect(() => {
+    if (pagination.pageSize !== void 0) {
+      setSize(pagination.pageSize);
+    }
+  }, [pagination.pageSize]);
+  useEffect(() => {
+    if (pagination.currentPage !== void 0 && pagination.currentPage <= (pagination.totalPages ?? 0)) {
+      setPage(pagination.currentPage);
+    }
+  }, [pagination.currentPage, pagination.totalPages]);
+  useEffect(() => {
+    if (!rowSelection) {
+      return;
+    }
+    if (rowSelection?.controlExternal) {
+      if (rowSelection?.selectedRowKeys.length === 0) {
+        if (dataSource.length === Object.keys(table.getState().rowSelection).length) {
+          table.setRowSelection({});
+        }
+        return;
+      }
+      const validRowSelection = rowSelection.selectedRowKeys.reduce(
+        (acc, id) => {
+          const rowIndex = table.getCoreRowModel().rows.findIndex((row) => {
+            const rowId = "id" in row.original ? String(row.original.id) : String(row.id);
+            return rowId === id;
+          });
+          if (rowIndex !== -1) {
+            acc[rowIndex] = true;
+          }
+          return acc;
+        },
+        {}
+      );
+      table.setRowSelection(validRowSelection);
+    }
+  }, [rowSelection?.controlExternal, rowSelection?.selectedRowKeys, table]);
+  useEffect(() => {
+    if (!rowSelection || rowSelection?.controlExternal) {
+      return;
+    }
+    if (rowSelection?.selectBy?.columnId === SelectByType.SELECT_ALL) {
+      const allRows = table.getRowModel().rows.map((row) => row.id);
+      if (rowSelection && rowSelection.onChange)
+        rowSelection.onChange(allRows);
+      table.setRowSelection(
+        allRows.reduce((acc, id) => ({ ...acc, [id]: true }), {})
+      );
+    } else if (rowSelection?.selectBy?.columnId === SelectByType.SELECT_NONE) {
+      if (rowSelection && rowSelection.onChange)
+        rowSelection.onChange([]);
+      table.setRowSelection({});
+    } else {
+      const selectedRows = table.getRowModel().rows.reduce((acc, row) => {
+        if (rowSelection?.selectBy && row.original[rowSelection?.selectBy.columnId] === rowSelection?.selectBy.value) {
+          acc[row.id] = true;
+        }
+        return acc;
+      }, {});
+      table.setRowSelection(selectedRows);
+      if (rowSelection && rowSelection.onChange)
+        rowSelection.onChange(Object.keys(selectedRows));
+      table.setRowSelection(selectedRows);
+    }
+  }, [rowSelection?.selectBy, table, rowSelection?.controlExternal]);
+  useEffect(() => {
+    if (!rowSelection) {
+      return;
+    }
+    const currentSelection = Object.keys(table.getState().rowSelection).map(
+      (id) => {
+        const row = table.getRow(id);
+        return "id" in row.original ? String(row.original.id) : String(row.id);
+      }
+    );
+    const hasSelectionChanged = currentSelection.length !== selectedRowsRef.current.length || !currentSelection.every((id, idx) => id === selectedRowsRef.current[idx]);
+    const currentRows = table.getRowModel().rows;
+    const selectedRowsVisible = currentRows.some(
+      (row) => currentSelection.includes(
+        "id" in row.original ? String(row.original.id) : String(row.id)
+      )
+    );
+    if (hasSelectionChanged) {
+      selectedRowsRef.current = currentSelection;
+      rowSelection?.onChange?.(currentSelection);
+    }
+    if (!selectedRowsVisible && currentSelection.length > 0 && (rowSelection?.selectedRowKeys?.length ?? 0) > 0) {
+      selectedRowsRef.current = [];
+      rowSelection?.onChange?.([]);
+    } else if (selectedRowsVisible && currentSelection.length === 0 && selectedRowsRef.current.length > 0) {
+      rowSelection?.onChange?.(selectedRowsRef.current);
+    }
+  }, [table.getState().rowSelection, page]);
+  useEffect(() => {
+    const visibility = {};
+    columns.forEach((column) => {
+      if ("accessorKey" in column) {
+        visibility[column.accessorKey] = !hiddenColumns.includes(
+          column.accessorKey
+        );
+      }
+    });
+    setColumnVisibility(visibility);
+  }, [hiddenColumns, columns]);
+  const visibleColumns = columns.filter(
+    (column) => "accessorKey" in column && !hiddenColumns.includes(column.accessorKey)
+  );
+  useEffect(() => {
+    columns.forEach((column) => {
+      if (column.meta && "isFixed" in column.meta && column.meta.isFixed) {
+        if (column.id) {
+          table.getColumn(column.id)?.pin(column.meta.isFixed);
+        }
+      }
+    });
+  }, [columns, table]);
+  const getCommonPinningStyles = (column) => {
+    const isPinned = column.getIsPinned();
+    const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
+    const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
+    return {
+      boxShadow: isLastLeftPinnedColumn ? "-6px 0 4px -4px rgba(0, 0, 0, 0.1) inset" : isFirstRightPinnedColumn ? "6px 0 4px -4px rgba(0, 0, 0, 0.1) inset" : void 0,
+      left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
+      right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
+      opacity: isPinned ? 0.96 : 1,
+      position: isPinned ? "sticky" : "relative",
+      backgroundColor: isPinned ? "white" : void 0,
+      zIndex: isPinned ? 20 : 0
+    };
+  };
+  const tableWidth = (columnPinning.left?.length ?? 0) > 0 || (columnPinning.right?.length ?? 0) > 0 ? table.getTotalSize() : "100%";
+  const columnsSkeleton = visibleColumns.length;
+  const positionPagination = pagination.position ?? "topRight";
+  const renderPagination = () => !pagination?.controlExternal && /* @__PURE__ */ jsx(
+    DataTablePagination,
+    {
+      table,
+      textOf: pagination.textOf,
+      onPageChange: handlePageChange,
+      totalItems: total,
+      className: cn(
+        "my-1 hover:bg-transparent",
+        (positionPagination === "topLeft" || positionPagination === "bottomLeft") && "justify-start",
+        (positionPagination === "topRight" || positionPagination === "bottomRight") && "justify-end",
+        (positionPagination === "topCenter" || positionPagination === "bottomCenter") && "justify-center"
+      )
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-md w-full overflow-auto scrollbar-thin relative",
+        className
+      ),
+      children: [
+        positionPagination.includes("top") && renderPagination(),
+        /* @__PURE__ */ jsxs(
+          Table,
+          {
+            ref: tableRef,
+            className: cn(classNameTable),
+            style: {
+              width: tableWidth,
+              borderCollapse: "separate",
+              borderSpacing: 0,
+              margin: tableWidth !== "100%" ? "0 auto" : void 0
+            },
+            children: [
+              /* @__PURE__ */ jsx(TableHeader, { className: cn("text-base space-y-0 h-8", classNameHeader), children: isLoading ? /* @__PURE__ */ jsx(DataTableLoadingHeader, { columnsSkeleton }) : table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(
+                TableRow,
+                {
+                  className: cn("hover:bg-transparent"),
+                  children: headerGroup.headers.map((header, headerIndex) => {
+                    const columnDef = header.column.columnDef;
+                    const size2 = header.column.getSize() ?? "1fr";
+                    const alignment = columnDef.meta && "align" in columnDef.meta ? columnDef.meta.align : "left";
+                    const alignmentClass = alignment === "center" ? "justify-center" : alignment === "right" ? "justify-end" : "justify-start";
+                    const hasAccessorKey = "accessorKey" in columnDef;
+                    const isFirstColumn = headerIndex === 0;
+                    const isLastColumn = headerIndex === headerGroup.headers.length - 1;
+                    const hasRightAccessorKey = !isLastColumn && "accessorKey" in headerGroup.headers[headerIndex + 1].column.columnDef;
+                    const hasLeftAccessorKey = !isFirstColumn && "accessorKey" in headerGroup.headers[headerIndex - 1].column.columnDef;
+                    return /* @__PURE__ */ jsxs(
+                      TableHead,
+                      {
+                        className: cn("h-5"),
+                        colSpan: header.colSpan,
+                        style: {
+                          width: size2,
+                          ...getCommonPinningStyles(header.column)
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: cn(
+                                `text-base text-grays-scale29 font-normal font-roboto p-0 cursor-pointer flex items-center ${alignmentClass} whitespace-nowrap`
+                              ),
+                              children: header.isPlaceholder ? null : /* @__PURE__ */ jsx(Fragment, { children: columnDef.enableSorting && header.column.getCanSort() ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                                flexRender(
+                                  columnDef.header,
+                                  header.getContext()
+                                ),
+                                /* @__PURE__ */ jsx(
+                                  ArrowUpDownIcon,
+                                  {
+                                    className: "flex mt-1 ml-2 h-3 w-3",
+                                    onClick: () => header.column.toggleSorting(
+                                      header.column.getIsSorted() === "asc"
+                                    )
+                                  }
+                                )
+                              ] }) : flexRender(columnDef.header, header.getContext()) })
+                            }
+                          ),
+                          showHeaderDivider && /* @__PURE__ */ jsxs(Fragment, { children: [
+                            hasAccessorKey && hasLeftAccessorKey && /* @__PURE__ */ jsx("span", { className: "absolute top-3 left-0 bottom-0 h-3 border-l border-grays-scale89" }),
+                            hasAccessorKey && hasRightAccessorKey && /* @__PURE__ */ jsx("span", { className: "absolute top-3 right-0 bottom-0 h-3 border-r border-grays-scale89" })
+                          ] })
+                        ]
+                      },
+                      header.id
+                    );
+                  })
+                },
+                headerGroup.id
+              )) }),
+              /* @__PURE__ */ jsx(
+                TableBody,
+                {
+                  className: cn(
+                    "border-t border-grays-scale79",
+                    isLoading && "overflow-hidden",
+                    classNameBody
+                  ),
+                  children: isLoading ? /* @__PURE__ */ jsx(
+                    DataTableLoadingContent,
+                    {
+                      columnsSkeleton,
+                      visibleColumns
+                    }
+                  ) : table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => {
+                    return /* @__PURE__ */ jsx(
+                      TableRow,
+                      {
+                        "data-state": row.getIsSelected() && "selected",
+                        className: "border-grays-scale89 hover:bg-gray-50",
+                        style: {
+                          backgroundColor: row.getIsSelected() ? "#e6f7ff" : ""
+                        },
+                        children: row.getVisibleCells().map((cell) => {
+                          const columnDef = cell.column.columnDef;
+                          const size2 = cell.column.getSize() ?? "1fr";
+                          const alignment = columnDef.meta && "align" in columnDef.meta ? columnDef.meta.align : "left";
+                          const alignmentClass = alignment === "center" ? "text-center" : alignment === "right" ? "text-right" : "text-left";
+                          return /* @__PURE__ */ jsx(
+                            TableCell,
+                            {
+                              style: {
+                                width: size2,
+                                ...getCommonPinningStyles(cell.column)
+                              },
+                              className: cn(alignmentClass),
+                              children: flexRender(columnDef.cell, cell.getContext())
+                            },
+                            cell.id
+                          );
+                        })
+                      },
+                      row.id
+                    );
+                  }) : renderEmptyContent && typeof renderEmptyContent === "object" && "title" in renderEmptyContent ? /* @__PURE__ */ jsx(
+                    DataTableEmptyContent,
+                    {
+                      title: renderEmptyContent.title,
+                      description: renderEmptyContent.description,
+                      columnsLength: columns.length
+                    }
+                  ) : renderEmptyContent
+                }
+              )
+            ]
+          }
+        ),
+        positionPagination.includes("bottom") && renderPagination()
+      ]
+    }
+  );
+};
+DataTable.displayName = "DataTable";
+function DataTablePagination({
+  table,
+  totalItems,
+  onPageChange,
+  variant = "ghost",
+  textOf,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center space-x-6 lg:space-x-8 w-full bg-transparent",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center text-base text-grays-scale29", children: [
+          table.getState().pagination.pageIndex + 1,
+          " -",
+          " ",
+          table.getState().pagination.pageSize,
+          " ",
+          textOf,
+          " ",
+          totalItems
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2"), children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant,
+              className: cn("h-8 p-0 hover:bg-transparent cursor-pointer"),
+              onClick: () => {
+                onPageChange(table.getState().pagination.pageIndex - 1);
+                table.previousPage();
+              },
+              disabled: !table.getCanPreviousPage(),
+              children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "h-5 w-5 text-grays-scale79" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant,
+              className: cn("h-8 p-0 hover:bg-transparent cursor-pointer"),
+              onClick: () => {
+                onPageChange(table.getState().pagination.pageIndex + 1);
+                table.nextPage();
+              },
+              disabled: !table.getCanNextPage(),
+              children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-5 w-5 text-grays-scale79" })
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function DataTableEmptyContent({
+  title,
+  description,
+  columnsLength
+}) {
+  return /* @__PURE__ */ jsx(TableRow, { className: "w-full border-grays-scale79 bg-white hover:bg-white", children: /* @__PURE__ */ jsx(
+    TableCell,
+    {
+      colSpan: columnsLength,
+      className: "text-center h-24 border-grays-scale79",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 items-center my-20", children: [
+        /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "h-44 w-48 text-grays-scale29" }),
+        /* @__PURE__ */ jsx("h2", { className: "text-[1.5rem] font-semibold text-grays-scale29", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "text-[1rem] text-grays-scale29", children: description })
+      ] })
+    }
+  ) });
+}
+function DataTableLoadingHeader({
+  columnsSkeleton
+}) {
+  return /* @__PURE__ */ jsx(TableRow, { className: cn("hover:bg-transparent"), children: Array.from({ length: columnsSkeleton }).map((_, index) => /* @__PURE__ */ jsx(
+    TableHead,
+    {
+      className: cn("text-grays-scale79 font-normal h-5 relative"),
+      children: /* @__PURE__ */ jsx(Skeleton, { className: "h-6 mb-2 w-full bg-grays-scale79" })
+    },
+    index
+  )) });
+}
+function DataTableLoadingContent({
+  visibleColumns = [],
+  columnsSkeleton
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: columnsSkeleton }).map((_, index) => /* @__PURE__ */ jsx(TableRow, { className: "border-grays-scale79", children: visibleColumns.map((_2, colIndex) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "flex justify-center items-center h-6 bg-gray-scale79 w-full", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full animate-loading rounded-none drop-shadow-2xl" }) }) }, colIndex)) }, index)) });
+}
+
+export { DataTable, SelectByType };

package/dist/date-picker.js

@@ -0,0 +1,92 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { parse, isValid, format } from 'date-fns';
+import { ptBR } from 'date-fns/locale';
+import { Calendar } from 'lucide-react';
+import { cn } from './lib/utils.js';
+import { Calendar as Calendar$1 } from './calendar.js';
+import { Input } from './input.js';
+import { Popover, PopoverTrigger, PopoverContent } from './popover.js';
+
+function DatePicker({
+  selected,
+  onSelect,
+  format: format$1 = "dd/MM/yyyy",
+  placeholder = "",
+  className = "",
+  ...props
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const handleInputChange = (e) => {
+    setInputValue(e.currentTarget.value);
+    const date = parse(e.currentTarget.value, format$1, /* @__PURE__ */ new Date());
+    if (isValid(date) && typeof onSelect === "function") ;
+  };
+  const handleSelect = (date) => {
+    if (date) {
+      setInputValue(format(date, format$1));
+      setIsOpen(false);
+    } else {
+      setInputValue("");
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      open: isOpen,
+      onOpenChange: (open) => {
+        setIsOpen(open);
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          PopoverTrigger,
+          {
+            onClick: (e) => {
+              if (isOpen) {
+                e.preventDefault();
+              }
+            },
+            children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(Calendar, { className: "w-4 h-4 absolute right-[10px] top-[10px]" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  placeholder,
+                  value: inputValue,
+                  onChange: handleInputChange,
+                  className: cn("pr-8", className)
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PopoverContent,
+          {
+            className: "w-auto p-0",
+            align: "start",
+            onOpenAutoFocus: (e) => {
+              e.preventDefault();
+            },
+            children: /* @__PURE__ */ jsx(
+              Calendar$1,
+              {
+                mode: "single",
+                locale: ptBR,
+                selected,
+                onSelect: handleSelect,
+                month: selected,
+                onMonthChange: onSelect,
+                ...props
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+DatePicker.displayName = "DatePicker";
+
+export { DatePicker };

package/dist/dialog.js

@@ -0,0 +1,95 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import { cn } from './lib/utils.js';
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    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;
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg 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: [
+        children,
+        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:brightness-125 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(Cross2Icon, { className: "h-5 w-5" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+const DialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
+DialogHeader.displayName = "DialogHeader";
+const DialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "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(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    ),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    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 };