@pk-design/react-tailwind 1.4.4 → 1.5.0
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 +232 -99
- 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 +232 -101
- 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.icons.d.ts +1 -1
- package/dist/types/components/SelectBox/SelectBox.d.ts +1 -1
- package/dist/types/components/SelectBox/SelectBox.types.d.ts +7 -0
- 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
|
};
|
|
@@ -641,10 +791,10 @@ const updateSortQuery = (sortQuery, name, type = 'string') => {
|
|
|
641
791
|
return updated;
|
|
642
792
|
};
|
|
643
793
|
|
|
644
|
-
var _path$
|
|
645
|
-
function _extends$
|
|
794
|
+
var _path$7;
|
|
795
|
+
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
796
|
var SvgArrowDownWideNarrow = function SvgArrowDownWideNarrow(props) {
|
|
647
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
797
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
|
|
648
798
|
xmlns: "http://www.w3.org/2000/svg",
|
|
649
799
|
width: 24,
|
|
650
800
|
height: 24,
|
|
@@ -655,15 +805,15 @@ var SvgArrowDownWideNarrow = function SvgArrowDownWideNarrow(props) {
|
|
|
655
805
|
strokeWidth: 2,
|
|
656
806
|
className: "lucide lucide-arrow-down-wide-narrow-icon lucide-arrow-down-wide-narrow",
|
|
657
807
|
viewBox: "0 0 24 24"
|
|
658
|
-
}, props), _path$
|
|
808
|
+
}, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
659
809
|
d: "m3 16 4 4 4-4M7 20V4M11 4h10M11 8h7M11 12h4"
|
|
660
810
|
})));
|
|
661
811
|
};
|
|
662
812
|
|
|
663
|
-
var _path$
|
|
664
|
-
function _extends$
|
|
813
|
+
var _path$6;
|
|
814
|
+
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
815
|
var SvgArrowDownNarrowWide = function SvgArrowDownNarrowWide(props) {
|
|
666
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
816
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
|
|
667
817
|
xmlns: "http://www.w3.org/2000/svg",
|
|
668
818
|
width: 24,
|
|
669
819
|
height: 24,
|
|
@@ -674,15 +824,15 @@ var SvgArrowDownNarrowWide = function SvgArrowDownNarrowWide(props) {
|
|
|
674
824
|
strokeWidth: 2,
|
|
675
825
|
className: "lucide lucide-arrow-down-narrow-wide-icon lucide-arrow-down-narrow-wide",
|
|
676
826
|
viewBox: "0 0 24 24"
|
|
677
|
-
}, props), _path$
|
|
827
|
+
}, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
678
828
|
d: "m3 16 4 4 4-4M7 20V4M11 4h4M11 8h7M11 12h10"
|
|
679
829
|
})));
|
|
680
830
|
};
|
|
681
831
|
|
|
682
|
-
var _path$
|
|
683
|
-
function _extends$
|
|
832
|
+
var _path$5;
|
|
833
|
+
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
834
|
var SvgArrowDownAz = function SvgArrowDownAz(props) {
|
|
685
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
835
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
|
|
686
836
|
xmlns: "http://www.w3.org/2000/svg",
|
|
687
837
|
width: 24,
|
|
688
838
|
height: 24,
|
|
@@ -693,15 +843,15 @@ var SvgArrowDownAz = function SvgArrowDownAz(props) {
|
|
|
693
843
|
strokeWidth: 2,
|
|
694
844
|
className: "lucide lucide-arrow-down-az-icon lucide-arrow-down-a-z",
|
|
695
845
|
viewBox: "0 0 24 24"
|
|
696
|
-
}, props), _path$
|
|
846
|
+
}, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
697
847
|
d: "m3 16 4 4 4-4M7 20V4M20 8h-5M15 10V6.5a2.5 2.5 0 0 1 5 0V10M15 14h5l-5 6h5"
|
|
698
848
|
})));
|
|
699
849
|
};
|
|
700
850
|
|
|
701
|
-
var _path$
|
|
702
|
-
function _extends$
|
|
851
|
+
var _path$4;
|
|
852
|
+
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
853
|
var SvgArrowDownZa = function SvgArrowDownZa(props) {
|
|
704
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
854
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
|
|
705
855
|
xmlns: "http://www.w3.org/2000/svg",
|
|
706
856
|
width: 24,
|
|
707
857
|
height: 24,
|
|
@@ -712,15 +862,15 @@ var SvgArrowDownZa = function SvgArrowDownZa(props) {
|
|
|
712
862
|
strokeWidth: 2,
|
|
713
863
|
className: "lucide lucide-arrow-down-za-icon lucide-arrow-down-z-a",
|
|
714
864
|
viewBox: "0 0 24 24"
|
|
715
|
-
}, props), _path$
|
|
865
|
+
}, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
716
866
|
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
867
|
})));
|
|
718
868
|
};
|
|
719
869
|
|
|
720
|
-
var _path$
|
|
721
|
-
function _extends$
|
|
870
|
+
var _path$3;
|
|
871
|
+
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
872
|
var SvgArrowUpDown = function SvgArrowUpDown(props) {
|
|
723
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
873
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
|
|
724
874
|
xmlns: "http://www.w3.org/2000/svg",
|
|
725
875
|
width: 24,
|
|
726
876
|
height: 24,
|
|
@@ -731,7 +881,7 @@ var SvgArrowUpDown = function SvgArrowUpDown(props) {
|
|
|
731
881
|
strokeWidth: 2,
|
|
732
882
|
className: "lucide lucide-arrow-up-down-icon lucide-arrow-up-down",
|
|
733
883
|
viewBox: "0 0 24 24"
|
|
734
|
-
}, props), _path$
|
|
884
|
+
}, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
735
885
|
d: "m21 16-4 4-4-4M17 20V4M3 8l4-4 4 4M7 4v16"
|
|
736
886
|
})));
|
|
737
887
|
};
|
|
@@ -822,11 +972,11 @@ function DataTable({ items, columns, sorting = {}, onSort, loading, pagination,
|
|
|
822
972
|
}
|
|
823
973
|
DataTable.displayName = 'DataTable';
|
|
824
974
|
|
|
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-
|
|
975
|
+
const Title = ({ children, className }) => (jsxRuntime.jsx("h1", { className: buildClassName('text-3xl font-bold text-[var(--ui-text)]', className), children: children }));
|
|
976
|
+
const SubTitle = ({ children, className }) => (jsxRuntime.jsx("h2", { className: buildClassName('text-2xl font-semibold text-[var(--ui-text)]', className), children: children }));
|
|
977
|
+
const SubTitle2 = ({ children, className }) => (jsxRuntime.jsx("h3", { className: buildClassName('text-xl font-semibold text-[var(--ui-text)]', className), children: children }));
|
|
978
|
+
const SubTitle3 = ({ children, className }) => (jsxRuntime.jsx("h4", { className: buildClassName('text-lg font-medium text-[var(--ui-text)]', className), children: children }));
|
|
979
|
+
const SubTitle4 = ({ children, className }) => (jsxRuntime.jsx("h5", { className: buildClassName('text-base font-medium text-[var(--ui-text)]', className), children: children }));
|
|
830
980
|
const HeadingText = {
|
|
831
981
|
Title,
|
|
832
982
|
SubTitle,
|
|
@@ -883,10 +1033,10 @@ const Dropdown = ({ triggerButton, renderTriggerButton, items, renderItem, items
|
|
|
883
1033
|
};
|
|
884
1034
|
Dropdown.displayName = 'Dropdown';
|
|
885
1035
|
|
|
886
|
-
var _path$
|
|
887
|
-
function _extends$
|
|
1036
|
+
var _path$2;
|
|
1037
|
+
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
1038
|
var SvgFolderPlus = function SvgFolderPlus(props) {
|
|
889
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
1039
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
|
|
890
1040
|
xmlns: "http://www.w3.org/2000/svg",
|
|
891
1041
|
width: 24,
|
|
892
1042
|
height: 24,
|
|
@@ -897,7 +1047,7 @@ var SvgFolderPlus = function SvgFolderPlus(props) {
|
|
|
897
1047
|
strokeWidth: 2,
|
|
898
1048
|
className: "lucide lucide-folder-plus-icon lucide-folder-plus",
|
|
899
1049
|
viewBox: "0 0 24 24"
|
|
900
|
-
}, props), _path$
|
|
1050
|
+
}, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
901
1051
|
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
1052
|
})));
|
|
903
1053
|
};
|
|
@@ -918,7 +1068,7 @@ const Input = React.forwardRef((props, ref) => {
|
|
|
918
1068
|
const hasError = Boolean(error);
|
|
919
1069
|
const hasRightGroup = rightGroup !== null && rightGroup !== undefined;
|
|
920
1070
|
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 }) }))] }));
|
|
1071
|
+
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
1072
|
});
|
|
923
1073
|
Input.displayName = 'Input';
|
|
924
1074
|
|
|
@@ -988,7 +1138,7 @@ const RadioSwitch = ({ label, items, selected, onChange, wrapperClass, switchCla
|
|
|
988
1138
|
transform: `translate(${style.left}px, ${style.top}px)`,
|
|
989
1139
|
width: style.width,
|
|
990
1140
|
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:
|
|
1141
|
+
} }), 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
1142
|
};
|
|
993
1143
|
|
|
994
1144
|
/**
|
|
@@ -1159,28 +1309,9 @@ const useDebounceFn = (fn, ms) => {
|
|
|
1159
1309
|
}, [fn, ms]);
|
|
1160
1310
|
};
|
|
1161
1311
|
|
|
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
1312
|
var _path$1;
|
|
1182
1313
|
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
|
|
1314
|
+
var SvgCheck = function SvgCheck(props) {
|
|
1184
1315
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
|
|
1185
1316
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1186
1317
|
width: 24,
|
|
@@ -1190,10 +1321,10 @@ var SvgChevronDown = function SvgChevronDown(props) {
|
|
|
1190
1321
|
strokeLinecap: "round",
|
|
1191
1322
|
strokeLinejoin: "round",
|
|
1192
1323
|
strokeWidth: 2,
|
|
1193
|
-
className: "lucide lucide-
|
|
1324
|
+
className: "lucide lucide-check-icon lucide-check",
|
|
1194
1325
|
viewBox: "0 0 24 24"
|
|
1195
1326
|
}, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1196
|
-
d: "
|
|
1327
|
+
d: "M20 6 9 17l-5-5"
|
|
1197
1328
|
})));
|
|
1198
1329
|
};
|
|
1199
1330
|
|
|
@@ -1222,7 +1353,7 @@ var SvgCirclePlus = function SvgCirclePlus(props) {
|
|
|
1222
1353
|
|
|
1223
1354
|
const constructInputClass = (disabled) => buildInputClass('', { disabled });
|
|
1224
1355
|
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;
|
|
1356
|
+
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
1357
|
const hasError = Boolean(error);
|
|
1227
1358
|
const [query, setQuery] = React.useState('');
|
|
1228
1359
|
const debouncedQuery = useDebounce(query, 500);
|
|
@@ -1341,7 +1472,7 @@ const SelectBox = React.forwardRef((props, forwardedRef) => {
|
|
|
1341
1472
|
if (async && debouncedQuery)
|
|
1342
1473
|
handleSearch(debouncedQuery);
|
|
1343
1474
|
}, [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) &&
|
|
1475
|
+
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
1476
|
(selected === null || selected === void 0 ? void 0 : selected.length) > 0 &&
|
|
1346
1477
|
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
1478
|
if (multiple && e.key === 'Backspace' && !query) {
|
|
@@ -1349,7 +1480,7 @@ const SelectBox = React.forwardRef((props, forwardedRef) => {
|
|
|
1349
1480
|
removeSelection(selected.length - 1);
|
|
1350
1481
|
}
|
|
1351
1482
|
}
|
|
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 &&
|
|
1483
|
+
}, "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
1484
|
});
|
|
1354
1485
|
|
|
1355
1486
|
const Tabs = ({ tabs, defaultIndex = 0, selectedIndex, onChange, variant = 'underline', orientation = 'horizontal', stretch = false, className = '', listClass = '', panelsClass = '', }) => {
|
|
@@ -1401,7 +1532,7 @@ const Textarea = React.forwardRef((props, ref) => {
|
|
|
1401
1532
|
const hasError = !isEmpty(error);
|
|
1402
1533
|
const hasRightGroup = rightGroup != null && rightGroup !== undefined;
|
|
1403
1534
|
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 }) }))] }));
|
|
1535
|
+
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
1536
|
});
|
|
1406
1537
|
|
|
1407
1538
|
/**
|
|
@@ -1630,12 +1761,14 @@ const useIsTabletOrMobile = () => {
|
|
|
1630
1761
|
return isMobile || isTablet;
|
|
1631
1762
|
};
|
|
1632
1763
|
|
|
1764
|
+
exports.Accordion = Accordion;
|
|
1633
1765
|
exports.Alert = Alert;
|
|
1634
1766
|
exports.Badge = Badge;
|
|
1635
1767
|
exports.Banner = Banner;
|
|
1636
1768
|
exports.BodyText = BodyText;
|
|
1637
1769
|
exports.Breadcrumb = Breadcrumb;
|
|
1638
1770
|
exports.Button = Button;
|
|
1771
|
+
exports.ButtonGroup = ButtonGroup;
|
|
1639
1772
|
exports.Card = Card;
|
|
1640
1773
|
exports.Checkbox = Checkbox;
|
|
1641
1774
|
exports.CheckboxGroup = CheckboxGroup;
|