react-restyle-components 0.4.31 → 0.4.32
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.
- package/lib/src/core-components/src/components/Table/Table.d.ts.map +1 -1
- package/lib/src/core-components/src/components/Table/Table.js +60 -28
- package/lib/src/core-components/src/components/Table/elements.d.ts +7 -0
- package/lib/src/core-components/src/components/Table/elements.d.ts.map +1 -1
- package/lib/src/core-components/src/components/Table/elements.js +85 -0
- package/lib/src/core-components/src/tc.global.css +5 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Table/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Table/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAC;AA4Cf,OAAO,EAAC,UAAU,EAAc,MAAM,SAAS,CAAC;AA6NhD,eAAO,MAAM,KAAK;;MAyxDb,MAAM,YAAY,CAAC;AAIxB,eAAe,KAAK,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import React, { forwardRef, useState, useCallback, useMemo, useEffect, useRef, } from 'react';
|
|
4
|
-
import { TableRoot, Toolbar, ToolbarGroup, SearchInput, ToolbarButton, TableWrapper, StyledTable, TableHeader, HeaderRow, HeaderCell, TableBody, TableRow, TableCell, Checkbox, ExpandButton, ExpandedRow, ExpandedCell, TableFooter, FooterRow, FooterCell, PaginationWrapper, PaginationInfo, PaginationControls, PageButton, PageSizeSelect, QuickJumper, EmptyState, LoadingOverlay, LoadingSpinner, EditableCell, CellEditor, ColumnTogglePanel, ColumnToggleHeader, ColumnToggleSearch, ColumnToggleList, ColumnToggleItem, } from './elements';
|
|
4
|
+
import { TableRoot, Toolbar, ToolbarGroup, SearchInput, ToolbarButton, TableWrapper, StyledTable, TableHeader, HeaderRow, HeaderCell, TableBody, TableRow, TableCell, Checkbox, ExpandButton, ExpandedRow, ExpandedCell, TableFooter, FooterRow, FooterCell, PaginationWrapper, PaginationInfo, PaginationControls, PageButton, PageSizeSelect, QuickJumper, EmptyState, LoadingOverlay, LoadingSpinner, EditableCell, CellEditor, ColumnTogglePanel, ColumnToggleHeader, ColumnToggleSearch, ColumnToggleList, ColumnToggleItem, SelectionIndicator, SelectionCount, } from './elements';
|
|
5
5
|
import { useSortState, useFilterState, usePaginationState, useRowSelection, useRowExpansion, useColumnVisibility, useTableDebounce, sortData, filterData, paginateData, getNestedValue, exportToCSV, } from './hooks';
|
|
6
6
|
import { getFilterComponent } from './filters';
|
|
7
7
|
import { Tooltip } from '../Tooltip';
|
|
@@ -87,10 +87,21 @@ export const Table = forwardRef(function TableComponent(props, ref) {
|
|
|
87
87
|
...rowSelection,
|
|
88
88
|
onChange: (keys, rows) => {
|
|
89
89
|
rowSelection?.onChange?.(keys, rows);
|
|
90
|
-
onSelectedRow
|
|
90
|
+
// Note: onSelectedRow is only called when user clicks the "X Selected" button
|
|
91
91
|
},
|
|
92
92
|
}
|
|
93
93
|
: rowSelection;
|
|
94
|
+
// Default pagination config
|
|
95
|
+
const resolvedPaginationConfig = pagination
|
|
96
|
+
? {
|
|
97
|
+
pageSize: 10,
|
|
98
|
+
showSizeChanger: true,
|
|
99
|
+
showQuickJumper: true,
|
|
100
|
+
showTotal: true,
|
|
101
|
+
pageSizeOptions: [10, 20, 30, 50],
|
|
102
|
+
...paginationConfig,
|
|
103
|
+
}
|
|
104
|
+
: paginationConfig;
|
|
94
105
|
// Size configuration
|
|
95
106
|
const sizeConfig = {
|
|
96
107
|
small: { padding: '4px 8px', fontSize: '12px' },
|
|
@@ -100,11 +111,13 @@ export const Table = forwardRef(function TableComponent(props, ref) {
|
|
|
100
111
|
// Refs
|
|
101
112
|
const tableRef = useRef(null);
|
|
102
113
|
const columnToggleRef = useRef(null);
|
|
114
|
+
const prevSelectionCountRef = useRef(0);
|
|
103
115
|
// State
|
|
104
116
|
const [internalSearchValue, setInternalSearchValue] = useState(defaultSearchValue);
|
|
105
117
|
const [internalShowFilters, setInternalShowFilters] = useState(defaultShowFilters);
|
|
106
118
|
const [columnToggleOpen, setColumnToggleOpen] = useState(false);
|
|
107
119
|
const [columnSearch, setColumnSearch] = useState('');
|
|
120
|
+
const [selectionAnimation, setSelectionAnimation] = useState('none');
|
|
108
121
|
// Close column toggle panel on outside click
|
|
109
122
|
useEffect(() => {
|
|
110
123
|
if (!columnToggleOpen)
|
|
@@ -147,9 +160,9 @@ export const Table = forwardRef(function TableComponent(props, ref) {
|
|
|
147
160
|
const filterTypeRef = useRef('filter');
|
|
148
161
|
const onFilterRef = useRef(onFilter);
|
|
149
162
|
// Pagination state
|
|
150
|
-
const { page, pageSize, totalPages, goToPage, goToNextPage, goToPrevPage, goToFirstPage, goToLastPage, changePageSize, } = usePaginationState(
|
|
163
|
+
const { page, pageSize, totalPages, goToPage, goToNextPage, goToPrevPage, goToFirstPage, goToLastPage, changePageSize, } = usePaginationState(resolvedPaginationConfig?.page || 0, resolvedPaginationConfig?.pageSize || 10, totalSize ?? data.length);
|
|
151
164
|
// Row selection
|
|
152
|
-
const { selectedKeys, isSelected, toggleRow, toggleAll, isAllSelected, isIndeterminate, } = useRowSelection(data,
|
|
165
|
+
const { selectedKeys, isSelected, toggleRow, toggleAll, isAllSelected, isIndeterminate, } = useRowSelection(data, resolvedRowSelection?.keyField || keyField, resolvedRowSelection?.mode || 'none', resolvedRowSelection?.selectedRowKeys, resolvedRowSelection?.getCheckboxProps);
|
|
153
166
|
// Row expansion
|
|
154
167
|
const { expandedKeys, isExpanded, toggleExpand } = useRowExpansion(expandable?.keyField || keyField, expandable?.defaultExpandedRowKeys, expandable?.expandedRowKeys, expandable?.accordion);
|
|
155
168
|
// Column visibility
|
|
@@ -175,6 +188,23 @@ export const Table = forwardRef(function TableComponent(props, ref) {
|
|
|
175
188
|
// Reset the flag after calling onFilter to prevent duplicate calls
|
|
176
189
|
shouldCallOnFilter.current = false;
|
|
177
190
|
}, [debouncedSearchValue, debouncedFilters, page, pageSize]);
|
|
191
|
+
// Track selection count changes for animation
|
|
192
|
+
useEffect(() => {
|
|
193
|
+
const currentCount = selectedKeys.size;
|
|
194
|
+
const prevCount = prevSelectionCountRef.current;
|
|
195
|
+
if (currentCount > prevCount) {
|
|
196
|
+
setSelectionAnimation('up');
|
|
197
|
+
}
|
|
198
|
+
else if (currentCount < prevCount) {
|
|
199
|
+
setSelectionAnimation('down');
|
|
200
|
+
}
|
|
201
|
+
prevSelectionCountRef.current = currentCount;
|
|
202
|
+
// Reset animation after it completes
|
|
203
|
+
const timer = setTimeout(() => {
|
|
204
|
+
setSelectionAnimation('none');
|
|
205
|
+
}, 300);
|
|
206
|
+
return () => clearTimeout(timer);
|
|
207
|
+
}, [selectedKeys.size]);
|
|
178
208
|
// Process data (filter, sort, paginate)
|
|
179
209
|
const processedData = useMemo(() => {
|
|
180
210
|
if (remote) {
|
|
@@ -264,10 +294,10 @@ export const Table = forwardRef(function TableComponent(props, ref) {
|
|
|
264
294
|
// Handle row click
|
|
265
295
|
const handleRowClick = useCallback((row, rowIndex, e) => {
|
|
266
296
|
// Selection handling
|
|
267
|
-
if (
|
|
297
|
+
if (resolvedRowSelection?.mode && resolvedRowSelection.mode !== 'none') {
|
|
268
298
|
const result = toggleRow(row);
|
|
269
299
|
if (result) {
|
|
270
|
-
|
|
300
|
+
resolvedRowSelection?.onChange?.(result.selectedKeys, result.selectedRows);
|
|
271
301
|
}
|
|
272
302
|
}
|
|
273
303
|
// Expand by click
|
|
@@ -493,16 +523,16 @@ export const Table = forwardRef(function TableComponent(props, ref) {
|
|
|
493
523
|
e.stopPropagation();
|
|
494
524
|
const result = toggleRow(row);
|
|
495
525
|
if (result) {
|
|
496
|
-
|
|
526
|
+
resolvedRowSelection?.onChange?.(result.selectedKeys, result.selectedRows);
|
|
497
527
|
}
|
|
498
528
|
}, [toggleRow, rowSelection]);
|
|
499
529
|
// Handle select all
|
|
500
530
|
const handleSelectAllChange = useCallback(() => {
|
|
501
531
|
const result = toggleAll(!isAllSelected);
|
|
502
532
|
if (result) {
|
|
503
|
-
|
|
533
|
+
resolvedRowSelection?.onChange?.(result.selectedKeys, result.selectedRows);
|
|
504
534
|
}
|
|
505
|
-
}, [toggleAll, isAllSelected,
|
|
535
|
+
}, [toggleAll, isAllSelected, resolvedRowSelection]);
|
|
506
536
|
// Handle expand toggle
|
|
507
537
|
const handleExpandClick = useCallback((row, e) => {
|
|
508
538
|
e.stopPropagation();
|
|
@@ -618,10 +648,10 @@ export const Table = forwardRef(function TableComponent(props, ref) {
|
|
|
618
648
|
const actualTotalPages = Math.ceil(calculatedTotal / pageSize) || 1;
|
|
619
649
|
const startItem = page * pageSize + 1;
|
|
620
650
|
const endItem = Math.min((page + 1) * pageSize, calculatedTotal);
|
|
621
|
-
const showTotal =
|
|
651
|
+
const showTotal = resolvedPaginationConfig?.showTotal === true
|
|
622
652
|
? `Showing ${startItem} to ${endItem} of ${calculatedTotal} Results`
|
|
623
|
-
: typeof
|
|
624
|
-
?
|
|
653
|
+
: typeof resolvedPaginationConfig?.showTotal === 'function'
|
|
654
|
+
? resolvedPaginationConfig.showTotal(calculatedTotal, [startItem, endItem])
|
|
625
655
|
: null;
|
|
626
656
|
// Generate page numbers
|
|
627
657
|
const getPageNumbers = () => {
|
|
@@ -655,10 +685,12 @@ export const Table = forwardRef(function TableComponent(props, ref) {
|
|
|
655
685
|
}
|
|
656
686
|
return pages;
|
|
657
687
|
};
|
|
658
|
-
return (_jsxs(PaginationWrapper, { className: classNames.pagination, style: styles.pagination, children: [_jsxs(ToolbarGroup, { children: [
|
|
688
|
+
return (_jsxs(PaginationWrapper, { className: classNames.pagination, style: styles.pagination, children: [_jsxs(ToolbarGroup, { children: [(resolvedRowSelection?.mode === 'checkbox' || isSelectRow) && selectedKeys.size > 0 && (_jsxs(SelectionIndicator, { onClick: () => {
|
|
659
689
|
const selectedRows = data.filter((row) => selectedKeys.has(getRowKey(row)));
|
|
660
|
-
|
|
661
|
-
|
|
690
|
+
resolvedRowSelection?.onChange?.(Array.from(selectedKeys), selectedRows);
|
|
691
|
+
// Call onSelectedRow only when user clicks this button
|
|
692
|
+
onSelectedRow?.(selectedRows);
|
|
693
|
+
}, children: [_jsx(SelectionCount, { "$animate": selectionAnimation, children: selectedKeys.size }, selectedKeys.size), _jsx("span", { children: "Selected" })] })), resolvedPaginationConfig?.showSizeChanger !== false && (_jsx(PageSizeSelect, { value: pageSize, onChange: (e) => handlePageSizeChange(Number(e.target.value)), children: (resolvedPaginationConfig?.pageSizeOptions || [10, 20, 30, 50]).map((size) => (_jsx("option", { value: size, children: size }, size))) }))] }), _jsxs(PaginationControls, { children: [_jsx(PageButton, { onClick: goToFirstPage, disabled: page === 0, children: _jsx(ChevronsLeftIcon, {}) }), _jsx(PageButton, { onClick: goToPrevPage, disabled: page === 0, children: _jsx(ChevronLeftIcon, {}) }), getPageNumbers().map((p, i) => typeof p === 'string' ? (_jsx("span", { style: { padding: '0 4px', color: 'white' }, children: p }, `ellipsis-${i}`)) : (_jsx(PageButton, { "$active": p === page, onClick: () => handlePageChange(p), children: p + 1 }, p))), _jsx(PageButton, { onClick: goToNextPage, disabled: page >= actualTotalPages - 1, children: _jsx(ChevronRightIcon, {}) }), _jsx(PageButton, { onClick: goToLastPage, disabled: page >= actualTotalPages - 1, children: _jsx(ChevronsRightIcon, {}) })] }), showTotal && _jsx(PaginationInfo, { children: showTotal }), resolvedPaginationConfig?.showQuickJumper && (_jsxs(QuickJumper, { children: ["Go to", _jsx("input", { type: "number", min: 1, max: actualTotalPages, placeholder: "#", onKeyDown: (e) => {
|
|
662
694
|
if (e.key === 'Enter') {
|
|
663
695
|
const target = e.target;
|
|
664
696
|
const pageNum = parseInt(target.value, 10) - 1;
|
|
@@ -676,7 +708,7 @@ export const Table = forwardRef(function TableComponent(props, ref) {
|
|
|
676
708
|
c.filter === true);
|
|
677
709
|
// Should show filter row - check if there are filterable columns AND filters are visible
|
|
678
710
|
const shouldShowFilterRow = hasFilterableColumns && showFilterRow;
|
|
679
|
-
return (_jsxs(TableRoot, { ref: ref, "$bordered": bordered, "$compact": compact, className: className || classNames.root, style: { ...styles.root, ...style, position: 'relative' }, "aria-label": rest['aria-label'], "aria-labelledby": rest['aria-labelledby'], children: [loading && (_jsx(LoadingOverlay, { className: classNames.loading, style: styles.loading, children: loadingIndicator || _jsx(LoadingSpinner, {}) })), renderToolbar(), _jsx(TableWrapper, { "$maxHeight": maxHeight, "$stickyHeader": stickyHeader, className: classNames.wrapper, style: styles.wrapper, children: _jsxs(StyledTable, { ref: tableRef, "$striped": striped, "$hover": hover, "$compact": compact, role: "grid", children: [caption && _jsx("caption", { className: "sr-only", children: caption }), _jsx(TableHeader, { "$sticky": stickyHeader, className: classNames.header, style: styles.header, children: _jsxs(HeaderRow, { className: classNames.headerRow, style: styles.headerRow, children: [
|
|
711
|
+
return (_jsxs(TableRoot, { ref: ref, "$bordered": bordered, "$compact": compact, className: className || classNames.root, style: { ...styles.root, ...style, position: 'relative' }, "aria-label": rest['aria-label'], "aria-labelledby": rest['aria-labelledby'], children: [loading && (_jsx(LoadingOverlay, { className: classNames.loading, style: styles.loading, children: loadingIndicator || _jsx(LoadingSpinner, {}) })), renderToolbar(), _jsx(TableWrapper, { "$maxHeight": maxHeight, "$stickyHeader": stickyHeader, className: classNames.wrapper, style: styles.wrapper, children: _jsxs(StyledTable, { ref: tableRef, "$striped": striped, "$hover": hover, "$compact": compact, role: "grid", children: [caption && _jsx("caption", { className: "sr-only", children: caption }), _jsx(TableHeader, { "$sticky": stickyHeader, className: classNames.header, style: styles.header, children: _jsxs(HeaderRow, { className: classNames.headerRow, style: styles.headerRow, children: [resolvedRowSelection?.mode === 'checkbox' && (_jsx(HeaderCell, { "$align": "center", "$sortable": false, "$compact": compact, "$width": resolvedRowSelection.columnWidth || 40, children: !resolvedRowSelection.hideSelectAll && (_jsx(Checkbox, { checked: isAllSelected, ref: (el) => {
|
|
680
712
|
if (el)
|
|
681
713
|
el.indeterminate = isIndeterminate;
|
|
682
714
|
}, onChange: handleSelectAllChange })) })), expandable && (_jsx(HeaderCell, { "$align": "center", "$sortable": false, "$compact": compact, "$width": expandable.columnWidth || 40 })), showRowNumber && (_jsx(HeaderCell, { "$align": "center", "$sortable": false, "$compact": compact, "$width": rowNumberWidth, children: rowNumberTitle })), visibleColumns.map((column, colIndex) => {
|
|
@@ -762,13 +794,13 @@ export const Table = forwardRef(function TableComponent(props, ref) {
|
|
|
762
794
|
: null, column: column })) }))] }))] }));
|
|
763
795
|
})() }, column.dataField));
|
|
764
796
|
})] }) }), _jsx(TableBody, { className: classNames.body, style: styles.body, children: processedData.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: visibleColumns.length +
|
|
765
|
-
(
|
|
797
|
+
(resolvedRowSelection?.mode === 'checkbox' ? 1 : 0) +
|
|
766
798
|
(expandable ? 1 : 0) +
|
|
767
799
|
(showRowNumber ? 1 : 0), children: _jsxs(EmptyState, { className: classNames.empty, style: styles.empty, children: [_jsx(EmptyIcon, {}), _jsx("span", { children: emptyText })] }) }) })) : (processedData.map((row, rowIndex) => {
|
|
768
800
|
const rowKey = getRowKey(row);
|
|
769
801
|
const rowSelected = isSelected(rowKey);
|
|
770
802
|
const rowExpanded = isExpanded(rowKey);
|
|
771
|
-
const checkboxProps =
|
|
803
|
+
const checkboxProps = resolvedRowSelection?.getCheckboxProps?.(row);
|
|
772
804
|
const isExpandable = expandable?.rowExpandable?.(row) ?? true;
|
|
773
805
|
const rowClass = typeof rowClassName === 'function'
|
|
774
806
|
? rowClassName(row, rowIndex)
|
|
@@ -777,18 +809,18 @@ export const Table = forwardRef(function TableComponent(props, ref) {
|
|
|
777
809
|
? rowStyle(row, rowIndex)
|
|
778
810
|
: rowStyle;
|
|
779
811
|
const selectedStyle = rowSelected
|
|
780
|
-
? typeof
|
|
781
|
-
?
|
|
782
|
-
:
|
|
812
|
+
? typeof resolvedRowSelection?.selectedRowStyle === 'function'
|
|
813
|
+
? resolvedRowSelection.selectedRowStyle(row)
|
|
814
|
+
: resolvedRowSelection?.selectedRowStyle
|
|
783
815
|
: undefined;
|
|
784
816
|
return (_jsxs(React.Fragment, { children: [_jsxs(TableRow, { "$selected": rowSelected, "$clickable": !!onRowClick ||
|
|
785
|
-
|
|
817
|
+
resolvedRowSelection?.mode === 'single' ||
|
|
786
818
|
expandable?.expandRowByClick === true, "$disabled": !!checkboxProps?.disabled, className: `${classNames.row || ''} ${rowClass || ''} ${rowSelected
|
|
787
|
-
? typeof
|
|
819
|
+
? typeof resolvedRowSelection?.selectedRowClassName ===
|
|
788
820
|
'function'
|
|
789
|
-
?
|
|
790
|
-
:
|
|
791
|
-
: ''}`, style: { ...styles.row, ...rowStyles, ...selectedStyle }, onClick: (e) => handleRowClick(row, rowIndex, e), onDoubleClick: (e) => handleCellDoubleClick(row, rowIndex, visibleColumns[0], 0, e), role: "row", "aria-selected": rowSelected, children: [
|
|
821
|
+
? resolvedRowSelection.selectedRowClassName(row)
|
|
822
|
+
: resolvedRowSelection?.selectedRowClassName || ''
|
|
823
|
+
: ''}`, style: { ...styles.row, ...rowStyles, ...selectedStyle }, onClick: (e) => handleRowClick(row, rowIndex, e), onDoubleClick: (e) => handleCellDoubleClick(row, rowIndex, visibleColumns[0], 0, e), role: "row", "aria-selected": rowSelected, children: [resolvedRowSelection?.mode === 'checkbox' && (_jsx(TableCell, { "$align": "center", "$compact": compact, "$padding": cellPadding, children: _jsx(Checkbox, { checked: rowSelected, disabled: checkboxProps?.disabled, onChange: (e) => handleCheckboxChange(row, e), onClick: (e) => e.stopPropagation() }) })), expandable && (_jsx(TableCell, { "$align": "center", "$compact": compact, "$padding": cellPadding, children: isExpandable && (_jsx(ExpandButton, { "$expanded": rowExpanded, onClick: (e) => handleExpandClick(row, e), children: expandable.expandIcon ? (expandable.expandIcon({
|
|
792
824
|
expanded: rowExpanded,
|
|
793
825
|
row,
|
|
794
826
|
onExpand: () => toggleExpand(row),
|
|
@@ -819,10 +851,10 @@ export const Table = forwardRef(function TableComponent(props, ref) {
|
|
|
819
851
|
return renderCellContent(row, column, rowIndex, colIndex);
|
|
820
852
|
})() }, column.dataField));
|
|
821
853
|
})] }), expandable && rowExpanded && isExpandable && (_jsx(ExpandedRow, { children: _jsx(ExpandedCell, { colSpan: visibleColumns.length +
|
|
822
|
-
(
|
|
854
|
+
(resolvedRowSelection?.mode === 'checkbox' ? 1 : 0) +
|
|
823
855
|
(expandable ? 1 : 0) +
|
|
824
856
|
(showRowNumber ? 1 : 0), children: expandable.expandedRowRender?.(row, rowIndex, rowExpanded) }) }))] }, rowKey));
|
|
825
|
-
})) }), showFooter && (_jsx(TableFooter, { className: classNames.footer, style: styles.footer, children: _jsxs(FooterRow, { className: classNames.footerRow, style: styles.footerRow, children: [
|
|
857
|
+
})) }), showFooter && (_jsx(TableFooter, { className: classNames.footer, style: styles.footer, children: _jsxs(FooterRow, { className: classNames.footerRow, style: styles.footerRow, children: [resolvedRowSelection?.mode === 'checkbox' && (_jsx(FooterCell, { "$align": "center", "$compact": compact })), expandable && (_jsx(FooterCell, { "$align": "center", "$compact": compact })), showRowNumber && (_jsx(FooterCell, { "$align": "center", "$compact": compact })), visibleColumns.map((column) => (_jsx(FooterCell, { "$align": column.align || 'left', "$compact": compact, className: classNames.footerCell, style: styles.footerCell, children: typeof column.footer === 'function'
|
|
826
858
|
? column.footer(column, data)
|
|
827
859
|
: column.footerFormatter
|
|
828
860
|
? column.footerFormatter(column, data)
|
|
@@ -10,6 +10,13 @@ export declare const ToolbarButton: import("styled-components/dist/types").IStyl
|
|
|
10
10
|
$active?: boolean | undefined;
|
|
11
11
|
$variant?: "gray" | "default" | "primary" | undefined;
|
|
12
12
|
}>> & string;
|
|
13
|
+
export declare const SelectionIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
|
|
14
|
+
$animate?: "none" | "up" | "down" | undefined;
|
|
15
|
+
}>> & string;
|
|
16
|
+
export declare const SelectionCount: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
|
|
17
|
+
$animate?: "none" | "up" | "down" | undefined;
|
|
18
|
+
}>> & string;
|
|
19
|
+
export declare const SelectionIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
|
|
13
20
|
export declare const TableWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
14
21
|
$maxHeight?: string | number | undefined;
|
|
15
22
|
$stickyHeader: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Table/elements.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Table/elements.tsx"],"names":[],"mappings":";AAwCA,eAAO,MAAM,SAAS;eACT,OAAO;cACR,OAAO;YAelB,CAAC;AAEF,eAAO,MAAM,OAAO,6NAcnB,CAAC;AAEF,eAAO,MAAM,YAAY,6NAKxB,CAAC;AAEF,eAAO,MAAM,WAAW,6NA6CvB,CAAC;AAEF,eAAO,MAAM,aAAa;;;YAgCzB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;YA+B9B,CAAC;AAEF,eAAO,MAAM,cAAc;;YAyB1B,CAAC;AAEF,eAAO,MAAM,aAAa,+NAWzB,CAAC;AAEF,eAAO,MAAM,YAAY;;mBAER,OAAO;YAUvB,CAAC;AAEF,eAAO,MAAM,WAAW;cACZ,OAAO;YACT,OAAO;cACL,OAAO;YAuBlB,CAAC;AAEF,eAAO,MAAM,WAAW;aAA0B,OAAO;YAQxD,CAAC;AAEF,eAAO,MAAM,SAAS,uOAErB,CAAC;AAEF,eAAO,MAAM,UAAU;YACb,MAAM;eACH,OAAO;cACR,OAAO;;;;;YA6ClB,CAAC;AAEF,eAAO,MAAM,QAAQ;aAAyB,OAAO;;YAqBpD,CAAC;AAEF,eAAO,MAAM,SAAS,uOAErB,CAAC;AAEF,eAAO,MAAM,UAAU;cAAwB,OAAO;YAIrD,CAAC;AAEF,eAAO,MAAM,WAAW,sOAsBvB,CAAC;AAEF,eAAO,MAAM,YAAY,yOAcxB,CAAC;AAEF,eAAO,MAAM,SAAS,+OAAiB,CAAC;AAExC,eAAO,MAAM,QAAQ;eACR,OAAO;gBACN,OAAO;eACR,OAAO;YAwCnB,CAAC;AAEF,eAAO,MAAM,SAAS;YACZ,MAAM;cACJ,OAAO;;;;YA4BlB,CAAC;AAEF,eAAO,MAAM,QAAQ;;4BAKpB,CAAC;AAEF,eAAO,MAAM,YAAY;eAA6B,OAAO;YAwB5D,CAAC;AAEF,eAAO,MAAM,WAAW,uOAEvB,CAAC;AAEF,eAAO,MAAM,YAAY,mPAIxB,CAAC;AAEF,eAAO,MAAM,WAAW,+OAEvB,CAAC;AAEF,eAAO,MAAM,SAAS,uOAAc,CAAC;AAErC,eAAO,MAAM,UAAU;YAAsB,MAAM;cAAY,OAAO;YAKrE,CAAC;AAEF,eAAO,MAAM,iBAAiB,6NAe7B,CAAC;AAEF,eAAO,MAAM,cAAc,6NAG1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,6NAI9B,CAAC;AAEF,eAAO,MAAM,UAAU;;YA6BtB,CAAC;AAEF,eAAO,MAAM,cAAc,yOAc1B,CAAC;AAEF,eAAO,MAAM,WAAW,6NA2BvB,CAAC;AAEF,eAAO,MAAM,UAAU,6NAkBtB,CAAC;AAEF,eAAO,MAAM,cAAc,6NAQ1B,CAAC;AAEF,eAAO,MAAM,cAAc,6NAO1B,CAAC;AAEF,eAAO,MAAM,YAAY;cAAyB,OAAO;;YAkBxD,CAAC;AAEF,eAAO,MAAM,UAAU,sOAWtB,CAAC;AAEF,eAAO,MAAM,iBAAiB,6NAa7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,6NAuB9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,6NAiB9B,CAAC;AAEF,eAAO,MAAM,gBAAgB,6NAI5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,sOAuB5B,CAAC;AAEF,eAAO,MAAM,YAAY,6NAYxB,CAAC"}
|
|
@@ -13,6 +13,23 @@ const spin = keyframes `
|
|
|
13
13
|
from { transform: rotate(0deg); }
|
|
14
14
|
to { transform: rotate(360deg); }
|
|
15
15
|
`;
|
|
16
|
+
const pulse = keyframes `
|
|
17
|
+
0% { transform: scale(1); }
|
|
18
|
+
50% { transform: scale(1.1); }
|
|
19
|
+
100% { transform: scale(1); }
|
|
20
|
+
`;
|
|
21
|
+
const countUp = keyframes `
|
|
22
|
+
0% { transform: translateY(100%); opacity: 0; }
|
|
23
|
+
100% { transform: translateY(0); opacity: 1; }
|
|
24
|
+
`;
|
|
25
|
+
const countDown = keyframes `
|
|
26
|
+
0% { transform: translateY(-100%); opacity: 0; }
|
|
27
|
+
100% { transform: translateY(0); opacity: 1; }
|
|
28
|
+
`;
|
|
29
|
+
const slideIn = keyframes `
|
|
30
|
+
0% { transform: translateX(-20px); opacity: 0; }
|
|
31
|
+
100% { transform: translateX(0); opacity: 1; }
|
|
32
|
+
`;
|
|
16
33
|
export const TableRoot = styled.div `
|
|
17
34
|
width: 100%;
|
|
18
35
|
font-family: inherit;
|
|
@@ -127,6 +144,74 @@ export const ToolbarButton = styled.button `
|
|
|
127
144
|
height: 14px;
|
|
128
145
|
}
|
|
129
146
|
`;
|
|
147
|
+
export const SelectionIndicator = styled.button `
|
|
148
|
+
display: inline-flex;
|
|
149
|
+
align-items: center;
|
|
150
|
+
gap: 8px;
|
|
151
|
+
padding: 8px 16px;
|
|
152
|
+
background: ${tokens.primary || '#3b82f6'};
|
|
153
|
+
border-radius: 6px;
|
|
154
|
+
border: 2px solid ${tokens.primary || '#3b82f6'};
|
|
155
|
+
outline: none;
|
|
156
|
+
color: white;
|
|
157
|
+
font-weight: 600;
|
|
158
|
+
font-size: 13px;
|
|
159
|
+
cursor: pointer;
|
|
160
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
161
|
+
transition: all 0.2s ease;
|
|
162
|
+
animation: ${slideIn} 0.3s ease-out;
|
|
163
|
+
|
|
164
|
+
&:hover {
|
|
165
|
+
background: ${tokens.primary ? `${tokens.primary}dd` : '#2563eb'};
|
|
166
|
+
border-color: ${tokens.primary ? `${tokens.primary}dd` : '#2563eb'};
|
|
167
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
&:active {
|
|
171
|
+
transform: translateY(1px);
|
|
172
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
&:focus-visible {
|
|
176
|
+
box-shadow: 0 0 0 3px ${tokens.primary ? `${tokens.primary}40` : 'rgba(59, 130, 246, 0.4)'};
|
|
177
|
+
}
|
|
178
|
+
`;
|
|
179
|
+
export const SelectionCount = styled.span `
|
|
180
|
+
display: inline-flex;
|
|
181
|
+
align-items: center;
|
|
182
|
+
justify-content: center;
|
|
183
|
+
min-width: 26px;
|
|
184
|
+
height: 26px;
|
|
185
|
+
padding: 0 8px;
|
|
186
|
+
background: rgba(255, 255, 255, 0.2);
|
|
187
|
+
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
188
|
+
border-radius: 4px;
|
|
189
|
+
font-weight: 700;
|
|
190
|
+
font-size: 14px;
|
|
191
|
+
overflow: hidden;
|
|
192
|
+
|
|
193
|
+
${({ $animate }) => $animate === 'up' &&
|
|
194
|
+
css `
|
|
195
|
+
animation: ${countUp} 0.3s ease-out, ${pulse} 0.3s ease-out;
|
|
196
|
+
`}
|
|
197
|
+
|
|
198
|
+
${({ $animate }) => $animate === 'down' &&
|
|
199
|
+
css `
|
|
200
|
+
animation: ${countDown} 0.3s ease-out, ${pulse} 0.3s ease-out;
|
|
201
|
+
`}
|
|
202
|
+
`;
|
|
203
|
+
export const SelectionIcon = styled.span `
|
|
204
|
+
display: flex;
|
|
205
|
+
align-items: center;
|
|
206
|
+
justify-content: center;
|
|
207
|
+
width: 20px;
|
|
208
|
+
height: 20px;
|
|
209
|
+
|
|
210
|
+
svg {
|
|
211
|
+
width: 16px;
|
|
212
|
+
height: 16px;
|
|
213
|
+
}
|
|
214
|
+
`;
|
|
130
215
|
export const TableWrapper = styled.div `
|
|
131
216
|
width: 100%;
|
|
132
217
|
overflow-x: auto;
|
|
@@ -182,6 +182,11 @@
|
|
|
182
182
|
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
|
|
183
183
|
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
|
|
184
184
|
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
|
|
185
|
+
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
|
|
186
|
+
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
|
|
187
|
+
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
|
|
188
|
+
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
|
|
189
|
+
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
|
|
185
190
|
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}*,.dark\:bg-black:is(.dark *),.dark\:border-gray-600:is(.dark *),:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
|
|
186
191
|
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}.dark\:bg-black:is(.dark *),.dark\:border-gray-600:is(.dark *),*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
|
|
187
192
|
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/fieldset,legend{padding:0}.container{width:100%}@media (min-width:0px){.container{max-width:0}}@media (min-width:20rem){.container{max-width:20rem}}@media (min-width:23.4375rem){.container{max-width:23.4375rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.form-input,.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-meridiem-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-second-field,.form-input::placeholder,.form-input:focus,.form-multiselect,.form-multiselect:focus,.form-select,.form-select:focus,table{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}table:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}table tr:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}select:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-gray-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(243 244 246/var(--tw-divide-opacity,1))}.divide-teal-50>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(240 253 250/var(--tw-divide-opacity,1))}.bg-purple-900\/50{background-color:#581c8780}.p-0\.5{padding:.125rem}.blur,.filter,.ring,.ring-2,.shadow,.shadow-inner,.shadow-md,body{font-family:Arima Regular;font-size:14px}.hover\:bg-white\/20:hover{background-color:#fff3}.dark\:border-gray-600:is(.dark *),.focus\:ring-0:focus,.dark\:bg-black:is(.dark *){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.dark\:bg-boxdark:is(.dark *){--tw-bg-opacity:1;background-color:rgb(36 48 63/var(--tw-bg-opacity,1))}.dark\:bg-gray-700:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:bg-gray-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.dark\:text-black:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.dark\:text-gray-100:is(.dark *){--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.dark\:text-gray-200:is(.dark *){--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.dark\:text-gray-300:is(.dark *){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.dark\:text-gray-400:is(.dark *){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.dark\:text-gray-500:is(.dark *){--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.dark\:text-red-400:is(.dark *){--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.dark\:text-white:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:placeholder-gray-400:is(.dark *)::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.dark\:ring-offset-gray-800:is(.dark *){--tw-ring-offset-color:#1f2937}.dark\:hover\:bg-blue-900:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-600:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-700:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:focus\:ring-blue-600:focus:is(.dark *){--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity,1))}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}@font-face{font-family:ArimaRegular;src:url(library/assets/fonts/arima/arima-regular.ttf)}.container{width:100%}@media (min-width:0px){.container{max-width:0}}@media (min-width:20rem){.container{max-width:20rem}}@media (min-width:23.4375rem){.container{max-width:23.4375rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.form-input,.form-multiselect,.form-select,.form-input:focus,.form-multiselect:focus,.form-select:focus,.form-input::placeholder,.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-meridiem-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-second-field,table{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}table:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}table tr:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}select:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}@keyframes spin{to{transform:rotate(1turn)}}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-gray-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(243 244 246/var(--tw-divide-opacity,1))}.divide-teal-50>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(240 253 250/var(--tw-divide-opacity,1))}.bg-purple-900\/50{background-color:#581c8780}.p-0\.5{padding:.125rem}.shadow,.shadow-inner,.shadow-md,.ring,.ring-2,.blur,.filter,body{font-family:Arima Regular;font-size:14px}.menu ul{list-style:none;margin:0;padding:0}.menu li{border-bottom:1px solid #ddd;padding:10px}.menu li:last-child{border-bottom:none}.hover\:bg-white\/20:hover{background-color:#fff3}.focus\:ring-0:focus,.focus\:ring-1:focus,.dark\:border-gray-600:is(.dark *){--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity,1))}.dark\:bg-black:is(.dark *){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.dark\:bg-boxdark:is(.dark *){--tw-bg-opacity:1;background-color:rgb(36 48 63/var(--tw-bg-opacity,1))}.dark\:bg-gray-700:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:bg-gray-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.dark\:text-black:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.dark\:text-gray-100:is(.dark *){--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.dark\:text-gray-200:is(.dark *){--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.dark\:text-gray-300:is(.dark *){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.dark\:text-gray-400:is(.dark *){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.dark\:text-gray-500:is(.dark *){--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.dark\:text-red-400:is(.dark *){--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.dark\:text-white:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:placeholder-gray-400:is(.dark *)::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.dark\:ring-offset-gray-800:is(.dark *){--tw-ring-offset-color:#1f2937}.dark\:hover\:bg-blue-900:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-600:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-700:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:focus\:ring-blue-600:focus:is(.dark *){--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity,1))}@media (min-width:0px) and (max-width:767px){}
|