@pk-design/react-tailwind 1.4.4 → 1.5.1
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/react-tailwind.cjs.js +368 -126
- package/dist/react-tailwind.cjs.js.map +1 -1
- package/dist/react-tailwind.css +1 -1
- package/dist/react-tailwind.css.map +1 -1
- package/dist/react-tailwind.es.js +367 -128
- package/dist/react-tailwind.es.js.map +1 -1
- package/dist/types/components/Accordion/Accordion.d.ts +3 -0
- package/dist/types/components/Accordion/Accordion.test.d.ts +1 -0
- package/dist/types/components/Accordion/Accordion.types.d.ts +85 -0
- package/dist/types/components/Accordion/index.d.ts +2 -0
- package/dist/types/components/BodyText/BodyText.types.d.ts +1 -0
- package/dist/types/components/ButtonGroup/ButtonGroup.d.ts +3 -0
- package/dist/types/components/ButtonGroup/ButtonGroup.test.d.ts +1 -0
- package/dist/types/components/ButtonGroup/ButtonGroup.types.d.ts +70 -0
- package/dist/types/components/ButtonGroup/index.d.ts +2 -0
- package/dist/types/components/DataTable/DataTable.d.ts +1 -1
- package/dist/types/components/DataTable/DataTable.icons.d.ts +1 -1
- package/dist/types/components/DataTable/DataTable.types.d.ts +16 -0
- package/dist/types/components/DataTable/DataTable.utils.d.ts +21 -0
- package/dist/types/components/SelectBox/SelectBox.d.ts +1 -1
- package/dist/types/components/SelectBox/SelectBox.types.d.ts +7 -0
- package/dist/types/components/VirtualizedDataTable/VirtualizedDataTable.d.ts +1 -1
- package/dist/types/components/VirtualizedDataTable/VirtualizedDataTable.types.d.ts +7 -2
- package/dist/types/index.d.ts +2 -0
- package/package.json +1 -1
|
@@ -27,9 +27,9 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
|
27
27
|
|
|
28
28
|
const buildClassName = (...classes) => tailwindMerge.twMerge(classes.filter(Boolean));
|
|
29
29
|
|
|
30
|
-
var _path$i
|
|
30
|
+
var _path$i;
|
|
31
31
|
function _extends$i() { return _extends$i = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$i.apply(null, arguments); }
|
|
32
|
-
var
|
|
32
|
+
var SvgChevronDown = function SvgChevronDown(props) {
|
|
33
33
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
|
|
34
34
|
xmlns: "http://www.w3.org/2000/svg",
|
|
35
35
|
width: 24,
|
|
@@ -39,19 +39,90 @@ var SvgBadgeCheck = function SvgBadgeCheck(props) {
|
|
|
39
39
|
strokeLinecap: "round",
|
|
40
40
|
strokeLinejoin: "round",
|
|
41
41
|
strokeWidth: 2,
|
|
42
|
-
className: "lucide lucide-
|
|
42
|
+
className: "lucide lucide-chevron-down-icon lucide-chevron-down",
|
|
43
43
|
viewBox: "0 0 24 24"
|
|
44
44
|
}, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
|
|
45
|
+
d: "m6 9 6 6 6-6"
|
|
46
|
+
})));
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
const CONTAINER_CLASS = {
|
|
50
|
+
bordered: 'rounded-lg border border-gray-200 dark:border-white/10 divide-y divide-gray-200 dark:divide-white/10 bg-white dark:bg-gray-800 overflow-hidden',
|
|
51
|
+
separated: 'space-y-2',
|
|
52
|
+
plain: 'divide-y divide-gray-200 dark:divide-white/10',
|
|
53
|
+
};
|
|
54
|
+
const ITEM_CLASS = {
|
|
55
|
+
bordered: '',
|
|
56
|
+
separated: 'rounded-lg border border-gray-200 dark:border-white/10 bg-white dark:bg-gray-800 overflow-hidden',
|
|
57
|
+
plain: '',
|
|
58
|
+
};
|
|
59
|
+
const HEADER_CLASS = 'flex w-full items-center justify-between gap-2 py-3 px-4 text-left text-sm font-medium ' +
|
|
60
|
+
'text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-700/50 ' +
|
|
61
|
+
'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--ui-focus-ring)] ' +
|
|
62
|
+
'disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none ' +
|
|
63
|
+
'transition-colors duration-150 cursor-pointer';
|
|
64
|
+
const Accordion = ({ items, type = 'single', variant = 'bordered', collapsible = true, defaultOpenIds, openIds: controlledOpenIds, onChange, expandIcon, className = '', titleClass = '', panelClass = '', }) => {
|
|
65
|
+
const baseId = React.useId();
|
|
66
|
+
const resolvedItems = React.useMemo(() => items.map((item, index) => { var _a; return ({ ...item, id: (_a = item.id) !== null && _a !== void 0 ? _a : index }); }), [items]);
|
|
67
|
+
const [uncontrolledOpenIds, setUncontrolledOpenIds] = React.useState(defaultOpenIds !== null && defaultOpenIds !== void 0 ? defaultOpenIds : []);
|
|
68
|
+
const isControlled = controlledOpenIds !== undefined;
|
|
69
|
+
const openIds = isControlled ? controlledOpenIds : uncontrolledOpenIds;
|
|
70
|
+
const toggle = (id) => {
|
|
71
|
+
const isOpen = openIds.includes(id);
|
|
72
|
+
const next = type === 'single'
|
|
73
|
+
? isOpen
|
|
74
|
+
? collapsible
|
|
75
|
+
? []
|
|
76
|
+
: openIds
|
|
77
|
+
: [id]
|
|
78
|
+
: isOpen
|
|
79
|
+
? openIds.filter((openId) => openId !== id)
|
|
80
|
+
: [...openIds, id];
|
|
81
|
+
if (next === openIds)
|
|
82
|
+
return;
|
|
83
|
+
if (!isControlled)
|
|
84
|
+
setUncontrolledOpenIds(next);
|
|
85
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(next);
|
|
86
|
+
};
|
|
87
|
+
const renderIndicator = (isOpen) => {
|
|
88
|
+
if (typeof expandIcon === 'function')
|
|
89
|
+
return expandIcon(isOpen);
|
|
90
|
+
return (jsxRuntime.jsx("span", { className: buildClassName('inline-flex shrink-0 transition-transform duration-200', isOpen && 'rotate-180'), children: expandIcon !== null && expandIcon !== void 0 ? expandIcon : jsxRuntime.jsx(SvgChevronDown, { className: "size-4 stroke-gray-500 dark:stroke-gray-400" }) }));
|
|
91
|
+
};
|
|
92
|
+
return (jsxRuntime.jsx("div", { className: buildClassName(CONTAINER_CLASS[variant], className), children: resolvedItems.map((item) => {
|
|
93
|
+
const isOpen = openIds.includes(item.id);
|
|
94
|
+
const headerId = `${baseId}-${item.id}-header`;
|
|
95
|
+
const panelId = `${baseId}-${item.id}-panel`;
|
|
96
|
+
return (jsxRuntime.jsxs("div", { className: ITEM_CLASS[variant], children: [jsxRuntime.jsx("h3", { className: "m-0", children: jsxRuntime.jsxs("button", { type: "button", id: headerId, "aria-expanded": isOpen, "aria-controls": panelId, disabled: item.disabled, onClick: () => toggle(item.id), className: buildClassName(HEADER_CLASS, titleClass, item.titleClass), children: [jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [item.icon && jsxRuntime.jsx("span", { className: "inline-flex shrink-0", children: item.icon }), item.title] }), renderIndicator(isOpen)] }) }), jsxRuntime.jsx("div", { id: panelId, role: "region", "aria-labelledby": headerId, className: buildClassName('grid transition-[grid-template-rows] duration-200 ease-in-out', isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'), children: jsxRuntime.jsx("div", { className: "overflow-hidden", children: jsxRuntime.jsx("div", { className: buildClassName('px-4 pt-2 pb-4 text-sm text-gray-600 dark:text-gray-300', panelClass, item.panelClass), children: item.content }) }) })] }, item.id));
|
|
97
|
+
}) }));
|
|
98
|
+
};
|
|
99
|
+
Accordion.displayName = 'Accordion';
|
|
100
|
+
|
|
101
|
+
var _path$h, _path2;
|
|
102
|
+
function _extends$h() { return _extends$h = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$h.apply(null, arguments); }
|
|
103
|
+
var SvgBadgeCheck = function SvgBadgeCheck(props) {
|
|
104
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
|
|
105
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
106
|
+
width: 24,
|
|
107
|
+
height: 24,
|
|
108
|
+
fill: "none",
|
|
109
|
+
stroke: "currentColor",
|
|
110
|
+
strokeLinecap: "round",
|
|
111
|
+
strokeLinejoin: "round",
|
|
112
|
+
strokeWidth: 2,
|
|
113
|
+
className: "lucide lucide-badge-check-icon lucide-badge-check",
|
|
114
|
+
viewBox: "0 0 24 24"
|
|
115
|
+
}, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
|
|
45
116
|
d: "M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76"
|
|
46
117
|
})), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
47
118
|
d: "m9 12 2 2 4-4"
|
|
48
119
|
})));
|
|
49
120
|
};
|
|
50
121
|
|
|
51
|
-
var _circle$4, _path$
|
|
52
|
-
function _extends$
|
|
122
|
+
var _circle$4, _path$g;
|
|
123
|
+
function _extends$g() { return _extends$g = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$g.apply(null, arguments); }
|
|
53
124
|
var SvgCircleX = function SvgCircleX(props) {
|
|
54
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
125
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
|
|
55
126
|
xmlns: "http://www.w3.org/2000/svg",
|
|
56
127
|
width: 24,
|
|
57
128
|
height: 24,
|
|
@@ -66,15 +137,15 @@ var SvgCircleX = function SvgCircleX(props) {
|
|
|
66
137
|
cx: 12,
|
|
67
138
|
cy: 12,
|
|
68
139
|
r: 10
|
|
69
|
-
})), _path$
|
|
140
|
+
})), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
|
|
70
141
|
d: "m15 9-6 6M9 9l6 6"
|
|
71
142
|
})));
|
|
72
143
|
};
|
|
73
144
|
|
|
74
|
-
var _circle$3, _path$
|
|
75
|
-
function _extends$
|
|
145
|
+
var _circle$3, _path$f;
|
|
146
|
+
function _extends$f() { return _extends$f = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$f.apply(null, arguments); }
|
|
76
147
|
var SvgCircleAlert = function SvgCircleAlert(props) {
|
|
77
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
148
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
|
|
78
149
|
xmlns: "http://www.w3.org/2000/svg",
|
|
79
150
|
width: 24,
|
|
80
151
|
height: 24,
|
|
@@ -89,15 +160,15 @@ var SvgCircleAlert = function SvgCircleAlert(props) {
|
|
|
89
160
|
cx: 12,
|
|
90
161
|
cy: 12,
|
|
91
162
|
r: 10
|
|
92
|
-
})), _path$
|
|
163
|
+
})), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
|
|
93
164
|
d: "M12 8v4M12 16h.01"
|
|
94
165
|
})));
|
|
95
166
|
};
|
|
96
167
|
|
|
97
|
-
var _circle$2, _path$
|
|
98
|
-
function _extends$
|
|
168
|
+
var _circle$2, _path$e;
|
|
169
|
+
function _extends$e() { return _extends$e = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$e.apply(null, arguments); }
|
|
99
170
|
var SvgInfo = function SvgInfo(props) {
|
|
100
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
171
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
|
|
101
172
|
xmlns: "http://www.w3.org/2000/svg",
|
|
102
173
|
width: 24,
|
|
103
174
|
height: 24,
|
|
@@ -112,15 +183,15 @@ var SvgInfo = function SvgInfo(props) {
|
|
|
112
183
|
cx: 12,
|
|
113
184
|
cy: 12,
|
|
114
185
|
r: 10
|
|
115
|
-
})), _path$
|
|
186
|
+
})), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
|
|
116
187
|
d: "M12 16v-4M12 8h.01"
|
|
117
188
|
})));
|
|
118
189
|
};
|
|
119
190
|
|
|
120
|
-
var _path$
|
|
121
|
-
function _extends$
|
|
191
|
+
var _path$d;
|
|
192
|
+
function _extends$d() { return _extends$d = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$d.apply(null, arguments); }
|
|
122
193
|
var SvgX = function SvgX(props) {
|
|
123
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
194
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
|
|
124
195
|
xmlns: "http://www.w3.org/2000/svg",
|
|
125
196
|
width: 24,
|
|
126
197
|
height: 24,
|
|
@@ -131,7 +202,7 @@ var SvgX = function SvgX(props) {
|
|
|
131
202
|
strokeWidth: 2,
|
|
132
203
|
className: "lucide lucide-x-icon lucide-x",
|
|
133
204
|
viewBox: "0 0 24 24"
|
|
134
|
-
}, props), _path$
|
|
205
|
+
}, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
|
|
135
206
|
d: "M18 6 6 18M6 6l12 12"
|
|
136
207
|
})));
|
|
137
208
|
};
|
|
@@ -151,7 +222,7 @@ const TextContent = React.forwardRef((props, ref) => {
|
|
|
151
222
|
return React.createElement('span', {
|
|
152
223
|
...rest,
|
|
153
224
|
ref,
|
|
154
|
-
className: buildClassName('text-
|
|
225
|
+
className: buildClassName('text-[var(--ui-text)]', xsmall && 'text-xs/5', small && 'text-sm/6', strong && 'font-semibold', muted && 'text-[var(--ui-text-muted)]', error && 'text-[var(--ui-text-danger)]', className),
|
|
155
226
|
});
|
|
156
227
|
});
|
|
157
228
|
TextContent.displayName = 'TextContent';
|
|
@@ -288,10 +359,10 @@ const Badge = React.forwardRef((props, ref) => {
|
|
|
288
359
|
});
|
|
289
360
|
Badge.displayName = 'Badge';
|
|
290
361
|
|
|
291
|
-
var _path$
|
|
292
|
-
function _extends$
|
|
362
|
+
var _path$c;
|
|
363
|
+
function _extends$c() { return _extends$c = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$c.apply(null, arguments); }
|
|
293
364
|
var SvgTriangleAlert = function SvgTriangleAlert(props) {
|
|
294
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
365
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
|
|
295
366
|
xmlns: "http://www.w3.org/2000/svg",
|
|
296
367
|
width: 24,
|
|
297
368
|
height: 24,
|
|
@@ -302,15 +373,15 @@ var SvgTriangleAlert = function SvgTriangleAlert(props) {
|
|
|
302
373
|
strokeWidth: 2,
|
|
303
374
|
className: "lucide lucide-triangle-alert-icon lucide-triangle-alert",
|
|
304
375
|
viewBox: "0 0 24 24"
|
|
305
|
-
}, props), _path$
|
|
376
|
+
}, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
|
|
306
377
|
d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4M12 17h.01"
|
|
307
378
|
})));
|
|
308
379
|
};
|
|
309
380
|
|
|
310
|
-
var _circle$1, _path$
|
|
311
|
-
function _extends$
|
|
381
|
+
var _circle$1, _path$b;
|
|
382
|
+
function _extends$b() { return _extends$b = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$b.apply(null, arguments); }
|
|
312
383
|
var SvgCircleCheck = function SvgCircleCheck(props) {
|
|
313
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
384
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
|
|
314
385
|
xmlns: "http://www.w3.org/2000/svg",
|
|
315
386
|
width: 24,
|
|
316
387
|
height: 24,
|
|
@@ -325,7 +396,7 @@ var SvgCircleCheck = function SvgCircleCheck(props) {
|
|
|
325
396
|
cx: 12,
|
|
326
397
|
cy: 12,
|
|
327
398
|
r: 10
|
|
328
|
-
})), _path$
|
|
399
|
+
})), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
|
|
329
400
|
d: "m9 12 2 2 4-4"
|
|
330
401
|
})));
|
|
331
402
|
};
|
|
@@ -358,19 +429,28 @@ const Banner = React.forwardRef((props, ref) => {
|
|
|
358
429
|
Banner.displayName = 'Banner';
|
|
359
430
|
|
|
360
431
|
const BodyText = React.forwardRef((props, ref) => {
|
|
361
|
-
const { as = 'p', small = false, strong = false, muted = false, error = false, inline = false, className, ...rest } = props;
|
|
432
|
+
const { as = 'p', small = false, strong = false, muted = false, error = false, inline = false, className, invert, ...rest } = props;
|
|
433
|
+
const textColorClass = error
|
|
434
|
+
? 'text-[var(--ui-text-danger)]'
|
|
435
|
+
: muted
|
|
436
|
+
? invert
|
|
437
|
+
? 'text-gray-300 dark:text-gray-600'
|
|
438
|
+
: 'text-[var(--ui-text-muted)]'
|
|
439
|
+
: invert
|
|
440
|
+
? 'text-white dark:text-black'
|
|
441
|
+
: 'text-[var(--ui-text)]';
|
|
362
442
|
return React.createElement(as, {
|
|
363
443
|
ref: ref,
|
|
364
|
-
className: buildClassName(
|
|
444
|
+
className: buildClassName(textColorClass, small && 'text-sm/6', strong && 'font-semibold', inline && 'inline-flex items-center gap-2', className),
|
|
365
445
|
...rest,
|
|
366
446
|
});
|
|
367
447
|
});
|
|
368
448
|
BodyText.displayName = 'BodyText';
|
|
369
449
|
|
|
370
|
-
var _path$
|
|
371
|
-
function _extends$
|
|
450
|
+
var _path$a;
|
|
451
|
+
function _extends$a() { return _extends$a = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$a.apply(null, arguments); }
|
|
372
452
|
var SvgSlash = function SvgSlash(props) {
|
|
373
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
453
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
|
|
374
454
|
xmlns: "http://www.w3.org/2000/svg",
|
|
375
455
|
width: 24,
|
|
376
456
|
height: 24,
|
|
@@ -381,7 +461,7 @@ var SvgSlash = function SvgSlash(props) {
|
|
|
381
461
|
strokeWidth: 2,
|
|
382
462
|
className: "lucide lucide-slash-icon lucide-slash",
|
|
383
463
|
viewBox: "0 0 24 24"
|
|
384
|
-
}, props), _path$
|
|
464
|
+
}, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
|
|
385
465
|
d: "M22 2 2 22"
|
|
386
466
|
})));
|
|
387
467
|
};
|
|
@@ -393,6 +473,76 @@ const Breadcrumb = ({ items, render }) => {
|
|
|
393
473
|
};
|
|
394
474
|
Breadcrumb.displayName = 'Breadcrumb';
|
|
395
475
|
|
|
476
|
+
/**
|
|
477
|
+
* Corner-rounding classes for the group's first/last button, keyed by
|
|
478
|
+
* orientation + size, matching Button's own size -> radius mapping
|
|
479
|
+
* (xs: rounded-sm, sm: rounded, md: rounded-md, lg: rounded-lg).
|
|
480
|
+
*
|
|
481
|
+
* These must stay fully static string literals (no template-literal
|
|
482
|
+
* interpolation) — Tailwind's JIT scanner only picks up class names that
|
|
483
|
+
* appear verbatim in source, and the docs site scans the library's
|
|
484
|
+
* *compiled* output, where interpolated fragments never appear as a
|
|
485
|
+
* complete class name.
|
|
486
|
+
*/
|
|
487
|
+
const EDGE_ROUNDING = {
|
|
488
|
+
horizontal: {
|
|
489
|
+
xs: { first: 'rounded-l-sm rounded-r-none', last: 'rounded-r-sm rounded-l-none' },
|
|
490
|
+
sm: { first: 'rounded-l rounded-r-none', last: 'rounded-r rounded-l-none' },
|
|
491
|
+
md: { first: 'rounded-l-md rounded-r-none', last: 'rounded-r-md rounded-l-none' },
|
|
492
|
+
lg: { first: 'rounded-l-lg rounded-r-none', last: 'rounded-r-lg rounded-l-none' },
|
|
493
|
+
},
|
|
494
|
+
vertical: {
|
|
495
|
+
xs: { first: 'rounded-t-sm rounded-b-none', last: 'rounded-b-sm rounded-t-none' },
|
|
496
|
+
sm: { first: 'rounded-t rounded-b-none', last: 'rounded-b rounded-t-none' },
|
|
497
|
+
md: { first: 'rounded-t-md rounded-b-none', last: 'rounded-b-md rounded-t-none' },
|
|
498
|
+
lg: { first: 'rounded-t-lg rounded-b-none', last: 'rounded-b-lg rounded-t-none' },
|
|
499
|
+
},
|
|
500
|
+
};
|
|
501
|
+
const PILL_EDGE_ROUNDING = {
|
|
502
|
+
horizontal: { first: 'rounded-l-full rounded-r-none', last: 'rounded-r-full rounded-l-none' },
|
|
503
|
+
vertical: { first: 'rounded-t-full rounded-b-none', last: 'rounded-b-full rounded-t-none' },
|
|
504
|
+
};
|
|
505
|
+
/**
|
|
506
|
+
* Resolves the corner-rounding classes for a single button at `index`
|
|
507
|
+
* out of `count` inside the group, so only the group's outer edges stay
|
|
508
|
+
* rounded and interior seams go square.
|
|
509
|
+
*/
|
|
510
|
+
const getEdgeRoundingClass = ({ index, count, size, orientation, pill, }) => {
|
|
511
|
+
if (count <= 1)
|
|
512
|
+
return '';
|
|
513
|
+
if (index !== 0 && index !== count - 1)
|
|
514
|
+
return 'rounded-none';
|
|
515
|
+
const position = index === 0 ? 'first' : 'last';
|
|
516
|
+
return pill
|
|
517
|
+
? PILL_EDGE_ROUNDING[orientation][position]
|
|
518
|
+
: EDGE_ROUNDING[orientation][size][position];
|
|
519
|
+
};
|
|
520
|
+
const ButtonGroup = ({ children, orientation = 'horizontal', theme = 'secondary', variant = 'default', size = 'md', rounded = false, fullWidth = false, label, className = '', }) => {
|
|
521
|
+
const isVertical = orientation === 'vertical';
|
|
522
|
+
const items = React.useMemo(() => React.Children.toArray(children).filter(React.isValidElement), [children]);
|
|
523
|
+
const count = items.length;
|
|
524
|
+
return (jsxRuntime.jsx("div", { role: "group", "aria-label": label, className: buildClassName('inline-flex', isVertical ? 'flex-col' : 'flex-row', fullWidth && 'flex w-full', className), children: items.map((child, index) => {
|
|
525
|
+
var _a, _b, _c;
|
|
526
|
+
const childSize = (_a = child.props.size) !== null && _a !== void 0 ? _a : size;
|
|
527
|
+
return React.cloneElement(child, {
|
|
528
|
+
theme: (_b = child.props.theme) !== null && _b !== void 0 ? _b : theme,
|
|
529
|
+
variant: (_c = child.props.variant) !== null && _c !== void 0 ? _c : variant,
|
|
530
|
+
size: childSize,
|
|
531
|
+
className: buildClassName(child.props.className, getEdgeRoundingClass({
|
|
532
|
+
index,
|
|
533
|
+
count,
|
|
534
|
+
size: childSize,
|
|
535
|
+
orientation,
|
|
536
|
+
pill: rounded,
|
|
537
|
+
}), count > 1 && [
|
|
538
|
+
'relative shadow-none hover:z-10 focus:z-10 focus-visible:z-10',
|
|
539
|
+
index > 0 && (isVertical ? '-mt-px' : '-ml-px'),
|
|
540
|
+
], fullWidth && 'flex-1'),
|
|
541
|
+
});
|
|
542
|
+
}) }));
|
|
543
|
+
};
|
|
544
|
+
ButtonGroup.displayName = 'ButtonGroup';
|
|
545
|
+
|
|
396
546
|
const BASE_CARD_CLASS = 'bg-white rounded-md dark:bg-gray-900 block';
|
|
397
547
|
const Card = React.forwardRef(({ as, ...props }, ref) => {
|
|
398
548
|
// Remove Card-only props from rest (avoid leaking to DOM)
|
|
@@ -528,10 +678,10 @@ const usePagination = ({ totalPages, currentPage, siblingCount = 1, // number of
|
|
|
528
678
|
return [];
|
|
529
679
|
};
|
|
530
680
|
|
|
531
|
-
var _path$
|
|
532
|
-
function _extends$
|
|
681
|
+
var _path$9;
|
|
682
|
+
function _extends$9() { return _extends$9 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$9.apply(null, arguments); }
|
|
533
683
|
var SvgChevronLeft = function SvgChevronLeft(props) {
|
|
534
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
684
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
|
|
535
685
|
xmlns: "http://www.w3.org/2000/svg",
|
|
536
686
|
width: 24,
|
|
537
687
|
height: 24,
|
|
@@ -542,15 +692,15 @@ var SvgChevronLeft = function SvgChevronLeft(props) {
|
|
|
542
692
|
strokeWidth: 2,
|
|
543
693
|
className: "lucide lucide-chevron-left-icon lucide-chevron-left",
|
|
544
694
|
viewBox: "0 0 24 24"
|
|
545
|
-
}, props), _path$
|
|
695
|
+
}, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
546
696
|
d: "m15 18-6-6 6-6"
|
|
547
697
|
})));
|
|
548
698
|
};
|
|
549
699
|
|
|
550
|
-
var _path$
|
|
551
|
-
function _extends$
|
|
700
|
+
var _path$8;
|
|
701
|
+
function _extends$8() { return _extends$8 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$8.apply(null, arguments); }
|
|
552
702
|
var SvgChevronRight = function SvgChevronRight(props) {
|
|
553
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
703
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
|
|
554
704
|
xmlns: "http://www.w3.org/2000/svg",
|
|
555
705
|
width: 24,
|
|
556
706
|
height: 24,
|
|
@@ -561,7 +711,7 @@ var SvgChevronRight = function SvgChevronRight(props) {
|
|
|
561
711
|
strokeWidth: 2,
|
|
562
712
|
className: "lucide lucide-chevron-right-icon lucide-chevron-right",
|
|
563
713
|
viewBox: "0 0 24 24"
|
|
564
|
-
}, props), _path$
|
|
714
|
+
}, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
565
715
|
d: "m9 18 6-6-6-6"
|
|
566
716
|
})));
|
|
567
717
|
};
|
|
@@ -640,11 +790,53 @@ const updateSortQuery = (sortQuery, name, type = 'string') => {
|
|
|
640
790
|
}
|
|
641
791
|
return updated;
|
|
642
792
|
};
|
|
793
|
+
/**
|
|
794
|
+
* Shared row-selection state/behaviour used by DataTable and VirtualizedDataTable.
|
|
795
|
+
* Supports controlled (`selectedRowKeys`) and uncontrolled (`defaultSelectedRowKeys`) usage.
|
|
796
|
+
*/
|
|
797
|
+
const useRowSelection = ({ items, getKey, selectedRowKeys, defaultSelectedRowKeys = [], onSelectionChange, isRowSelectable, }) => {
|
|
798
|
+
const [internalKeys, setInternalKeys] = React.useState(defaultSelectedRowKeys);
|
|
799
|
+
const isControlled = selectedRowKeys !== undefined;
|
|
800
|
+
const keys = isControlled ? selectedRowKeys : internalKeys;
|
|
801
|
+
const keySet = React.useMemo(() => new Set(keys), [keys]);
|
|
802
|
+
const selectableEntries = React.useMemo(() => items
|
|
803
|
+
.map((item, idx) => ({ item, key: getKey(item, idx) }))
|
|
804
|
+
.filter(({ item }) => !isRowSelectable || isRowSelectable(item)), [items, getKey, isRowSelectable]);
|
|
805
|
+
const emit = React.useCallback((nextKeys) => {
|
|
806
|
+
if (!isControlled)
|
|
807
|
+
setInternalKeys(nextKeys);
|
|
808
|
+
const nextKeySet = new Set(nextKeys);
|
|
809
|
+
const nextItems = items.filter((item, idx) => nextKeySet.has(getKey(item, idx)));
|
|
810
|
+
onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(nextKeys, nextItems);
|
|
811
|
+
}, [isControlled, items, getKey, onSelectionChange]);
|
|
812
|
+
const toggleRow = React.useCallback((key) => {
|
|
813
|
+
emit(keySet.has(key) ? keys.filter((k) => k !== key) : [...keys, key]);
|
|
814
|
+
}, [keys, keySet, emit]);
|
|
815
|
+
const allSelected = selectableEntries.length > 0 && selectableEntries.every(({ key }) => keySet.has(key));
|
|
816
|
+
const someSelected = !allSelected && selectableEntries.some(({ key }) => keySet.has(key));
|
|
817
|
+
const toggleAll = React.useCallback(() => {
|
|
818
|
+
const selectableKeySet = new Set(selectableEntries.map(({ key }) => key));
|
|
819
|
+
if (allSelected) {
|
|
820
|
+
emit(keys.filter((k) => !selectableKeySet.has(k)));
|
|
821
|
+
}
|
|
822
|
+
else {
|
|
823
|
+
emit(Array.from(new Set([...keys, ...selectableKeySet])));
|
|
824
|
+
}
|
|
825
|
+
}, [allSelected, selectableEntries, keys, emit]);
|
|
826
|
+
return {
|
|
827
|
+
selectedKeys: keys,
|
|
828
|
+
isSelected: (key) => keySet.has(key),
|
|
829
|
+
toggleRow,
|
|
830
|
+
toggleAll,
|
|
831
|
+
allSelected,
|
|
832
|
+
someSelected,
|
|
833
|
+
};
|
|
834
|
+
};
|
|
643
835
|
|
|
644
|
-
var _path$
|
|
645
|
-
function _extends$
|
|
836
|
+
var _path$7;
|
|
837
|
+
function _extends$7() { return _extends$7 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$7.apply(null, arguments); }
|
|
646
838
|
var SvgArrowDownWideNarrow = function SvgArrowDownWideNarrow(props) {
|
|
647
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
839
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
|
|
648
840
|
xmlns: "http://www.w3.org/2000/svg",
|
|
649
841
|
width: 24,
|
|
650
842
|
height: 24,
|
|
@@ -655,15 +847,15 @@ var SvgArrowDownWideNarrow = function SvgArrowDownWideNarrow(props) {
|
|
|
655
847
|
strokeWidth: 2,
|
|
656
848
|
className: "lucide lucide-arrow-down-wide-narrow-icon lucide-arrow-down-wide-narrow",
|
|
657
849
|
viewBox: "0 0 24 24"
|
|
658
|
-
}, props), _path$
|
|
850
|
+
}, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
659
851
|
d: "m3 16 4 4 4-4M7 20V4M11 4h10M11 8h7M11 12h4"
|
|
660
852
|
})));
|
|
661
853
|
};
|
|
662
854
|
|
|
663
|
-
var _path$
|
|
664
|
-
function _extends$
|
|
855
|
+
var _path$6;
|
|
856
|
+
function _extends$6() { return _extends$6 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$6.apply(null, arguments); }
|
|
665
857
|
var SvgArrowDownNarrowWide = function SvgArrowDownNarrowWide(props) {
|
|
666
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
858
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
|
|
667
859
|
xmlns: "http://www.w3.org/2000/svg",
|
|
668
860
|
width: 24,
|
|
669
861
|
height: 24,
|
|
@@ -674,15 +866,15 @@ var SvgArrowDownNarrowWide = function SvgArrowDownNarrowWide(props) {
|
|
|
674
866
|
strokeWidth: 2,
|
|
675
867
|
className: "lucide lucide-arrow-down-narrow-wide-icon lucide-arrow-down-narrow-wide",
|
|
676
868
|
viewBox: "0 0 24 24"
|
|
677
|
-
}, props), _path$
|
|
869
|
+
}, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
678
870
|
d: "m3 16 4 4 4-4M7 20V4M11 4h4M11 8h7M11 12h10"
|
|
679
871
|
})));
|
|
680
872
|
};
|
|
681
873
|
|
|
682
|
-
var _path$
|
|
683
|
-
function _extends$
|
|
874
|
+
var _path$5;
|
|
875
|
+
function _extends$5() { return _extends$5 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$5.apply(null, arguments); }
|
|
684
876
|
var SvgArrowDownAz = function SvgArrowDownAz(props) {
|
|
685
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
877
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
|
|
686
878
|
xmlns: "http://www.w3.org/2000/svg",
|
|
687
879
|
width: 24,
|
|
688
880
|
height: 24,
|
|
@@ -693,15 +885,15 @@ var SvgArrowDownAz = function SvgArrowDownAz(props) {
|
|
|
693
885
|
strokeWidth: 2,
|
|
694
886
|
className: "lucide lucide-arrow-down-az-icon lucide-arrow-down-a-z",
|
|
695
887
|
viewBox: "0 0 24 24"
|
|
696
|
-
}, props), _path$
|
|
888
|
+
}, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
697
889
|
d: "m3 16 4 4 4-4M7 20V4M20 8h-5M15 10V6.5a2.5 2.5 0 0 1 5 0V10M15 14h5l-5 6h5"
|
|
698
890
|
})));
|
|
699
891
|
};
|
|
700
892
|
|
|
701
|
-
var _path$
|
|
702
|
-
function _extends$
|
|
893
|
+
var _path$4;
|
|
894
|
+
function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
|
|
703
895
|
var SvgArrowDownZa = function SvgArrowDownZa(props) {
|
|
704
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
896
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
|
|
705
897
|
xmlns: "http://www.w3.org/2000/svg",
|
|
706
898
|
width: 24,
|
|
707
899
|
height: 24,
|
|
@@ -712,15 +904,15 @@ var SvgArrowDownZa = function SvgArrowDownZa(props) {
|
|
|
712
904
|
strokeWidth: 2,
|
|
713
905
|
className: "lucide lucide-arrow-down-za-icon lucide-arrow-down-z-a",
|
|
714
906
|
viewBox: "0 0 24 24"
|
|
715
|
-
}, props), _path$
|
|
907
|
+
}, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
716
908
|
d: "m3 16 4 4 4-4M7 4v16M15 4h5l-5 6h5M15 20v-3.5a2.5 2.5 0 0 1 5 0V20M20 18h-5"
|
|
717
909
|
})));
|
|
718
910
|
};
|
|
719
911
|
|
|
720
|
-
var _path$
|
|
721
|
-
function _extends$
|
|
912
|
+
var _path$3;
|
|
913
|
+
function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
|
|
722
914
|
var SvgArrowUpDown = function SvgArrowUpDown(props) {
|
|
723
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
915
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
|
|
724
916
|
xmlns: "http://www.w3.org/2000/svg",
|
|
725
917
|
width: 24,
|
|
726
918
|
height: 24,
|
|
@@ -731,7 +923,7 @@ var SvgArrowUpDown = function SvgArrowUpDown(props) {
|
|
|
731
923
|
strokeWidth: 2,
|
|
732
924
|
className: "lucide lucide-arrow-up-down-icon lucide-arrow-up-down",
|
|
733
925
|
viewBox: "0 0 24 24"
|
|
734
|
-
}, props), _path$
|
|
926
|
+
}, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
735
927
|
d: "m21 16-4 4-4-4M17 20V4M3 8l4-4 4 4M7 4v16"
|
|
736
928
|
})));
|
|
737
929
|
};
|
|
@@ -773,7 +965,7 @@ const autoSortItems = (items, column, sort) => {
|
|
|
773
965
|
return 0;
|
|
774
966
|
});
|
|
775
967
|
};
|
|
776
|
-
function DataTable({ items, columns, sorting = {}, onSort, loading, pagination, setPagination = () => { }, emptyMessage = 'No data found', containerClass = '', wrapperClass = '', tableClass = '', headClass = '', footerRow, rowKey = 'id', onRowClick, rowClass, density = 'default', striped = false, layout = 'auto', }) {
|
|
968
|
+
function DataTable({ items, columns, sorting = {}, onSort, loading, pagination, setPagination = () => { }, emptyMessage = 'No data found', containerClass = '', wrapperClass = '', tableClass = '', headClass = '', footerRow, rowKey = 'id', onRowClick, rowClass, density = 'default', striped = false, layout = 'auto', selectable = false, selectedRowKeys, defaultSelectedRowKeys, onSelectionChange, isRowSelectable, }) {
|
|
777
969
|
const internalSorting = React.useRef({});
|
|
778
970
|
const [sortedItems, setSortedItems] = React.useState(items);
|
|
779
971
|
React.useEffect(() => {
|
|
@@ -808,25 +1000,41 @@ function DataTable({ items, columns, sorting = {}, onSort, loading, pagination,
|
|
|
808
1000
|
return column.cellClass(item);
|
|
809
1001
|
return column.cellClass;
|
|
810
1002
|
};
|
|
1003
|
+
const { isSelected, toggleRow, toggleAll, allSelected, someSelected } = useRowSelection({
|
|
1004
|
+
items: sortedItems,
|
|
1005
|
+
getKey,
|
|
1006
|
+
selectedRowKeys,
|
|
1007
|
+
defaultSelectedRowKeys,
|
|
1008
|
+
onSelectionChange,
|
|
1009
|
+
isRowSelectable,
|
|
1010
|
+
});
|
|
811
1011
|
const densityCellClass = DENSITY_CELL_CLASS$2[density];
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
1012
|
+
const colSize = columns.length + (selectable ? 1 : 0);
|
|
1013
|
+
return (jsxRuntime.jsxs("div", { className: buildClassName('w-full rounded-lg relative', containerClass), children: [jsxRuntime.jsx("div", { className: buildClassName('overflow-x-auto overflow-y-hidden rounded-lg border border-gray-200 dark:border-gray-800', wrapperClass, pagination && 'rounded-b-none border-b-0'), children: jsxRuntime.jsxs(Table, { className: buildClassName('relative w-full max-w-full h-fit', tableClass), layout: layout, children: [jsxRuntime.jsxs(TableHead, { className: headClass, children: [selectable && (jsxRuntime.jsx(TableHeaderCell, { className: buildClassName('bg-gray-50 dark:bg-gray-800 w-px', densityCellClass), children: jsxRuntime.jsx(Checkbox, { "aria-label": "Select all rows", checked: allSelected, ref: (el) => {
|
|
1014
|
+
if (el)
|
|
1015
|
+
el.indeterminate = someSelected;
|
|
1016
|
+
}, onChange: toggleAll }) })), columns.map((column) => (jsxRuntime.jsx(TableHeaderCell, { align: column.headerAlign, style: { width: column.width || 'auto' }, className: buildClassName('bg-gray-50 dark:bg-gray-800', densityCellClass, column.sticky === 'left' &&
|
|
1017
|
+
'sticky left-0 z-10 shadow-[2px_0_6px_rgba(0,0,0,0.06)]', column.sticky === 'right' &&
|
|
1018
|
+
'sticky right-0 z-10 shadow-[-2px_0_6px_rgba(0,0,0,0.06)]', column.headerClass), children: jsxRuntime.jsxs(TextContent, { role: column.sortable ? 'button' : undefined, className: buildClassName('group', column.sortable && 'inline-flex items-center gap-2 cursor-pointer select-none'), onClick: () => handleSort(column), children: [jsxRuntime.jsx(TextContent, { className: "shrink-0", children: column.label }), column.sortable ? getSortIcon(sorting[column.name]) : null] }) }, column.name)))] }), jsxRuntime.jsx(TableBody, { loading: loading, colSize: colSize, rowSize: (pagination === null || pagination === void 0 ? void 0 : pagination.limit) || 5, children: !loading && sortedItems.length === 0 ? (jsxRuntime.jsx(EmptyTableRow, { colSpan: colSize, children: emptyMessage })) : (sortedItems.map((item, idx) => {
|
|
1019
|
+
const key = getKey(item, idx);
|
|
1020
|
+
const rowSelectable = !isRowSelectable || isRowSelectable(item);
|
|
1021
|
+
return (jsxRuntime.jsxs(TableRow, { className: buildClassName('group', onRowClick && 'cursor-pointer', striped && idx % 2 === 1 && 'bg-gray-50 dark:bg-gray-800/40', getRowClass(item, idx)), onClick: onRowClick ? () => onRowClick(item, idx) : undefined, children: [selectable && (jsxRuntime.jsx(TableCell, { className: buildClassName(densityCellClass, striped && idx % 2 === 1 && 'bg-gray-50 dark:bg-gray-800/40'), children: jsxRuntime.jsx("span", { onClick: (e) => e.stopPropagation(), children: jsxRuntime.jsx(Checkbox, { "aria-label": "Select row", checked: isSelected(key), disabled: !rowSelectable, onChange: () => toggleRow(key) }) }) })), columns.map((column) => {
|
|
1022
|
+
var _a;
|
|
1023
|
+
return (jsxRuntime.jsx(TableCell, { align: column.align, className: buildClassName(densityCellClass, striped && idx % 2 === 1 && 'bg-gray-50 dark:bg-gray-800/40', column.sticky === 'left' &&
|
|
1024
|
+
'sticky left-0 z-10 shadow-[2px_0_6px_rgba(0,0,0,0.06)]', column.sticky === 'right' &&
|
|
1025
|
+
'sticky right-0 z-10 shadow-[-2px_0_6px_rgba(0,0,0,0.06)]', getCellClass(column, item)), children: column.render
|
|
1026
|
+
? column.render(item)
|
|
1027
|
+
: ((_a = get(item, column.name)) !== null && _a !== void 0 ? _a : 'Not set') }, column.name));
|
|
1028
|
+
})] }, key));
|
|
1029
|
+
})) }), footerRow && jsxRuntime.jsx(TableFoot, { children: footerRow })] }) }), pagination && (jsxRuntime.jsx(Pagination, { ...pagination, className: "rounded-b-lg border border-t-0 border-gray-200 dark:border-gray-800", onChange: setPagination }))] }));
|
|
822
1030
|
}
|
|
823
1031
|
DataTable.displayName = 'DataTable';
|
|
824
1032
|
|
|
825
|
-
const Title = ({ children, className }) => (jsxRuntime.jsx("h1", { className: buildClassName('text-3xl font-bold text-
|
|
826
|
-
const SubTitle = ({ children, className }) => (jsxRuntime.jsx("h2", { className: buildClassName('text-2xl font-semibold text-
|
|
827
|
-
const SubTitle2 = ({ children, className }) => (jsxRuntime.jsx("h3", { className: buildClassName('text-xl font-semibold text-
|
|
828
|
-
const SubTitle3 = ({ children, className }) => (jsxRuntime.jsx("h4", { className: buildClassName('text-lg font-medium text-
|
|
829
|
-
const SubTitle4 = ({ children, className }) => (jsxRuntime.jsx("h5", { className: buildClassName('text-base font-medium text-
|
|
1033
|
+
const Title = ({ children, className }) => (jsxRuntime.jsx("h1", { className: buildClassName('text-3xl font-bold text-[var(--ui-text)]', className), children: children }));
|
|
1034
|
+
const SubTitle = ({ children, className }) => (jsxRuntime.jsx("h2", { className: buildClassName('text-2xl font-semibold text-[var(--ui-text)]', className), children: children }));
|
|
1035
|
+
const SubTitle2 = ({ children, className }) => (jsxRuntime.jsx("h3", { className: buildClassName('text-xl font-semibold text-[var(--ui-text)]', className), children: children }));
|
|
1036
|
+
const SubTitle3 = ({ children, className }) => (jsxRuntime.jsx("h4", { className: buildClassName('text-lg font-medium text-[var(--ui-text)]', className), children: children }));
|
|
1037
|
+
const SubTitle4 = ({ children, className }) => (jsxRuntime.jsx("h5", { className: buildClassName('text-base font-medium text-[var(--ui-text)]', className), children: children }));
|
|
830
1038
|
const HeadingText = {
|
|
831
1039
|
Title,
|
|
832
1040
|
SubTitle,
|
|
@@ -883,10 +1091,10 @@ const Dropdown = ({ triggerButton, renderTriggerButton, items, renderItem, items
|
|
|
883
1091
|
};
|
|
884
1092
|
Dropdown.displayName = 'Dropdown';
|
|
885
1093
|
|
|
886
|
-
var _path$
|
|
887
|
-
function _extends$
|
|
1094
|
+
var _path$2;
|
|
1095
|
+
function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
|
|
888
1096
|
var SvgFolderPlus = function SvgFolderPlus(props) {
|
|
889
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1097
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
|
|
890
1098
|
xmlns: "http://www.w3.org/2000/svg",
|
|
891
1099
|
width: 24,
|
|
892
1100
|
height: 24,
|
|
@@ -897,7 +1105,7 @@ var SvgFolderPlus = function SvgFolderPlus(props) {
|
|
|
897
1105
|
strokeWidth: 2,
|
|
898
1106
|
className: "lucide lucide-folder-plus-icon lucide-folder-plus",
|
|
899
1107
|
viewBox: "0 0 24 24"
|
|
900
|
-
}, props), _path$
|
|
1108
|
+
}, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
901
1109
|
d: "M12 10v6M9 13h6M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
|
|
902
1110
|
})));
|
|
903
1111
|
};
|
|
@@ -918,7 +1126,7 @@ const Input = React.forwardRef((props, ref) => {
|
|
|
918
1126
|
const hasError = Boolean(error);
|
|
919
1127
|
const hasRightGroup = rightGroup !== null && rightGroup !== undefined;
|
|
920
1128
|
const hasLeftGroup = leftGroup != null && leftGroup !== undefined;
|
|
921
|
-
return (jsxRuntime.jsxs("div", { className: buildClassName('group', hasError && 'has-error', containerClass), children: [label && (jsxRuntime.jsxs("div", { className: buildClassName('flex items-center justify-between mb-2', labelWrapperClass), children: [jsxRuntime.jsx(Label, { className: labelClass, htmlFor: id, children: label }), labelHint] })), jsxRuntime.jsxs("div", { className: "relative", children: [hasLeftGroup && (jsxRuntime.jsx("span", { className: "absolute top-0 h-full flex items-center justify-center w-10", children: leftGroup })), jsxRuntime.jsx("input", { ref: ref, autoComplete: "off", ...inputProps, name: name, id: id, type: type, className: buildClassName(buildInputClass(className, { disabled: inputProps.disabled }), hasRightGroup ? 'pe-10' : '', hasLeftGroup ? 'ps-10' : '') }), hasRightGroup && (jsxRuntime.jsx("span", { className: "absolute end-0.75 top-0 h-full flex items-center justify-center w-10", children: rightGroup }))] }), showErrorMessage && error && (jsxRuntime.jsx("div", { className: "mt-1", children: jsxRuntime.jsx(TextContent, { error: true, small: true, children: error }) }))] }));
|
|
1129
|
+
return (jsxRuntime.jsxs("div", { className: buildClassName('group', hasError && 'has-error', containerClass), children: [label && (jsxRuntime.jsxs("div", { className: buildClassName('flex items-center justify-between mb-2', labelWrapperClass), children: [jsxRuntime.jsx(Label, { className: labelClass, htmlFor: id, children: label }), jsxRuntime.jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxRuntime.jsxs("div", { className: "relative", children: [hasLeftGroup && (jsxRuntime.jsx("span", { className: "absolute top-0 h-full flex items-center justify-center w-10", children: leftGroup })), jsxRuntime.jsx("input", { ref: ref, autoComplete: "off", ...inputProps, name: name, id: id, type: type, className: buildClassName(buildInputClass(className, { disabled: inputProps.disabled }), hasRightGroup ? 'pe-10' : '', hasLeftGroup ? 'ps-10' : '') }), hasRightGroup && (jsxRuntime.jsx("span", { className: "absolute end-0.75 top-0 h-full flex items-center justify-center w-10", children: rightGroup }))] }), showErrorMessage && error && (jsxRuntime.jsx("div", { className: "mt-1", children: jsxRuntime.jsx(TextContent, { error: true, small: true, children: error }) }))] }));
|
|
922
1130
|
});
|
|
923
1131
|
Input.displayName = 'Input';
|
|
924
1132
|
|
|
@@ -988,7 +1196,7 @@ const RadioSwitch = ({ label, items, selected, onChange, wrapperClass, switchCla
|
|
|
988
1196
|
transform: `translate(${style.left}px, ${style.top}px)`,
|
|
989
1197
|
width: style.width,
|
|
990
1198
|
height: style.height,
|
|
991
|
-
} }), items.map((item) => (jsxRuntime.jsx(react.Radio, { value: getValue(item), "data-radio-item": true, "data-value": getValue(item), className: buildClassName('relative z-10 cursor-pointer select-none group', 'px-4 py-2 rounded-md transition-colors', 'text-gray-700 dark:text-gray-300 data-checked:text-white'), children: jsxRuntime.jsxs("div", { className: buildClassName('flex flex-col items-center justify-center gap-1', contentClass), children: [jsxRuntime.jsx(BodyText, { className:
|
|
1199
|
+
} }), items.map((item) => (jsxRuntime.jsx(react.Radio, { value: getValue(item), "data-radio-item": true, "data-value": getValue(item), className: buildClassName('relative z-10 cursor-pointer select-none group', 'px-4 py-2 rounded-md transition-colors', 'text-gray-700 dark:text-gray-300 data-checked:text-white'), children: jsxRuntime.jsxs("div", { className: buildClassName('flex flex-col items-center justify-center gap-1', contentClass), children: [jsxRuntime.jsx(BodyText, { className: buildClassName('font-semibold', selected === getValue(item) && 'text-white'), children: getLabel(item) }), getDescription(item) && (jsxRuntime.jsx(BodyText, { className: buildClassName('text-xs opacity-80', descriptionClass, selected === getValue(item) && 'text-white'), children: getDescription(item) }))] }) }, getValue(item))))] }));
|
|
992
1200
|
};
|
|
993
1201
|
|
|
994
1202
|
/**
|
|
@@ -1159,28 +1367,9 @@ const useDebounceFn = (fn, ms) => {
|
|
|
1159
1367
|
}, [fn, ms]);
|
|
1160
1368
|
};
|
|
1161
1369
|
|
|
1162
|
-
var _path$2;
|
|
1163
|
-
function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
|
|
1164
|
-
var SvgCheck = function SvgCheck(props) {
|
|
1165
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
|
|
1166
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1167
|
-
width: 24,
|
|
1168
|
-
height: 24,
|
|
1169
|
-
fill: "none",
|
|
1170
|
-
stroke: "currentColor",
|
|
1171
|
-
strokeLinecap: "round",
|
|
1172
|
-
strokeLinejoin: "round",
|
|
1173
|
-
strokeWidth: 2,
|
|
1174
|
-
className: "lucide lucide-check-icon lucide-check",
|
|
1175
|
-
viewBox: "0 0 24 24"
|
|
1176
|
-
}, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1177
|
-
d: "M20 6 9 17l-5-5"
|
|
1178
|
-
})));
|
|
1179
|
-
};
|
|
1180
|
-
|
|
1181
1370
|
var _path$1;
|
|
1182
1371
|
function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
|
|
1183
|
-
var
|
|
1372
|
+
var SvgCheck = function SvgCheck(props) {
|
|
1184
1373
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
|
|
1185
1374
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1186
1375
|
width: 24,
|
|
@@ -1190,10 +1379,10 @@ var SvgChevronDown = function SvgChevronDown(props) {
|
|
|
1190
1379
|
strokeLinecap: "round",
|
|
1191
1380
|
strokeLinejoin: "round",
|
|
1192
1381
|
strokeWidth: 2,
|
|
1193
|
-
className: "lucide lucide-
|
|
1382
|
+
className: "lucide lucide-check-icon lucide-check",
|
|
1194
1383
|
viewBox: "0 0 24 24"
|
|
1195
1384
|
}, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1196
|
-
d: "
|
|
1385
|
+
d: "M20 6 9 17l-5-5"
|
|
1197
1386
|
})));
|
|
1198
1387
|
};
|
|
1199
1388
|
|
|
@@ -1222,7 +1411,7 @@ var SvgCirclePlus = function SvgCirclePlus(props) {
|
|
|
1222
1411
|
|
|
1223
1412
|
const constructInputClass = (disabled) => buildInputClass('', { disabled });
|
|
1224
1413
|
const SelectBox = React.forwardRef((props, forwardedRef) => {
|
|
1225
|
-
const { labelKey = 'label', valueKey = 'value', name, id = name, options, selected, label = null, labelWrapperClass = '', labelClass = '', labelHint = null, disabled = false, containerClass = '', onChange = () => { }, placeholder, dropdownContainerClass = 'z-20', multiple = false, maxSelection, immediate = true, showErrorMessage = true, error = null, async = false, searchable = true, required = false, allowAdd = false, addNewText = 'Create', onAdd = () => { }, allowClear = false, modalDropdown = false, } = props;
|
|
1414
|
+
const { labelKey = 'label', valueKey = 'value', name, id = name, options, selected, label = null, labelWrapperClass = '', labelClass = '', labelHint = null, disabled = false, containerClass = '', onChange = () => { }, placeholder, dropdownContainerClass = 'z-20', multiple = false, maxSelection, immediate = true, showErrorMessage = true, error = null, async = false, searchable = true, required = false, allowAdd = false, addNewText = 'Create', onAdd = () => { }, allowClear = false, modalDropdown = false, noOptionsText = 'No options available', } = props;
|
|
1226
1415
|
const hasError = Boolean(error);
|
|
1227
1416
|
const [query, setQuery] = React.useState('');
|
|
1228
1417
|
const debouncedQuery = useDebounce(query, 500);
|
|
@@ -1341,7 +1530,7 @@ const SelectBox = React.forwardRef((props, forwardedRef) => {
|
|
|
1341
1530
|
if (async && debouncedQuery)
|
|
1342
1531
|
handleSearch(debouncedQuery);
|
|
1343
1532
|
}, [debouncedQuery, async, handleSearch]);
|
|
1344
|
-
return (jsxRuntime.jsxs("div", { className: buildClassName('group space-y-2', hasError && 'has-error', containerClass), ref: containerRef, children: [label && (jsxRuntime.jsxs("div", { className: buildClassName('flex items-center justify-between', labelWrapperClass), children: [jsxRuntime.jsx(Label, { className: labelClass, htmlFor: id, "aria-required": required, children: label }), labelHint] })), jsxRuntime.jsxs(react.Combobox, { multiple: multiple, immediate: immediate, name: name, value: selected, onChange: comboboxOnChangeWrapper, onClose: () => setQuery(''), disabled: disabled, children: [multiple ? (jsxRuntime.jsxs("div", { className: buildClassName(inputClass, 'flex flex-wrap gap-2 peer relative'), ref: forwardedRef, children: [isArray(selected) &&
|
|
1533
|
+
return (jsxRuntime.jsxs("div", { className: buildClassName('group space-y-2', hasError && 'has-error', containerClass), ref: containerRef, children: [label && (jsxRuntime.jsxs("div", { className: buildClassName('flex items-center justify-between', labelWrapperClass), children: [jsxRuntime.jsx(Label, { className: labelClass, htmlFor: id, "aria-required": required, children: label }), jsxRuntime.jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxRuntime.jsxs(react.Combobox, { multiple: multiple, immediate: immediate, name: name, value: selected, onChange: comboboxOnChangeWrapper, onClose: () => setQuery(''), disabled: disabled, children: [multiple ? (jsxRuntime.jsxs("div", { className: buildClassName(inputClass, 'flex flex-wrap gap-2 peer relative'), ref: forwardedRef, children: [isArray(selected) &&
|
|
1345
1534
|
(selected === null || selected === void 0 ? void 0 : selected.length) > 0 &&
|
|
1346
1535
|
selected.map((option, idx) => (jsxRuntime.jsx(Badge, { theme: "secondary", removable: !disabled, onRemove: () => removeSelection(idx), children: getDisplayValue(option) }, `${getValue(option)}-${idx}`))), jsxRuntime.jsx(react.ComboboxInput, { className: "outline-none flex-1 dark:placeholder-gray-400 placeholder-gray-400", "aria-label": name, value: query, autoComplete: "off", placeholder: (selected === null || selected === void 0 ? void 0 : selected.length) ? '' : placeholder, onChange: (e) => setQuery(e.target.value), id: id, ref: inputRef, onKeyDown: (e) => {
|
|
1347
1536
|
if (multiple && e.key === 'Backspace' && !query) {
|
|
@@ -1349,7 +1538,7 @@ const SelectBox = React.forwardRef((props, forwardedRef) => {
|
|
|
1349
1538
|
removeSelection(selected.length - 1);
|
|
1350
1539
|
}
|
|
1351
1540
|
}
|
|
1352
|
-
}, "data-testid": "combobox-input" }), jsxRuntime.jsx(react.ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5", "data-testid": "combobox-button", children: jsxRuntime.jsx(SvgChevronDown, { className: chevronIconClass }) })] })) : (jsxRuntime.jsxs("div", { className: "relative", ref: forwardedRef, children: [jsxRuntime.jsx(react.ComboboxInput, { "aria-label": name, displayValue: (option) => (option ? getDisplayValue(option) : null), autoComplete: "off", placeholder: placeholder, onChange: (event) => setQuery(event.target.value), className: inputClass, disabled: disabled, id: id, readOnly: !searchable, ref: inputRef, "data-testid": "combobox-input" }), allowClear && !isEmpty(selected) && (jsxRuntime.jsx(Button, { size: "xs", iconOnly: true, "aria-label": "Clear selection", theme: "secondary", variant: "plain", className: "group absolute inset-y-0 right-8 h-6 top-2", onClick: () => handleOnChangeInternal(multiple ? [] : null), disabled: disabled, "data-testid": "combobox-clear-button", noOutlineOnFocus: true, children: jsxRuntime.jsx(SvgX, { className: "size-4 stroke-gray-500 dark:stroke-gray-300" }) })), jsxRuntime.jsx(react.ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5", "data-testid": "combobox-button", children: jsxRuntime.jsx(SvgChevronDown, { className: chevronIconClass }) })] })), jsxRuntime.jsx(react.ComboboxOptions, { anchor: { to: 'bottom', gap: 5 }, as: "div", modal: modalDropdown, className: buildClassName('w-[var(--input-width)] rounded-lg border border-gray-200 dark:border-white/5 bg-white dark:bg-gray-800 p-1 [--anchor-gap:var(--spacing-1)]', '[--anchor-max-height:20rem]', 'origin-top border transition duration-200 ease-[cubic-bezier(0.4, 0.0, 0.2, 1)] data-[closed]:translate-y-[-15%] data-[closed]:opacity-0', dropdownContainerClass), transition: true, "data-testid": "combobox-options", children: optionsLoading ? (jsxRuntime.jsx(BodyText, { "data-testid": "options-loading", className: "flex items-center justify-center py-2 px-3 select-none", children: jsxRuntime.jsx(Loader, { size: "sm" }) })) : shouldShowTypeToSearch ? (jsxRuntime.jsx(BodyText, { className: "flex items-center justify-between py-2 px-3 select-none", children: "Type to search..." })) : (jsxRuntime.jsxs("div", { children: [filteredOptions.map((option) => (jsxRuntime.jsx(react.ComboboxOption, { disabled: option.disabled, value: option, className: "group rounded-lg py-1.5 px-3 select-none data-[focus]:bg-black/3 dark:data-[focus]:bg-white/10 data-disabled:opacity-50 cursor-pointer data-disabled:pointer-events-none", children: jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 dark:text-white group-data-[selected]:text-blue-600", children: [jsxRuntime.jsx("span", { className: "text-sm/6", children: getDisplayValue(option) }), jsxRuntime.jsx(SvgCheck, { className: "invisible size-5 dark:stroke-gray-300 group-data-[selected]:visible" })] }) }, getValue(option)))), filteredOptions.length === 0 &&
|
|
1541
|
+
}, "data-testid": "combobox-input" }), jsxRuntime.jsx(react.ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5", "data-testid": "combobox-button", children: jsxRuntime.jsx(SvgChevronDown, { className: chevronIconClass }) })] })) : (jsxRuntime.jsxs("div", { className: "relative", ref: forwardedRef, children: [jsxRuntime.jsx(react.ComboboxInput, { "aria-label": name, displayValue: (option) => (option ? getDisplayValue(option) : null), autoComplete: "off", placeholder: placeholder, onChange: (event) => setQuery(event.target.value), className: inputClass, disabled: disabled, id: id, readOnly: !searchable, ref: inputRef, "data-testid": "combobox-input" }), allowClear && !isEmpty(selected) && (jsxRuntime.jsx(Button, { size: "xs", iconOnly: true, "aria-label": "Clear selection", theme: "secondary", variant: "plain", className: "group absolute inset-y-0 right-8 h-6 top-2", onClick: () => handleOnChangeInternal(multiple ? [] : null), disabled: disabled, "data-testid": "combobox-clear-button", noOutlineOnFocus: true, children: jsxRuntime.jsx(SvgX, { className: "size-4 stroke-gray-500 dark:stroke-gray-300" }) })), jsxRuntime.jsx(react.ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5", "data-testid": "combobox-button", children: jsxRuntime.jsx(SvgChevronDown, { className: chevronIconClass }) })] })), jsxRuntime.jsx(react.ComboboxOptions, { anchor: { to: 'bottom', gap: 5 }, as: "div", modal: modalDropdown, className: buildClassName('w-[var(--input-width)] rounded-lg border border-gray-200 dark:border-white/5 bg-white dark:bg-gray-800 p-1 [--anchor-gap:var(--spacing-1)]', '[--anchor-max-height:20rem]', 'origin-top border transition duration-200 ease-[cubic-bezier(0.4, 0.0, 0.2, 1)] data-[closed]:translate-y-[-15%] data-[closed]:opacity-0', dropdownContainerClass), transition: true, "data-testid": "combobox-options", children: optionsLoading ? (jsxRuntime.jsx(BodyText, { "data-testid": "options-loading", className: "flex items-center justify-center py-2 px-3 select-none", children: jsxRuntime.jsx(Loader, { size: "sm" }) })) : shouldShowTypeToSearch ? (jsxRuntime.jsx(BodyText, { className: "flex items-center justify-between py-2 px-3 select-none", children: "Type to search..." })) : (jsxRuntime.jsxs("div", { children: [filteredOptions.map((option) => (jsxRuntime.jsx(react.ComboboxOption, { disabled: option.disabled, value: option, className: "group rounded-lg py-1.5 px-3 select-none data-[focus]:bg-black/3 dark:data-[focus]:bg-white/10 data-disabled:opacity-50 cursor-pointer data-disabled:pointer-events-none", children: jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 dark:text-white group-data-[selected]:text-blue-600", children: [jsxRuntime.jsx("span", { className: "text-sm/6", children: getDisplayValue(option) }), jsxRuntime.jsx(SvgCheck, { className: "invisible size-5 dark:stroke-gray-300 group-data-[selected]:visible" })] }) }, getValue(option)))), filteredOptions.length === 0 && (jsxRuntime.jsx("div", { "data-testid": "no-result-found", className: "flex items-center gap-2 py-1.5 px-3 select-none text-gray-500 dark:text-gray-400", children: query ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["No results found for ", jsxRuntime.jsx("span", { className: "font-semibold", children: query })] })) : (noOptionsText) })), allowAdd && (jsxRuntime.jsx(react.ComboboxOption, { value: query, className: "group rounded-lg py-1.5 px-3 cursor-pointer text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700", onClick: () => void handleAddAndSelect(query), children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx(SvgCirclePlus, { className: "size-4.5" }), jsxRuntime.jsxs(TextContent, { children: [addNewText, " \"", query, "\""] })] }) }))] })) })] }), showErrorMessage && error && (jsxRuntime.jsx("div", { className: "mt-1", children: jsxRuntime.jsx(TextContent, { error: true, small: true, children: error }) }))] }));
|
|
1353
1542
|
});
|
|
1354
1543
|
|
|
1355
1544
|
const Tabs = ({ tabs, defaultIndex = 0, selectedIndex, onChange, variant = 'underline', orientation = 'horizontal', stretch = false, className = '', listClass = '', panelsClass = '', }) => {
|
|
@@ -1401,7 +1590,7 @@ const Textarea = React.forwardRef((props, ref) => {
|
|
|
1401
1590
|
const hasError = !isEmpty(error);
|
|
1402
1591
|
const hasRightGroup = rightGroup != null && rightGroup !== undefined;
|
|
1403
1592
|
const hasLeftGroup = leftGroup != null && leftGroup !== undefined;
|
|
1404
|
-
return (jsxRuntime.jsxs("div", { className: buildClassName('group', hasError && 'has-error', containerClass), children: [label && (jsxRuntime.jsxs("div", { className: buildClassName('flex items-center justify-between mb-2', labelWrapperClass), children: [jsxRuntime.jsx(Label, { className: labelClass, htmlFor: id, children: label }), labelHint] })), jsxRuntime.jsxs("div", { className: "relative", children: [hasLeftGroup && (jsxRuntime.jsx("span", { className: "absolute top-0 h-full flex items-center justify-center w-10", children: leftGroup })), jsxRuntime.jsx("textarea", { ref: ref, autoComplete: "off", ...inputProps, name: name, id: id, className: buildClassName('transition-all', 'block w-full rounded-lg bg-white px-3.5 py-2 text-base sm:text-sm/6', 'text-gray-900 outline dark:outline outline-1 -outline-offset-1', 'outline-gray-300 dark:outline-gray-600', 'focus:outline-blue-600 dark:focus:outline-blue-600 focus:outline-2 focus:-outline-offset-2', 'dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 placeholder:text-gray-400 dark:text-white', 'invalid:group-[.has-error]:outline-red-500', 'disabled:pointer-events-none disabled:bg-gray-100', 'dark:disabled:bg-gray-500', hasRightGroup ? 'pe-10' : '', hasLeftGroup ? 'ps-10' : '', className) }), hasRightGroup && (jsxRuntime.jsx("span", { className: "absolute end-0.75 top-0 h-full flex items-center justify-center", children: rightGroup }))] }), showErrorMessage && error && (jsxRuntime.jsx("div", { className: "mt-1", children: jsxRuntime.jsx(TextContent, { error: true, small: true, children: error }) }))] }));
|
|
1593
|
+
return (jsxRuntime.jsxs("div", { className: buildClassName('group', hasError && 'has-error', containerClass), children: [label && (jsxRuntime.jsxs("div", { className: buildClassName('flex items-center justify-between mb-2', labelWrapperClass), children: [jsxRuntime.jsx(Label, { className: labelClass, htmlFor: id, children: label }), jsxRuntime.jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxRuntime.jsxs("div", { className: "relative", children: [hasLeftGroup && (jsxRuntime.jsx("span", { className: "absolute top-0 h-full flex items-center justify-center w-10", children: leftGroup })), jsxRuntime.jsx("textarea", { ref: ref, autoComplete: "off", ...inputProps, name: name, id: id, className: buildClassName('transition-all', 'block w-full rounded-lg bg-white px-3.5 py-2 text-base sm:text-sm/6', 'text-gray-900 outline dark:outline outline-1 -outline-offset-1', 'outline-gray-300 dark:outline-gray-600', 'focus:outline-blue-600 dark:focus:outline-blue-600 focus:outline-2 focus:-outline-offset-2', 'dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 placeholder:text-gray-400 dark:text-white', 'invalid:group-[.has-error]:outline-red-500', 'disabled:pointer-events-none disabled:bg-gray-100', 'dark:disabled:bg-gray-500', hasRightGroup ? 'pe-10' : '', hasLeftGroup ? 'ps-10' : '', className) }), hasRightGroup && (jsxRuntime.jsx("span", { className: "absolute end-0.75 top-0 h-full flex items-center justify-center", children: rightGroup }))] }), showErrorMessage && error && (jsxRuntime.jsx("div", { className: "mt-1", children: jsxRuntime.jsx(TextContent, { error: true, small: true, children: error }) }))] }));
|
|
1405
1594
|
});
|
|
1406
1595
|
|
|
1407
1596
|
/**
|
|
@@ -1504,9 +1693,12 @@ const DENSITY_CELL_CLASS$1 = {
|
|
|
1504
1693
|
spacious: 'px-4 py-4',
|
|
1505
1694
|
};
|
|
1506
1695
|
const VirtualizedRow = ({ index, style, data, }) => {
|
|
1507
|
-
|
|
1696
|
+
var _a, _b;
|
|
1697
|
+
const { items, columns, gridTemplate, onRowClick, rowClass, density = 'default', striped, selectable, getKey, isSelected, toggleRow, isRowSelectable, } = data;
|
|
1508
1698
|
const item = items[index];
|
|
1509
1699
|
const isStriped = striped && index % 2 === 1;
|
|
1700
|
+
const key = (_a = getKey === null || getKey === void 0 ? void 0 : getKey(item, index)) !== null && _a !== void 0 ? _a : index;
|
|
1701
|
+
const rowSelectable = !isRowSelectable || isRowSelectable(item);
|
|
1510
1702
|
const resolvedRowClass = !rowClass
|
|
1511
1703
|
? ''
|
|
1512
1704
|
: typeof rowClass === 'function'
|
|
@@ -1520,20 +1712,21 @@ const VirtualizedRow = ({ index, style, data, }) => {
|
|
|
1520
1712
|
return col.cellClass;
|
|
1521
1713
|
};
|
|
1522
1714
|
const densityCellClass = DENSITY_CELL_CLASS$1[density];
|
|
1523
|
-
return (jsxRuntime.
|
|
1715
|
+
return (jsxRuntime.jsxs("div", { role: "row", className: buildClassName('grid border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 group', onRowClick && 'cursor-pointer', isStriped && 'bg-gray-50 dark:bg-gray-800/40', resolvedRowClass), style: {
|
|
1524
1716
|
...style,
|
|
1525
1717
|
display: 'grid',
|
|
1526
1718
|
gridTemplateColumns: gridTemplate,
|
|
1527
1719
|
minWidth: 'fit-content',
|
|
1528
|
-
}, onClick: onRowClick ? () => onRowClick(item, index) : undefined, children: columns.map((col) => {
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
|
|
1534
|
-
|
|
1720
|
+
}, onClick: onRowClick ? () => onRowClick(item, index) : undefined, children: [selectable && (jsxRuntime.jsx("div", { role: "cell", className: buildClassName('flex items-center whitespace-nowrap border-r last:border-r-0 border-gray-200 dark:border-gray-700', densityCellClass, isStriped && 'bg-gray-50 dark:bg-gray-800/40'), onClick: (e) => e.stopPropagation(), children: jsxRuntime.jsx(Checkbox, { "aria-label": "Select row", checked: (_b = isSelected === null || isSelected === void 0 ? void 0 : isSelected(key)) !== null && _b !== void 0 ? _b : false, disabled: !rowSelectable, onChange: () => toggleRow === null || toggleRow === void 0 ? void 0 : toggleRow(key) }) })), columns.map((col) => {
|
|
1721
|
+
var _a;
|
|
1722
|
+
const content = col.render ? col.render(item) : ((_a = get(item, col.name)) !== null && _a !== void 0 ? _a : 'Not set');
|
|
1723
|
+
return (jsxRuntime.jsx("div", { role: "cell", className: buildClassName('whitespace-nowrap border-r last:border-r-0 border-gray-200 dark:border-gray-700', densityCellClass, col.align === 'center' && 'text-center', col.align === 'right' && 'text-right', col.sticky === 'left' &&
|
|
1724
|
+
'sticky left-0 z-10 bg-white dark:bg-gray-900 shadow-[2px_0_4px_rgba(0,0,0,0.05)]', col.sticky === 'right' &&
|
|
1725
|
+
'sticky right-0 z-10 bg-white dark:bg-gray-900 shadow-[-2px_0_4px_rgba(0,0,0,0.05)]', isStriped && 'bg-gray-50 dark:bg-gray-800/40', getCellClass(col)), children: content }, col.name));
|
|
1726
|
+
})] }));
|
|
1535
1727
|
};
|
|
1536
1728
|
|
|
1729
|
+
const SELECTION_COLUMN_WIDTH = '44px';
|
|
1537
1730
|
const DENSITY_CELL_CLASS = {
|
|
1538
1731
|
compact: 'px-2 py-1.5',
|
|
1539
1732
|
default: 'px-3 py-3',
|
|
@@ -1546,11 +1739,28 @@ const columnWidth = (col) => {
|
|
|
1546
1739
|
return `${col.width}px`;
|
|
1547
1740
|
return col.width;
|
|
1548
1741
|
};
|
|
1549
|
-
function VirtualizedDataTable({ items, columns, sorting = {}, onSort, loading = false, emptyMessage = 'No data available', containerClass = '', wrapperClass = '', onRowClick, rowClass, density = 'default', striped = false, rowHeight = 48, maxHeight = 400, overscanCount = 3, }) {
|
|
1742
|
+
function VirtualizedDataTable({ items, columns, sorting = {}, onSort, loading = false, emptyMessage = 'No data available', containerClass = '', wrapperClass = '', onRowClick, rowClass, density = 'default', striped = false, rowHeight = 48, maxHeight = 400, overscanCount = 3, rowKey = 'id', selectable = false, selectedRowKeys, defaultSelectedRowKeys, onSelectionChange, isRowSelectable, }) {
|
|
1550
1743
|
const scrollRef = React.useRef(null);
|
|
1551
1744
|
const outerRef = React.useRef(null);
|
|
1552
1745
|
const headerRef = React.useRef(null);
|
|
1553
|
-
const
|
|
1746
|
+
const getKey = React.useCallback((item, idx) => {
|
|
1747
|
+
var _a;
|
|
1748
|
+
if (typeof rowKey === 'function')
|
|
1749
|
+
return rowKey(item);
|
|
1750
|
+
return (_a = item[rowKey]) !== null && _a !== void 0 ? _a : idx;
|
|
1751
|
+
}, [rowKey]);
|
|
1752
|
+
const { isSelected, toggleRow, toggleAll, allSelected, someSelected } = useRowSelection({
|
|
1753
|
+
items,
|
|
1754
|
+
getKey,
|
|
1755
|
+
selectedRowKeys,
|
|
1756
|
+
defaultSelectedRowKeys,
|
|
1757
|
+
onSelectionChange,
|
|
1758
|
+
isRowSelectable,
|
|
1759
|
+
});
|
|
1760
|
+
const gridTemplate = React.useMemo(() => {
|
|
1761
|
+
const widths = columns.map((col) => columnWidth(col));
|
|
1762
|
+
return selectable ? [SELECTION_COLUMN_WIDTH, ...widths].join(' ') : widths.join(' ');
|
|
1763
|
+
}, [columns, selectable]);
|
|
1554
1764
|
const densityCellClass = DENSITY_CELL_CLASS[density];
|
|
1555
1765
|
const skeletonRows = Math.max(1, Math.floor(maxHeight / rowHeight));
|
|
1556
1766
|
React.useEffect(() => {
|
|
@@ -1568,19 +1778,48 @@ function VirtualizedDataTable({ items, columns, sorting = {}, onSort, loading =
|
|
|
1568
1778
|
if (column.sortable)
|
|
1569
1779
|
onSort === null || onSort === void 0 ? void 0 : onSort(column);
|
|
1570
1780
|
}, [onSort]);
|
|
1571
|
-
const itemData = React.useMemo(() => ({
|
|
1781
|
+
const itemData = React.useMemo(() => ({
|
|
1782
|
+
items,
|
|
1783
|
+
columns,
|
|
1784
|
+
gridTemplate,
|
|
1785
|
+
onRowClick,
|
|
1786
|
+
rowClass,
|
|
1787
|
+
density,
|
|
1788
|
+
striped,
|
|
1789
|
+
selectable,
|
|
1790
|
+
getKey,
|
|
1791
|
+
isSelected,
|
|
1792
|
+
toggleRow,
|
|
1793
|
+
isRowSelectable,
|
|
1794
|
+
}), [
|
|
1795
|
+
items,
|
|
1796
|
+
columns,
|
|
1797
|
+
gridTemplate,
|
|
1798
|
+
onRowClick,
|
|
1799
|
+
rowClass,
|
|
1800
|
+
density,
|
|
1801
|
+
striped,
|
|
1802
|
+
selectable,
|
|
1803
|
+
getKey,
|
|
1804
|
+
isSelected,
|
|
1805
|
+
toggleRow,
|
|
1806
|
+
isRowSelectable,
|
|
1807
|
+
]);
|
|
1572
1808
|
/* -------------------------------------------------------
|
|
1573
1809
|
* Header
|
|
1574
1810
|
* ------------------------------------------------------- */
|
|
1575
|
-
const Header = (jsxRuntime.jsx("div", { ref: headerRef, className: "overflow-hidden w-full", children: jsxRuntime.
|
|
1576
|
-
|
|
1577
|
-
|
|
1811
|
+
const Header = (jsxRuntime.jsx("div", { ref: headerRef, className: "overflow-hidden w-full", children: jsxRuntime.jsxs("div", { className: "grid bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", style: { gridTemplateColumns: gridTemplate, minWidth: 'fit-content' }, children: [selectable && (jsxRuntime.jsx("div", { role: "columnheader", className: buildClassName('flex items-center border-r last:border-r-0 border-gray-200 dark:border-gray-700', densityCellClass), children: jsxRuntime.jsx(Checkbox, { "aria-label": "Select all rows", checked: allSelected, ref: (el) => {
|
|
1812
|
+
if (el)
|
|
1813
|
+
el.indeterminate = someSelected;
|
|
1814
|
+
}, onChange: toggleAll }) })), columns.map((col) => (jsxRuntime.jsx("div", { role: "columnheader", className: buildClassName('font-semibold text-sm whitespace-nowrap flex items-center', densityCellClass, 'border-r last:border-r-0 border-gray-200 dark:border-gray-700', col.sticky === 'left' &&
|
|
1815
|
+
'sticky left-0 z-20 bg-gray-50 dark:bg-gray-800 shadow-[2px_0_4px_rgba(0,0,0,0.05)]', col.sticky === 'right' &&
|
|
1816
|
+
'sticky right-0 z-20 bg-gray-50 dark:bg-gray-800 shadow-[-2px_0_4px_rgba(0,0,0,0.05)]', col.headerClass), children: jsxRuntime.jsxs(TextContent, { role: col.sortable ? 'button' : undefined, className: buildClassName(col.sortable && 'inline-flex items-center gap-2 cursor-pointer select-none'), onClick: () => handleSort(col), children: [col.label, col.sortable ? getSortIcon(sorting[col.name]) : null] }) }, col.name)))] }) }));
|
|
1578
1817
|
const wrapperCls = buildClassName('rounded-lg border border-gray-200 dark:border-gray-800 overflow-hidden', wrapperClass);
|
|
1579
1818
|
/* -------------------------------------------------------
|
|
1580
1819
|
* Loading state
|
|
1581
1820
|
* ------------------------------------------------------- */
|
|
1582
1821
|
if (loading) {
|
|
1583
|
-
return (jsxRuntime.jsx("div", { className: buildClassName('w-full rounded-lg relative', containerClass), children: jsxRuntime.jsxs("div", { className: wrapperCls, children: [Header, jsxRuntime.jsx("div", { style: { height: maxHeight }, className: "flex flex-col", children: Array.from({ length: skeletonRows }).map((_, idx) => (jsxRuntime.
|
|
1822
|
+
return (jsxRuntime.jsx("div", { className: buildClassName('w-full rounded-lg relative', containerClass), children: jsxRuntime.jsxs("div", { className: wrapperCls, children: [Header, jsxRuntime.jsx("div", { style: { height: maxHeight }, className: "flex flex-col", children: Array.from({ length: skeletonRows }).map((_, idx) => (jsxRuntime.jsxs("div", { "data-testid": "skeleton-row", className: "grid animate-pulse bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800", style: { gridTemplateColumns: gridTemplate, height: rowHeight }, children: [selectable && jsxRuntime.jsx("div", { className: densityCellClass }), columns.map((col) => (jsxRuntime.jsx("div", { className: densityCellClass, children: jsxRuntime.jsx("div", { className: "h-4 w-3/4 bg-gray-300 dark:bg-gray-700 rounded" }) }, col.name)))] }, idx))) })] }) }));
|
|
1584
1823
|
}
|
|
1585
1824
|
/* -------------------------------------------------------
|
|
1586
1825
|
* Empty state
|
|
@@ -1630,12 +1869,14 @@ const useIsTabletOrMobile = () => {
|
|
|
1630
1869
|
return isMobile || isTablet;
|
|
1631
1870
|
};
|
|
1632
1871
|
|
|
1872
|
+
exports.Accordion = Accordion;
|
|
1633
1873
|
exports.Alert = Alert;
|
|
1634
1874
|
exports.Badge = Badge;
|
|
1635
1875
|
exports.Banner = Banner;
|
|
1636
1876
|
exports.BodyText = BodyText;
|
|
1637
1877
|
exports.Breadcrumb = Breadcrumb;
|
|
1638
1878
|
exports.Button = Button;
|
|
1879
|
+
exports.ButtonGroup = ButtonGroup;
|
|
1639
1880
|
exports.Card = Card;
|
|
1640
1881
|
exports.Checkbox = Checkbox;
|
|
1641
1882
|
exports.CheckboxGroup = CheckboxGroup;
|
|
@@ -1689,5 +1930,6 @@ exports.useIsMobile = useIsMobile;
|
|
|
1689
1930
|
exports.useIsTablet = useIsTablet;
|
|
1690
1931
|
exports.useIsTabletOrMobile = useIsTabletOrMobile;
|
|
1691
1932
|
exports.usePagination = usePagination;
|
|
1933
|
+
exports.useRowSelection = useRowSelection;
|
|
1692
1934
|
exports.useToast = useToast;
|
|
1693
1935
|
//# sourceMappingURL=react-tailwind.cjs.js.map
|