lecom-ui 5.2.71 → 5.2.73

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/dist/components/Combobox/Combobox.js +5 -19
  2. package/dist/components/CustomDivider/CustomDivider.js +18 -36
  3. package/dist/components/DataTable/DataTable.utils.js +1 -5
  4. package/dist/components/DataTable/Table.js +40 -60
  5. package/dist/components/Sheet/Sheet.js +1 -31
  6. package/dist/components/Steps/{StepsTimeline.js → Steps.js} +1 -0
  7. package/dist/components/Switch/Switch.js +20 -5
  8. package/dist/components/TagInput/TagInput.js +55 -58
  9. package/dist/index.d.ts +67 -93
  10. package/dist/index.js +3 -4
  11. package/dist/style.min.css +1 -1
  12. package/package.json +4 -3
  13. package/dist/badge.js +0 -26
  14. package/dist/button-dropdown.js +0 -117
  15. package/dist/button.js +0 -104
  16. package/dist/calendar.js +0 -62
  17. package/dist/card.js +0 -56
  18. package/dist/checkbox.js +0 -55
  19. package/dist/collapse.js +0 -60
  20. package/dist/collapsible.js +0 -7
  21. package/dist/command.js +0 -107
  22. package/dist/components/DataTable/useOptimizedTable.js +0 -75
  23. package/dist/data-table/data-table.js +0 -490
  24. package/dist/date-picker.js +0 -92
  25. package/dist/dialog.js +0 -95
  26. package/dist/dropdown-menu.js +0 -138
  27. package/dist/fonts/Montserrat-Bold.otf +0 -0
  28. package/dist/fonts/Montserrat-Medium.otf +0 -0
  29. package/dist/fonts/Montserrat-Regular.otf +0 -0
  30. package/dist/fonts/Roboto-Bold.otf +0 -0
  31. package/dist/fonts/Roboto-Light.otf +0 -0
  32. package/dist/fonts/Roboto-Medium.otf +0 -0
  33. package/dist/fonts/Roboto-Regular.otf +0 -0
  34. package/dist/form.js +0 -102
  35. package/dist/header.js +0 -90
  36. package/dist/hook/useDebounce.js +0 -16
  37. package/dist/icon-handler.js +0 -72
  38. package/dist/icons/brandModules.js +0 -27
  39. package/dist/icons/companyLogo.js +0 -61
  40. package/dist/icons/createUseAuxiliary.js +0 -107
  41. package/dist/icons/footerInfo.js +0 -25
  42. package/dist/icons/logo_lecom.svg.js +0 -3
  43. package/dist/icons/newUpdate.js +0 -23
  44. package/dist/icons/robertyRPA.js +0 -30
  45. package/dist/ilustrations/access_denied.js +0 -252
  46. package/dist/ilustrations/page_not_found.js +0 -188
  47. package/dist/input.js +0 -42
  48. package/dist/label.js +0 -20
  49. package/dist/modal.js +0 -27
  50. package/dist/pagination.js +0 -474
  51. package/dist/plugin/extend.ts +0 -78
  52. package/dist/plugin/fontFaces.ts +0 -172
  53. package/dist/plugin/general.ts +0 -12
  54. package/dist/plugin/pluginDev.js +0 -5
  55. package/dist/plugin/pluginNext.js +0 -5
  56. package/dist/plugin/pluginVite.js +0 -5
  57. package/dist/plugin/template.ts +0 -31
  58. package/dist/plugin/typographies.ts +0 -152
  59. package/dist/plugin/varsTheme.ts +0 -79
  60. package/dist/plugin.cjs +0 -298
  61. package/dist/popover.js +0 -24
  62. package/dist/radio-group.js +0 -74
  63. package/dist/range-picker.js +0 -99
  64. package/dist/scroll-area.js +0 -37
  65. package/dist/search-bar.js +0 -151
  66. package/dist/select.js +0 -156
  67. package/dist/separator.js +0 -24
  68. package/dist/sheet.js +0 -106
  69. package/dist/sidebar.js +0 -188
  70. package/dist/skeleton.js +0 -17
  71. package/dist/slider.js +0 -23
  72. package/dist/status-screen.js +0 -71
  73. package/dist/switch.js +0 -27
  74. package/dist/table.js +0 -83
  75. package/dist/tabs.js +0 -44
  76. package/dist/tag.js +0 -33
  77. package/dist/textarea.js +0 -22
  78. package/dist/toast.js +0 -105
  79. package/dist/toaster.js +0 -23
  80. package/dist/tooltip.js +0 -133
  81. package/dist/use-toast.js +0 -121
@@ -1,490 +0,0 @@
1
- import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
- import { useState, useRef, useEffect } from 'react';
3
- import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, flexRender } from '@tanstack/react-table';
4
- import { ArrowUpDownIcon, TriangleAlertIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
5
- import { cn } from '../lib/utils.js';
6
- import { Button } from '../button.js';
7
- import { Skeleton } from '../skeleton.js';
8
- import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../table.js';
9
-
10
- const SelectByType = {
11
- SELECT_ALL: "all",
12
- SELECT_NONE: "none"
13
- };
14
- const DataTable = ({
15
- columns,
16
- dataSource,
17
- isLoading = false,
18
- renderEmptyContent,
19
- searchValue = "",
20
- searchableColumns = [],
21
- hiddenColumns = [],
22
- pagination = {
23
- controlExternal: false,
24
- currentPage: 0,
25
- pageSize: 10,
26
- totalPages: 0,
27
- totalItems: 0,
28
- position: "topRight",
29
- textOf: ""
30
- },
31
- rowSelection,
32
- showHeaderDivider,
33
- className,
34
- classNameTable,
35
- classNameHeader,
36
- classNameBody
37
- }) => {
38
- const [sorting, setSorting] = useState([]);
39
- const [columnFilters, setColumnFilters] = useState([]);
40
- const [columnVisibility, setColumnVisibility] = useState({});
41
- const [internalRowSelection, setInternalRowSelection] = useState({});
42
- const [search, setSearch] = useState(searchValue);
43
- const [columnPinning, setColumnPinning] = useState({
44
- left: [],
45
- right: []
46
- });
47
- const [page, setPage] = useState(pagination.currentPage ?? 0);
48
- const [pageSearch, setPageSearch] = useState(0);
49
- const [size, setSize] = useState(pagination.pageSize ?? 10);
50
- const selectedRowsRef = useRef([]);
51
- const tableRef = useRef(null);
52
- const table = useReactTable({
53
- data: dataSource,
54
- columns,
55
- getCoreRowModel: getCoreRowModel(),
56
- onSortingChange: setSorting,
57
- getSortedRowModel: getSortedRowModel(),
58
- onColumnFiltersChange: setColumnFilters,
59
- getFilteredRowModel: getFilteredRowModel(),
60
- onColumnVisibilityChange: setColumnVisibility,
61
- onColumnPinningChange: setColumnPinning,
62
- onRowSelectionChange: setInternalRowSelection,
63
- getPaginationRowModel: getPaginationRowModel(),
64
- state: {
65
- sorting,
66
- columnPinning,
67
- columnFilters,
68
- columnVisibility,
69
- rowSelection: internalRowSelection,
70
- pagination: { pageIndex: page, pageSize: size }
71
- }
72
- });
73
- useEffect(() => {
74
- setSearch(searchValue);
75
- }, [searchValue]);
76
- useEffect(() => {
77
- if (!table || !Array.isArray(searchableColumns))
78
- return;
79
- if (search.trim() === "") {
80
- searchableColumns.forEach((columnId) => {
81
- const column = table.getColumn(columnId);
82
- if (column) {
83
- column.setFilterValue("");
84
- }
85
- });
86
- setPage(pageSearch);
87
- table.setPageIndex(pageSearch);
88
- } else {
89
- searchableColumns.forEach((columnId) => {
90
- const column = table.getColumn(columnId);
91
- if (column)
92
- column.setFilterValue(search.trim());
93
- });
94
- setPage(0);
95
- table.setPageIndex(0);
96
- }
97
- }, [search, searchableColumns, table]);
98
- const total = pagination.totalItems || table.getPageCount() * size;
99
- const handlePageChange = (newPage) => {
100
- setPage(newPage);
101
- setPageSearch(newPage);
102
- table.setPageIndex(newPage);
103
- };
104
- useEffect(() => {
105
- if (pagination.pageSize !== void 0) {
106
- setSize(pagination.pageSize);
107
- }
108
- }, [pagination.pageSize]);
109
- useEffect(() => {
110
- if (pagination.currentPage !== void 0 && pagination.currentPage <= (pagination.totalPages ?? 0)) {
111
- setPage(pagination.currentPage);
112
- }
113
- }, [pagination.currentPage, pagination.totalPages]);
114
- useEffect(() => {
115
- if (!rowSelection) {
116
- return;
117
- }
118
- if (rowSelection?.controlExternal) {
119
- if (rowSelection?.selectedRowKeys.length === 0) {
120
- if (dataSource.length === Object.keys(table.getState().rowSelection).length) {
121
- table.setRowSelection({});
122
- }
123
- return;
124
- }
125
- const validRowSelection = rowSelection.selectedRowKeys.reduce(
126
- (acc, id) => {
127
- const rowIndex = table.getCoreRowModel().rows.findIndex((row) => {
128
- const rowId = "id" in row.original ? String(row.original.id) : String(row.id);
129
- return rowId === id;
130
- });
131
- if (rowIndex !== -1) {
132
- acc[rowIndex] = true;
133
- }
134
- return acc;
135
- },
136
- {}
137
- );
138
- table.setRowSelection(validRowSelection);
139
- }
140
- }, [rowSelection?.controlExternal, rowSelection?.selectedRowKeys, table]);
141
- useEffect(() => {
142
- if (!rowSelection || rowSelection?.controlExternal) {
143
- return;
144
- }
145
- if (rowSelection?.selectBy?.columnId === SelectByType.SELECT_ALL) {
146
- const allRows = table.getRowModel().rows.map((row) => row.id);
147
- if (rowSelection && rowSelection.onChange)
148
- rowSelection.onChange(allRows);
149
- table.setRowSelection(
150
- allRows.reduce((acc, id) => ({ ...acc, [id]: true }), {})
151
- );
152
- } else if (rowSelection?.selectBy?.columnId === SelectByType.SELECT_NONE) {
153
- if (rowSelection && rowSelection.onChange)
154
- rowSelection.onChange([]);
155
- table.setRowSelection({});
156
- } else {
157
- const selectedRows = table.getRowModel().rows.reduce((acc, row) => {
158
- if (rowSelection?.selectBy && row.original[rowSelection?.selectBy.columnId] === rowSelection?.selectBy.value) {
159
- acc[row.id] = true;
160
- }
161
- return acc;
162
- }, {});
163
- table.setRowSelection(selectedRows);
164
- if (rowSelection && rowSelection.onChange)
165
- rowSelection.onChange(Object.keys(selectedRows));
166
- table.setRowSelection(selectedRows);
167
- }
168
- }, [rowSelection?.selectBy, table, rowSelection?.controlExternal]);
169
- useEffect(() => {
170
- if (!rowSelection) {
171
- return;
172
- }
173
- const currentSelection = Object.keys(table.getState().rowSelection).map(
174
- (id) => {
175
- const row = table.getRow(id);
176
- return "id" in row.original ? String(row.original.id) : String(row.id);
177
- }
178
- );
179
- const hasSelectionChanged = currentSelection.length !== selectedRowsRef.current.length || !currentSelection.every((id, idx) => id === selectedRowsRef.current[idx]);
180
- const currentRows = table.getRowModel().rows;
181
- const selectedRowsVisible = currentRows.some(
182
- (row) => currentSelection.includes(
183
- "id" in row.original ? String(row.original.id) : String(row.id)
184
- )
185
- );
186
- if (hasSelectionChanged) {
187
- selectedRowsRef.current = currentSelection;
188
- rowSelection?.onChange?.(currentSelection);
189
- }
190
- if (!selectedRowsVisible && currentSelection.length > 0 && (rowSelection?.selectedRowKeys?.length ?? 0) > 0) {
191
- selectedRowsRef.current = [];
192
- rowSelection?.onChange?.([]);
193
- } else if (selectedRowsVisible && currentSelection.length === 0 && selectedRowsRef.current.length > 0) {
194
- rowSelection?.onChange?.(selectedRowsRef.current);
195
- }
196
- }, [table.getState().rowSelection, page]);
197
- useEffect(() => {
198
- const visibility = {};
199
- columns.forEach((column) => {
200
- if ("accessorKey" in column) {
201
- visibility[column.accessorKey] = !hiddenColumns.includes(
202
- column.accessorKey
203
- );
204
- }
205
- });
206
- setColumnVisibility(visibility);
207
- }, [hiddenColumns, columns]);
208
- const visibleColumns = columns.filter(
209
- (column) => "accessorKey" in column && !hiddenColumns.includes(column.accessorKey)
210
- );
211
- useEffect(() => {
212
- columns.forEach((column) => {
213
- if (column.meta && "isFixed" in column.meta && column.meta.isFixed) {
214
- if (column.id) {
215
- table.getColumn(column.id)?.pin(column.meta.isFixed);
216
- }
217
- }
218
- });
219
- }, [columns, table]);
220
- const getCommonPinningStyles = (column) => {
221
- const isPinned = column.getIsPinned();
222
- const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
223
- const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
224
- return {
225
- 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,
226
- left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
227
- right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
228
- opacity: isPinned ? 0.96 : 1,
229
- position: isPinned ? "sticky" : "relative",
230
- backgroundColor: isPinned ? "white" : void 0,
231
- zIndex: isPinned ? 20 : 0
232
- };
233
- };
234
- const tableWidth = (columnPinning.left?.length ?? 0) > 0 || (columnPinning.right?.length ?? 0) > 0 ? table.getTotalSize() : "100%";
235
- const columnsSkeleton = visibleColumns.length;
236
- const positionPagination = pagination.position ?? "topRight";
237
- const renderPagination = () => !pagination?.controlExternal && /* @__PURE__ */ jsx(
238
- DataTablePagination,
239
- {
240
- table,
241
- textOf: pagination.textOf,
242
- onPageChange: handlePageChange,
243
- totalItems: total,
244
- className: cn(
245
- "my-1 hover:bg-transparent",
246
- (positionPagination === "topLeft" || positionPagination === "bottomLeft") && "justify-start",
247
- (positionPagination === "topRight" || positionPagination === "bottomRight") && "justify-end",
248
- (positionPagination === "topCenter" || positionPagination === "bottomCenter") && "justify-center"
249
- )
250
- }
251
- );
252
- return /* @__PURE__ */ jsxs(
253
- "div",
254
- {
255
- className: cn(
256
- "rounded-md w-full overflow-auto scrollbar-thin relative",
257
- className
258
- ),
259
- children: [
260
- positionPagination.includes("top") && renderPagination(),
261
- /* @__PURE__ */ jsxs(
262
- Table,
263
- {
264
- ref: tableRef,
265
- className: cn(classNameTable),
266
- style: {
267
- width: tableWidth,
268
- borderCollapse: "separate",
269
- borderSpacing: 0,
270
- margin: tableWidth !== "100%" ? "0 auto" : void 0
271
- },
272
- children: [
273
- /* @__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(
274
- TableRow,
275
- {
276
- className: cn("hover:bg-transparent"),
277
- children: headerGroup.headers.map((header, headerIndex) => {
278
- const columnDef = header.column.columnDef;
279
- const size2 = header.column.getSize() ?? "1fr";
280
- const alignment = columnDef.meta && "align" in columnDef.meta ? columnDef.meta.align : "left";
281
- const alignmentClass = alignment === "center" ? "justify-center" : alignment === "right" ? "justify-end" : "justify-start";
282
- const hasAccessorKey = "accessorKey" in columnDef;
283
- const isFirstColumn = headerIndex === 0;
284
- const isLastColumn = headerIndex === headerGroup.headers.length - 1;
285
- const hasRightAccessorKey = !isLastColumn && "accessorKey" in headerGroup.headers[headerIndex + 1].column.columnDef;
286
- const hasLeftAccessorKey = !isFirstColumn && "accessorKey" in headerGroup.headers[headerIndex - 1].column.columnDef;
287
- return /* @__PURE__ */ jsxs(
288
- TableHead,
289
- {
290
- className: cn("h-5"),
291
- colSpan: header.colSpan,
292
- style: {
293
- width: size2,
294
- ...getCommonPinningStyles(header.column)
295
- },
296
- children: [
297
- /* @__PURE__ */ jsx(
298
- "div",
299
- {
300
- className: cn(
301
- `text-base text-grays-scale29 font-normal font-roboto p-0 cursor-pointer flex items-center ${alignmentClass} whitespace-nowrap`
302
- ),
303
- children: header.isPlaceholder ? null : /* @__PURE__ */ jsx(Fragment, { children: columnDef.enableSorting && header.column.getCanSort() ? /* @__PURE__ */ jsxs(Fragment, { children: [
304
- flexRender(
305
- columnDef.header,
306
- header.getContext()
307
- ),
308
- /* @__PURE__ */ jsx(
309
- ArrowUpDownIcon,
310
- {
311
- className: "flex mt-1 ml-2 h-3 w-3",
312
- onClick: () => header.column.toggleSorting(
313
- header.column.getIsSorted() === "asc"
314
- )
315
- }
316
- )
317
- ] }) : flexRender(columnDef.header, header.getContext()) })
318
- }
319
- ),
320
- showHeaderDivider && /* @__PURE__ */ jsxs(Fragment, { children: [
321
- hasAccessorKey && hasLeftAccessorKey && /* @__PURE__ */ jsx("span", { className: "absolute top-3 left-0 bottom-0 h-3 border-l border-grays-scale89" }),
322
- hasAccessorKey && hasRightAccessorKey && /* @__PURE__ */ jsx("span", { className: "absolute top-3 right-0 bottom-0 h-3 border-r border-grays-scale89" })
323
- ] })
324
- ]
325
- },
326
- header.id
327
- );
328
- })
329
- },
330
- headerGroup.id
331
- )) }),
332
- /* @__PURE__ */ jsx(
333
- TableBody,
334
- {
335
- className: cn(
336
- "border-t border-grays-scale79",
337
- isLoading && "overflow-hidden",
338
- classNameBody
339
- ),
340
- children: isLoading ? /* @__PURE__ */ jsx(
341
- DataTableLoadingContent,
342
- {
343
- columnsSkeleton,
344
- visibleColumns
345
- }
346
- ) : table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => {
347
- return /* @__PURE__ */ jsx(
348
- TableRow,
349
- {
350
- "data-state": row.getIsSelected() && "selected",
351
- className: "border-grays-scale89 hover:bg-gray-50",
352
- style: {
353
- backgroundColor: row.getIsSelected() ? "#e6f7ff" : ""
354
- },
355
- children: row.getVisibleCells().map((cell) => {
356
- const columnDef = cell.column.columnDef;
357
- const size2 = cell.column.getSize() ?? "1fr";
358
- const alignment = columnDef.meta && "align" in columnDef.meta ? columnDef.meta.align : "left";
359
- const alignmentClass = alignment === "center" ? "text-center" : alignment === "right" ? "text-right" : "text-left";
360
- return /* @__PURE__ */ jsx(
361
- TableCell,
362
- {
363
- style: {
364
- width: size2,
365
- ...getCommonPinningStyles(cell.column)
366
- },
367
- className: cn(alignmentClass),
368
- children: flexRender(columnDef.cell, cell.getContext())
369
- },
370
- cell.id
371
- );
372
- })
373
- },
374
- row.id
375
- );
376
- }) : renderEmptyContent && typeof renderEmptyContent === "object" && "title" in renderEmptyContent ? /* @__PURE__ */ jsx(
377
- DataTableEmptyContent,
378
- {
379
- title: renderEmptyContent.title,
380
- description: renderEmptyContent.description,
381
- columnsLength: columns.length
382
- }
383
- ) : renderEmptyContent
384
- }
385
- )
386
- ]
387
- }
388
- ),
389
- positionPagination.includes("bottom") && renderPagination()
390
- ]
391
- }
392
- );
393
- };
394
- DataTable.displayName = "DataTable";
395
- function DataTablePagination({
396
- table,
397
- totalItems,
398
- onPageChange,
399
- variant = "ghost",
400
- textOf,
401
- className
402
- }) {
403
- return /* @__PURE__ */ jsx(
404
- "div",
405
- {
406
- className: cn(
407
- "flex items-center space-x-6 lg:space-x-8 w-full bg-transparent",
408
- className
409
- ),
410
- children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-5", children: [
411
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center text-base text-grays-scale29", children: [
412
- table.getState().pagination.pageIndex + 1,
413
- " -",
414
- " ",
415
- table.getState().pagination.pageSize,
416
- " ",
417
- textOf,
418
- " ",
419
- totalItems
420
- ] }),
421
- /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2"), children: [
422
- /* @__PURE__ */ jsx(
423
- Button,
424
- {
425
- variant,
426
- className: cn("h-8 p-0 hover:bg-transparent cursor-pointer"),
427
- onClick: () => {
428
- onPageChange(table.getState().pagination.pageIndex - 1);
429
- table.previousPage();
430
- },
431
- disabled: !table.getCanPreviousPage(),
432
- children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "h-5 w-5 text-grays-scale79" })
433
- }
434
- ),
435
- /* @__PURE__ */ jsx(
436
- Button,
437
- {
438
- variant,
439
- className: cn("h-8 p-0 hover:bg-transparent cursor-pointer"),
440
- onClick: () => {
441
- onPageChange(table.getState().pagination.pageIndex + 1);
442
- table.nextPage();
443
- },
444
- disabled: !table.getCanNextPage(),
445
- children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-5 w-5 text-grays-scale79" })
446
- }
447
- )
448
- ] })
449
- ] })
450
- }
451
- );
452
- }
453
- function DataTableEmptyContent({
454
- title,
455
- description,
456
- columnsLength
457
- }) {
458
- return /* @__PURE__ */ jsx(TableRow, { className: "w-full border-grays-scale79 bg-white hover:bg-white", children: /* @__PURE__ */ jsx(
459
- TableCell,
460
- {
461
- colSpan: columnsLength,
462
- className: "text-center h-24 border-grays-scale79",
463
- children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 items-center my-20", children: [
464
- /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "h-44 w-48 text-grays-scale29" }),
465
- /* @__PURE__ */ jsx("h2", { className: "text-[1.5rem] font-semibold text-grays-scale29", children: title }),
466
- /* @__PURE__ */ jsx("p", { className: "text-[1rem] text-grays-scale29", children: description })
467
- ] })
468
- }
469
- ) });
470
- }
471
- function DataTableLoadingHeader({
472
- columnsSkeleton
473
- }) {
474
- return /* @__PURE__ */ jsx(TableRow, { className: cn("hover:bg-transparent"), children: Array.from({ length: columnsSkeleton }).map((_, index) => /* @__PURE__ */ jsx(
475
- TableHead,
476
- {
477
- className: cn("text-grays-scale79 font-normal h-5 relative"),
478
- children: /* @__PURE__ */ jsx(Skeleton, { className: "h-6 mb-2 w-full bg-grays-scale79" })
479
- },
480
- index
481
- )) });
482
- }
483
- function DataTableLoadingContent({
484
- visibleColumns = [],
485
- columnsSkeleton
486
- }) {
487
- 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)) });
488
- }
489
-
490
- export { DataTable, SelectByType };
@@ -1,92 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { useState } from 'react';
3
- import { parse, isValid, format } from 'date-fns';
4
- import { ptBR } from 'date-fns/locale';
5
- import { Calendar } from 'lucide-react';
6
- import { cn } from './lib/utils.js';
7
- import { Calendar as Calendar$1 } from './calendar.js';
8
- import { Input } from './input.js';
9
- import { Popover, PopoverTrigger, PopoverContent } from './popover.js';
10
-
11
- function DatePicker({
12
- selected,
13
- onSelect,
14
- format: format$1 = "dd/MM/yyyy",
15
- placeholder = "",
16
- className = "",
17
- ...props
18
- }) {
19
- const [isOpen, setIsOpen] = useState(false);
20
- const [inputValue, setInputValue] = useState("");
21
- const handleInputChange = (e) => {
22
- setInputValue(e.currentTarget.value);
23
- const date = parse(e.currentTarget.value, format$1, /* @__PURE__ */ new Date());
24
- if (isValid(date) && typeof onSelect === "function") ;
25
- };
26
- const handleSelect = (date) => {
27
- if (date) {
28
- setInputValue(format(date, format$1));
29
- setIsOpen(false);
30
- } else {
31
- setInputValue("");
32
- }
33
- };
34
- return /* @__PURE__ */ jsxs(
35
- Popover,
36
- {
37
- open: isOpen,
38
- onOpenChange: (open) => {
39
- setIsOpen(open);
40
- },
41
- children: [
42
- /* @__PURE__ */ jsx(
43
- PopoverTrigger,
44
- {
45
- onClick: (e) => {
46
- if (isOpen) {
47
- e.preventDefault();
48
- }
49
- },
50
- children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
51
- /* @__PURE__ */ jsx(Calendar, { className: "w-4 h-4 absolute right-[10px] top-[10px]" }),
52
- /* @__PURE__ */ jsx(
53
- Input,
54
- {
55
- placeholder,
56
- value: inputValue,
57
- onChange: handleInputChange,
58
- className: cn("pr-8", className)
59
- }
60
- )
61
- ] })
62
- }
63
- ),
64
- /* @__PURE__ */ jsx(
65
- PopoverContent,
66
- {
67
- className: "w-auto p-0",
68
- align: "start",
69
- onOpenAutoFocus: (e) => {
70
- e.preventDefault();
71
- },
72
- children: /* @__PURE__ */ jsx(
73
- Calendar$1,
74
- {
75
- mode: "single",
76
- locale: ptBR,
77
- selected,
78
- onSelect: handleSelect,
79
- month: selected,
80
- onMonthChange: onSelect,
81
- ...props
82
- }
83
- )
84
- }
85
- )
86
- ]
87
- }
88
- );
89
- }
90
- DatePicker.displayName = "DatePicker";
91
-
92
- export { DatePicker };
package/dist/dialog.js DELETED
@@ -1,95 +0,0 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
2
- import * as React from 'react';
3
- import * as DialogPrimitive from '@radix-ui/react-dialog';
4
- import { Cross2Icon } from '@radix-ui/react-icons';
5
- import { cn } from './lib/utils.js';
6
-
7
- const Dialog = DialogPrimitive.Root;
8
- const DialogTrigger = DialogPrimitive.Trigger;
9
- const DialogPortal = DialogPrimitive.Portal;
10
- const DialogClose = DialogPrimitive.Close;
11
- const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
12
- DialogPrimitive.Overlay,
13
- {
14
- ref,
15
- className: cn(
16
- "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",
17
- className
18
- ),
19
- ...props
20
- }
21
- ));
22
- DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
23
- const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
24
- /* @__PURE__ */ jsx(DialogOverlay, {}),
25
- /* @__PURE__ */ jsxs(
26
- DialogPrimitive.Content,
27
- {
28
- ref,
29
- className: cn(
30
- "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",
31
- className
32
- ),
33
- ...props,
34
- children: [
35
- children,
36
- /* @__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: [
37
- /* @__PURE__ */ jsx(Cross2Icon, { className: "h-5 w-5" }),
38
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
39
- ] })
40
- ]
41
- }
42
- )
43
- ] }));
44
- DialogContent.displayName = DialogPrimitive.Content.displayName;
45
- const DialogHeader = ({
46
- className,
47
- ...props
48
- }) => /* @__PURE__ */ jsx(
49
- "div",
50
- {
51
- className: cn(
52
- "flex flex-col space-y-1.5 text-center sm:text-left",
53
- className
54
- ),
55
- ...props
56
- }
57
- );
58
- DialogHeader.displayName = "DialogHeader";
59
- const DialogFooter = ({
60
- className,
61
- ...props
62
- }) => /* @__PURE__ */ jsx(
63
- "div",
64
- {
65
- className: cn(
66
- "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
67
- className
68
- ),
69
- ...props
70
- }
71
- );
72
- DialogFooter.displayName = "DialogFooter";
73
- const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
74
- DialogPrimitive.Title,
75
- {
76
- ref,
77
- className: cn(
78
- "text-lg font-semibold leading-none tracking-tight",
79
- className
80
- ),
81
- ...props
82
- }
83
- ));
84
- DialogTitle.displayName = DialogPrimitive.Title.displayName;
85
- const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
86
- DialogPrimitive.Description,
87
- {
88
- ref,
89
- className: cn("text-sm text-muted-foreground", className),
90
- ...props
91
- }
92
- ));
93
- DialogDescription.displayName = DialogPrimitive.Description.displayName;
94
-
95
- export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };