@megha-ui/react 1.2.178 → 1.2.180
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/dist/components/dropdown/index.js +6 -6
- package/dist/components/grid/index.js +3 -3
- package/dist/components/grid/utils/gridHeader.js +13 -13
- package/dist/components/grid/utils/groupedGridDetails.js +2 -2
- package/dist/components/tabs/index.js +4 -4
- package/dist/components/toggle/index.js +2 -2
- package/package.json +1 -1
|
@@ -243,8 +243,8 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
|
|
|
243
243
|
};
|
|
244
244
|
const listItemDisabledStyle = {
|
|
245
245
|
cursor: "not-allowed",
|
|
246
|
-
color: "#a0a0a0",
|
|
247
|
-
backgroundColor: "
|
|
246
|
+
color: "var(--muted, #a0a0a0)",
|
|
247
|
+
backgroundColor: "var(--disabled-bg)",
|
|
248
248
|
pointerEvents: "none",
|
|
249
249
|
};
|
|
250
250
|
const listItemHoverStyle = {
|
|
@@ -304,14 +304,14 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
|
|
|
304
304
|
: placeholder }), _jsxs("div", { style: {
|
|
305
305
|
display: "flex",
|
|
306
306
|
alignItems: "center",
|
|
307
|
-
}, children: [isClear && (displayValue || selectedDisplay) && (_jsx("div", { style: { marginRight: "0.5rem" }, onClick: handleClear, id: clearId, title: "Click to clear the value", children: ClearIcon ? (ClearIcon) : (_jsx("span", { style: { color: "#dbdfe9", fontSize: "1rem" }, children: "X" })) })), disabled ? (Tooltip && Tooltip) : DropDownIcon ? (DropDownIcon) : (_jsx(HiChevronDown, { fontSize: "1rem" })), withTooltip && Tooltip && Tooltip] })] }), _jsxs("ul", { style: Object.assign(Object.assign({ width: dropdownListWidth || "100%", position: "absolute", backgroundColor: dropdownListBG || "var(--dropdown-bg)", boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", border: "1px solid #f5f5f5", zIndex: 10, marginTop: 4, borderRadius: 4, overflow: "hidden" }, clickStyle), { display: !isOpen ? "none" : "" }), children: [searchEnabled && (_jsx("li", { style: { padding: "0.5rem" }, children: _jsx("input", { ref: searchInputRef, type: "text", placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), disabled: disabled, style: {
|
|
307
|
+
}, children: [isClear && (displayValue || selectedDisplay) && (_jsx("div", { style: { marginRight: "0.5rem" }, onClick: handleClear, id: clearId, title: "Click to clear the value", children: ClearIcon ? (ClearIcon) : (_jsx("span", { style: { color: "var(--form-border-color, #dbdfe9)", fontSize: "1rem" }, children: "X" })) })), disabled ? (Tooltip && Tooltip) : DropDownIcon ? (DropDownIcon) : (_jsx(HiChevronDown, { fontSize: "1rem" })), withTooltip && Tooltip && Tooltip] })] }), _jsxs("ul", { style: Object.assign(Object.assign({ width: dropdownListWidth || "100%", position: "absolute", backgroundColor: dropdownListBG || "var(--dropdown-bg)", boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", border: "1px solid var(--divider, #f5f5f5)", zIndex: 10, marginTop: 4, borderRadius: 4, overflow: "hidden" }, clickStyle), { display: !isOpen ? "none" : "" }), children: [searchEnabled && (_jsx("li", { style: { padding: "0.5rem" }, children: _jsx("input", { ref: searchInputRef, type: "text", placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), disabled: disabled, style: {
|
|
308
308
|
width: "100%",
|
|
309
309
|
padding: "0.5rem",
|
|
310
310
|
boxSizing: "border-box",
|
|
311
311
|
border: "1px solid",
|
|
312
312
|
borderColor: searchBorderColor,
|
|
313
313
|
borderRadius: 4,
|
|
314
|
-
} }) })), isSelectAll && isMultiple && filteredOptions.length > 0 && (_jsxs("li", { style: Object.assign(Object.assign(Object.assign(Object.assign({}, listItemStyle), { display: "flex", alignItems: "center" }), (-1 === highlightIndex ? listItemHoverStyle : {})), { borderBottom: "1px solid #dddddd", wordWrap: "break-word", textWrap: "wrap", justifyContent: "space-between" }), onMouseEnter: (e) => {
|
|
314
|
+
} }) })), isSelectAll && isMultiple && filteredOptions.length > 0 && (_jsxs("li", { style: Object.assign(Object.assign(Object.assign(Object.assign({}, listItemStyle), { display: "flex", alignItems: "center" }), (-1 === highlightIndex ? listItemHoverStyle : {})), { borderBottom: "1px solid var(--divider-strong, #dddddd)", wordWrap: "break-word", textWrap: "wrap", justifyContent: "space-between" }), onMouseEnter: (e) => {
|
|
315
315
|
setHighlightIndex(-1);
|
|
316
316
|
}, onClick: () => onSelectChange ? handleAllItemSelect() : handleAllSelect(), children: [_jsx("div", { style: { marginRight: "0.5rem" }, children: _jsx(Checkbox, { selected: intermediateValues
|
|
317
317
|
.sort((a, b) => (a > b ? -1 : 1))
|
|
@@ -337,7 +337,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
|
|
|
337
337
|
? selectedItemStyle
|
|
338
338
|
: {})), { borderBottom: index === filteredOptions.length - 1
|
|
339
339
|
? "none"
|
|
340
|
-
: "1px solid #dddddd", wordWrap: "break-word", textWrap: "wrap", justifyContent: "space-between" }), onMouseEnter: (e) => {
|
|
340
|
+
: "1px solid var(--divider-strong, #dddddd)", wordWrap: "break-word", textWrap: "wrap", justifyContent: "space-between" }), onMouseEnter: (e) => {
|
|
341
341
|
if (!option.disabled) {
|
|
342
342
|
setHighlightIndex(index);
|
|
343
343
|
}
|
|
@@ -350,7 +350,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
|
|
|
350
350
|
alignItems: "center",
|
|
351
351
|
justifyContent: "end",
|
|
352
352
|
padding: "0.75rem 0.5rem",
|
|
353
|
-
borderTop: "1px solid #f5f5f5",
|
|
353
|
+
borderTop: "1px solid var(--divider, #f5f5f5)",
|
|
354
354
|
}, children: _jsx(Button, { text: "Apply", fontSize: "", fontWeight: "", color: "#FFFFFF", backgroundColor: "#2377BA", borderColor: "#2377BA", onClick: () => {
|
|
355
355
|
onApplyChange(intermediateValues);
|
|
356
356
|
setIsOpen(false);
|
|
@@ -1155,7 +1155,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
|
|
|
1155
1155
|
// };
|
|
1156
1156
|
return (_jsxs("div", { style: {
|
|
1157
1157
|
height,
|
|
1158
|
-
backgroundColor: isFullScreen ? "
|
|
1158
|
+
backgroundColor: isFullScreen ? "var(--background)" : "transparent",
|
|
1159
1159
|
}, className: wrapperClass, ref: entrieGridRef, children: [isOpen && (_jsx("div", { style: {
|
|
1160
1160
|
position: "fixed",
|
|
1161
1161
|
width: "100vw",
|
|
@@ -1170,7 +1170,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
|
|
|
1170
1170
|
}, onClick: closeSetting, ref: modalContent, children: _jsxs("div", { style: {
|
|
1171
1171
|
height: "100vh",
|
|
1172
1172
|
width: "20rem",
|
|
1173
|
-
background: "
|
|
1173
|
+
background: "var(--background)",
|
|
1174
1174
|
overflow: "hidden",
|
|
1175
1175
|
display: "flex",
|
|
1176
1176
|
flexDirection: "column",
|
|
@@ -1395,7 +1395,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
|
|
|
1395
1395
|
display: "flex",
|
|
1396
1396
|
alignItems: "center",
|
|
1397
1397
|
justifyContent: "center",
|
|
1398
|
-
background: "
|
|
1398
|
+
background: "var(--background)",
|
|
1399
1399
|
}, children: _jsx(Loader, { size: 32 }) })), _jsx("div", { id: "table-body", children: gridGroupBy !== "" ? (_jsx(GroupedGridDetails, { locale: locale, formatOptions: formatOptions, groupedData: groupedData, rowOpened: rowOpened, startIndex: startIndex, endIndex: endIndex, alternateRowColor: alternateRowColor, updateRowOpened: updateRowOpened, columnWidths: columnWidths, columnHeights: columnHeights, groupBy: groupBy, widthMode: widthMode, rowKey: rowKey, rowHeight: rowHeight, headerBackground: headerBackground, isSummarise: summariseAvailable, gridGroupBy: gridGroupBy, rowStyle: rowStyle, sortable: sortable, cellStyle: cellStyle, summariseKeys: summariseKeys, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, selectedRowStyle: selectedRowStyle, isLoading: isLoading, selectedRow: selectedRow, onRowClick: onRowClick, gridColumns: gridColumns, bulkSelect: bulkSelect, selectedRows: selectedRows, toggleRowSelection: toggleRowSelection, hasVerticalScroll: hasVerticalScroll, setColumnWidths: setColumnWidths, setColumnHeights: setColumnHeights, actionsKey: actionsKey })) : (_jsxs(_Fragment, { children: [(paginate ? paginatedData : sortedData).map((item, index) => {
|
|
1400
1400
|
var _a, _b, _c, _d;
|
|
1401
1401
|
if (paginate) {
|
|
@@ -289,7 +289,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
289
289
|
} })), _jsx(MdFilterList, { size: 18, style: {
|
|
290
290
|
color: activeFilters[((_q = headerColumns.find((column) => column.key === _groupBy)) === null || _q === void 0 ? void 0 : _q.key) || ""]
|
|
291
291
|
? "#2377ba"
|
|
292
|
-
: "
|
|
292
|
+
: "var(--row-header-text)",
|
|
293
293
|
} }), dropdownVisible ===
|
|
294
294
|
((_r = headerColumns.find((column) => column.key === _groupBy)) === null || _r === void 0 ? void 0 : _r.key) &&
|
|
295
295
|
(((_s = headerColumns.find((column) => column.key === _groupBy)) === null || _s === void 0 ? void 0 : _s.uniqueDrop) ? (_jsx(GridFilterDropdown, { locale: locale, formatOptions: formatOptions, columnType: (_u = (_t = headerColumns.find((column) => column.key === _groupBy)) === null || _t === void 0 ? void 0 : _t.dataType) !== null && _u !== void 0 ? _u : "string", columnIndex: -1, searchable: ((_v = headerColumns.find((column) => column.key === _groupBy)) === null || _v === void 0 ? void 0 : _v.search) || false, headerDropdownIndex: headerDropdownIndex, searchInput: (search &&
|
|
@@ -368,7 +368,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
368
368
|
visibility: ((_20 = headerColumns.find((column) => column.key === _groupBy)) === null || _20 === void 0 ? void 0 : _20.search)
|
|
369
369
|
? "visible"
|
|
370
370
|
: "hidden",
|
|
371
|
-
}, height: 32, width: "100%", className: "w-full", backgroundColor: "
|
|
371
|
+
}, height: 32, width: "100%", className: "w-full", backgroundColor: "var(--background)" })) }), onFilter: onFilter, setUniqueSearch: setUniqueSearch, uniqueSearch: uniqueSearch, textFilterLabel: textFilterLabel, activeSearchType: ((_22 = searchQueries[((_21 = headerColumns.find((column) => column.key === _groupBy)) === null || _21 === void 0 ? void 0 : _21.key) || ""]) === null || _22 === void 0 ? void 0 : _22.type) ||
|
|
372
372
|
defaultSearchOperation ||
|
|
373
373
|
"contains", checkboxWrapper: checkboxWrapper })) : (_jsx(TextFilterDropdown, { columnIndex: -1, combined: false, headerDropdownIndex: headerDropdownIndex, sortingOps: _jsx(GridHeaderDropdown, { options: menuOptions.filter((item) => item.label !== "Group by"), onClose: () => setDropdownVisible(null), column: headerColumns.find((column) => column.key === _groupBy) }), searchOptions: searchOptions.filter((item) => {
|
|
374
374
|
var _a, _b;
|
|
@@ -418,7 +418,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
418
418
|
visibility: ((_37 = headerColumns.find((column) => column.key === _groupBy)) === null || _37 === void 0 ? void 0 : _37.search)
|
|
419
419
|
? "visible"
|
|
420
420
|
: "hidden",
|
|
421
|
-
}, height: 32, width: "100%", className: "w-full", backgroundColor: "
|
|
421
|
+
}, height: 32, width: "100%", className: "w-full", backgroundColor: "var(--background)" })) : (_jsx(DateInput, { value: (_39 = searchQueries[((_38 = headerColumns.find((column) => column.key === _groupBy)) === null || _38 === void 0 ? void 0 : _38.key) || ""]) === null || _39 === void 0 ? void 0 : _39.text.split("to")[0], placeholder: `asd Filter ${(_40 = headerColumns.find((column) => column.key === _groupBy)) === null || _40 === void 0 ? void 0 : _40.label}`, onChange: (value) => {
|
|
422
422
|
var _a, _b, _c;
|
|
423
423
|
return onSearch(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "", value, ((_c = searchQueries[((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || ""]) === null || _c === void 0 ? void 0 : _c.type) ||
|
|
424
424
|
defaultSearchOperation ||
|
|
@@ -437,7 +437,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
437
437
|
visibility: ((_44 = headerColumns.find((column) => column.key === _groupBy)) === null || _44 === void 0 ? void 0 : _44.search)
|
|
438
438
|
? "visible"
|
|
439
439
|
: "hidden",
|
|
440
|
-
}, height: 32, width: "100%", className: "w-full", backgroundColor: "
|
|
440
|
+
}, height: 32, width: "100%", className: "w-full", backgroundColor: "var(--background)" })) }), activeSearchType: ((_46 = searchQueries[((_45 = headerColumns.find((column) => column.key === _groupBy)) === null || _45 === void 0 ? void 0 : _45.key) || ""]) === null || _46 === void 0 ? void 0 : _46.type) ||
|
|
441
441
|
defaultSearchOperation ||
|
|
442
442
|
"contains", searchInput: (search &&
|
|
443
443
|
((_47 = headerColumns.find((column) => column.key === _groupBy)) === null || _47 === void 0 ? void 0 : _47.search) && (_jsx("div", { style: {
|
|
@@ -503,9 +503,9 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
503
503
|
onSearch(((_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.key) || "", e.target.value, searchType);
|
|
504
504
|
}, value: ((_59 = searchQueries[((_58 = headerColumns.find((column) => column.key === _groupBy)) === null || _58 === void 0 ? void 0 : _58.key) || ""]) === null || _59 === void 0 ? void 0 : _59.text) || "", disabled: !((_60 = headerColumns.find((column) => column.key === _groupBy)) === null || _60 === void 0 ? void 0 : _60.search), extraWrapperStyle: {
|
|
505
505
|
background: ((_61 = headerColumns.find((column) => column.key === _groupBy)) === null || _61 === void 0 ? void 0 : _61.search)
|
|
506
|
-
? "
|
|
507
|
-
: "
|
|
508
|
-
}, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "
|
|
506
|
+
? "var(--background)"
|
|
507
|
+
: "var(--disabled-bg)",
|
|
508
|
+
}, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "var(--background)" }) }))] }, (_62 = headerColumns.find((column) => column.key === _groupBy)) === null || _62 === void 0 ? void 0 : _62.key)) }));
|
|
509
509
|
}), headerColumns
|
|
510
510
|
.filter((column) => !groupBy.includes(column.key))
|
|
511
511
|
.map((column, colIndex) => {
|
|
@@ -562,7 +562,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
562
562
|
} })), _jsx(MdFilterList, { size: 18, style: {
|
|
563
563
|
color: activeFilters[column.key]
|
|
564
564
|
? "#2377ba"
|
|
565
|
-
: "
|
|
565
|
+
: "var(--row-header-text)",
|
|
566
566
|
} }), dropdownVisible === column.key &&
|
|
567
567
|
(column.uniqueDrop ? (_jsx(GridFilterDropdown, { locale: locale, formatOptions: formatOptions, columnType: (_b = column.dataType) !== null && _b !== void 0 ? _b : "string", columnIndex: colIndex, searchable: (column === null || column === void 0 ? void 0 : column.search) || false, headerDropdownIndex: headerDropdownIndex, searchOptions: searchOptions.filter((item) => column.dataType === "number" ||
|
|
568
568
|
column.dataType === "currency"
|
|
@@ -609,7 +609,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
609
609
|
visibility: column.search
|
|
610
610
|
? "visible"
|
|
611
611
|
: "hidden",
|
|
612
|
-
}, height: 32, width: "100%", className: "w-full", backgroundColor: "
|
|
612
|
+
}, height: 32, width: "100%", className: "w-full", backgroundColor: "var(--background)" })) }), onFilter: onFilter, setUniqueSearch: setUniqueSearch, uniqueSearch: uniqueSearch, textFilterLabel: textFilterLabel, activeSearchType: ((_h = searchQueries[column.key]) === null || _h === void 0 ? void 0 : _h.type) ||
|
|
613
613
|
defaultSearchOperation ||
|
|
614
614
|
"contains", checkboxWrapper: checkboxWrapper, searchInput: search &&
|
|
615
615
|
column.search && (_jsx("div", { style: {
|
|
@@ -639,7 +639,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
639
639
|
? "var(--background)"
|
|
640
640
|
: "var(--disabled-bg)",
|
|
641
641
|
}, placeholder: "Search", value: ((_j = searchQueries[column.key]) === null || _j === void 0 ? void 0 : _j.text) ||
|
|
642
|
-
"", disabled: !column.search, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "
|
|
642
|
+
"", disabled: !column.search, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "var(--background)" }) })) })) : (_jsx(TextFilterDropdown, { combined: false, columnIndex: colIndex, searchable: (column === null || column === void 0 ? void 0 : column.search) || false, sortingOps: _jsx(GridHeaderDropdown, { options: menuOptions, onClose: () => setDropdownVisible(null), column: column }), headerDropdownIndex: headerDropdownIndex, searchOptions: searchOptions.filter((item) => column.dataType === "number" ||
|
|
643
643
|
column.dataType === "currency"
|
|
644
644
|
? numberTypeSearch.includes(item.value)
|
|
645
645
|
: column.dataType === "date"
|
|
@@ -686,7 +686,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
686
686
|
visibility: column.search
|
|
687
687
|
? "visible"
|
|
688
688
|
: "hidden",
|
|
689
|
-
}, height: 32, width: "100%", className: "w-full", backgroundColor: "
|
|
689
|
+
}, height: 32, width: "100%", className: "w-full", backgroundColor: "var(--background)" })) : (_jsx(DateInput, { value: (_q = searchQueries[column.key]) === null || _q === void 0 ? void 0 : _q.text.split("to")[0], placeholder: `asd Filter ${column.label}`, onChange: (value) => {
|
|
690
690
|
var _a;
|
|
691
691
|
return onSearch(column.key, value, ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
|
|
692
692
|
defaultSearchOperation ||
|
|
@@ -705,7 +705,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
705
705
|
visibility: column.search
|
|
706
706
|
? "visible"
|
|
707
707
|
: "hidden",
|
|
708
|
-
}, height: 32, width: "100%", className: "w-full", backgroundColor: "
|
|
708
|
+
}, height: 32, width: "100%", className: "w-full", backgroundColor: "var(--background)" })) }), activeSearchType: ((_s = searchQueries[column.key]) === null || _s === void 0 ? void 0 : _s.type) ||
|
|
709
709
|
defaultSearchOperation ||
|
|
710
710
|
"contains", searchInput: (search && column.search && (_jsx("div", { style: {
|
|
711
711
|
padding: "0.5rem",
|
|
@@ -733,7 +733,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
733
733
|
? "var(--background)"
|
|
734
734
|
: "var(--disabled-bg)",
|
|
735
735
|
}, value: ((_t = searchQueries[column.key]) === null || _t === void 0 ? void 0 : _t.text) ||
|
|
736
|
-
"", disabled: !column.search, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "
|
|
736
|
+
"", disabled: !column.search, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "var(--background)" }) }))) ||
|
|
737
737
|
null })))] })) })] }), search && columnSearchOutside && (_jsx("div", { style: {
|
|
738
738
|
marginTop: "0.5rem",
|
|
739
739
|
width: (hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${column.key}`]) ||
|
|
@@ -91,8 +91,8 @@ const GroupedGrid = ({ groupedData, rowOpened, startIndex, endIndex, alternateRo
|
|
|
91
91
|
}, className: `group-column ${item.key}`, onClick: () => updateRowOpened(item.groupedValue), children: [_jsx("span", { style: {
|
|
92
92
|
fontSize: "inherit",
|
|
93
93
|
marginRight: "0.5rem",
|
|
94
|
-
color: "
|
|
95
|
-
background: "
|
|
94
|
+
color: "var(--foreground)",
|
|
95
|
+
background: "var(--disabled-bg)",
|
|
96
96
|
width: "1rem",
|
|
97
97
|
height: "1rem",
|
|
98
98
|
flexGrow: 0,
|
|
@@ -54,8 +54,8 @@ export const Tab = ({ label, description, tabNumber }) => {
|
|
|
54
54
|
fontWeight: 700,
|
|
55
55
|
fontSize: "1rem",
|
|
56
56
|
marginRight: "0.5rem",
|
|
57
|
-
background: isActive ? "#2377BA" : "
|
|
58
|
-
color: isActive ? "#fff" : "
|
|
57
|
+
background: isActive ? "#2377BA" : "var(--background)",
|
|
58
|
+
color: isActive ? "#fff" : "var(--foreground)",
|
|
59
59
|
padding: "0.5rem 1rem",
|
|
60
60
|
borderRadius: "0.35rem",
|
|
61
61
|
minWidth: "1.75rem",
|
|
@@ -64,7 +64,7 @@ export const Tab = ({ label, description, tabNumber }) => {
|
|
|
64
64
|
display: "flex",
|
|
65
65
|
flexDirection: "column",
|
|
66
66
|
}, children: [_jsx("span", { style: { fontWeight: 500, fontSize: "1rem" }, children: label }), showTabDescription && description && (_jsx("span", { style: {
|
|
67
|
-
color: "
|
|
67
|
+
color: "var(--foreground)",
|
|
68
68
|
fontWeight: 400,
|
|
69
69
|
fontSize: "0.85rem",
|
|
70
70
|
}, children: description }))] })] }) }));
|
|
@@ -78,6 +78,6 @@ export const TabPanel = ({ label, children, className, }) => {
|
|
|
78
78
|
const isActive = activeTab === label;
|
|
79
79
|
return isActive ? (_jsx("div", { className: className, style: {
|
|
80
80
|
flex: 1,
|
|
81
|
-
background: "
|
|
81
|
+
background: "var(--background)",
|
|
82
82
|
}, children: children })) : null;
|
|
83
83
|
};
|
|
@@ -16,7 +16,7 @@ const Toggle = ({ isChecked = false, onChange, label, disabled = false, activeCo
|
|
|
16
16
|
left: 0,
|
|
17
17
|
right: 0,
|
|
18
18
|
bottom: 0,
|
|
19
|
-
backgroundColor: "
|
|
19
|
+
backgroundColor: "var(--disabled-bg)",
|
|
20
20
|
transition: "0.4s",
|
|
21
21
|
borderRadius: "1.5rem",
|
|
22
22
|
};
|
|
@@ -30,7 +30,7 @@ const Toggle = ({ isChecked = false, onChange, label, disabled = false, activeCo
|
|
|
30
30
|
width: "1rem",
|
|
31
31
|
left: "0.125rem",
|
|
32
32
|
bottom: "0.125rem",
|
|
33
|
-
backgroundColor: "
|
|
33
|
+
backgroundColor: "var(--background)",
|
|
34
34
|
transition: "0.4s",
|
|
35
35
|
borderRadius: "50%",
|
|
36
36
|
};
|
package/package.json
CHANGED