@mahatisystems/mahati-ui-components 1.2.0 → 1.2.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/index.css +4436 -1
- package/dist/index.css.map +1 -1
- package/dist/index.js +3292 -243
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +3158 -243
- package/dist/index.mjs.map +1 -1
- package/package.json +52 -25
package/dist/index.js
CHANGED
|
@@ -1,244 +1,3293 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
function _array_like_to_array(arr, len) {
|
|
3
|
+
if (len == null || len > arr.length) len = arr.length;
|
|
4
|
+
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
5
|
+
return arr2;
|
|
6
|
+
}
|
|
7
|
+
function _array_with_holes(arr) {
|
|
8
|
+
if (Array.isArray(arr)) return arr;
|
|
9
|
+
}
|
|
10
|
+
function _array_without_holes(arr) {
|
|
11
|
+
if (Array.isArray(arr)) return _array_like_to_array(arr);
|
|
12
|
+
}
|
|
13
|
+
function _define_property(obj, key, value) {
|
|
14
|
+
if (key in obj) {
|
|
15
|
+
Object.defineProperty(obj, key, {
|
|
16
|
+
value: value,
|
|
17
|
+
enumerable: true,
|
|
18
|
+
configurable: true,
|
|
19
|
+
writable: true
|
|
20
|
+
});
|
|
21
|
+
} else {
|
|
22
|
+
obj[key] = value;
|
|
23
|
+
}
|
|
24
|
+
return obj;
|
|
25
|
+
}
|
|
26
|
+
function _instanceof(left, right) {
|
|
27
|
+
if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
|
|
28
|
+
return !!right[Symbol.hasInstance](left);
|
|
29
|
+
} else {
|
|
30
|
+
return left instanceof right;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
function _iterable_to_array(iter) {
|
|
34
|
+
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
|
|
35
|
+
}
|
|
36
|
+
function _iterable_to_array_limit(arr, i) {
|
|
37
|
+
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
|
38
|
+
if (_i == null) return;
|
|
39
|
+
var _arr = [];
|
|
40
|
+
var _n = true;
|
|
41
|
+
var _d = false;
|
|
42
|
+
var _s, _e;
|
|
43
|
+
try {
|
|
44
|
+
for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
|
|
45
|
+
_arr.push(_s.value);
|
|
46
|
+
if (i && _arr.length === i) break;
|
|
47
|
+
}
|
|
48
|
+
} catch (err) {
|
|
49
|
+
_d = true;
|
|
50
|
+
_e = err;
|
|
51
|
+
} finally{
|
|
52
|
+
try {
|
|
53
|
+
if (!_n && _i["return"] != null) _i["return"]();
|
|
54
|
+
} finally{
|
|
55
|
+
if (_d) throw _e;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
return _arr;
|
|
59
|
+
}
|
|
60
|
+
function _non_iterable_rest() {
|
|
61
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
62
|
+
}
|
|
63
|
+
function _non_iterable_spread() {
|
|
64
|
+
throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
65
|
+
}
|
|
66
|
+
function _object_spread(target) {
|
|
67
|
+
for(var i = 1; i < arguments.length; i++){
|
|
68
|
+
var source = arguments[i] != null ? arguments[i] : {};
|
|
69
|
+
var ownKeys = Object.keys(source);
|
|
70
|
+
if (typeof Object.getOwnPropertySymbols === "function") {
|
|
71
|
+
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
72
|
+
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
73
|
+
}));
|
|
74
|
+
}
|
|
75
|
+
ownKeys.forEach(function(key) {
|
|
76
|
+
_define_property(target, key, source[key]);
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
return target;
|
|
80
|
+
}
|
|
81
|
+
function ownKeys(object, enumerableOnly) {
|
|
82
|
+
var keys = Object.keys(object);
|
|
83
|
+
if (Object.getOwnPropertySymbols) {
|
|
84
|
+
var symbols = Object.getOwnPropertySymbols(object);
|
|
85
|
+
if (enumerableOnly) {
|
|
86
|
+
symbols = symbols.filter(function(sym) {
|
|
87
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
keys.push.apply(keys, symbols);
|
|
91
|
+
}
|
|
92
|
+
return keys;
|
|
93
|
+
}
|
|
94
|
+
function _object_spread_props(target, source) {
|
|
95
|
+
source = source != null ? source : {};
|
|
96
|
+
if (Object.getOwnPropertyDescriptors) {
|
|
97
|
+
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
98
|
+
} else {
|
|
99
|
+
ownKeys(Object(source)).forEach(function(key) {
|
|
100
|
+
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
return target;
|
|
104
|
+
}
|
|
105
|
+
function _object_without_properties(source, excluded) {
|
|
106
|
+
if (source == null) return {};
|
|
107
|
+
var target = _object_without_properties_loose(source, excluded);
|
|
108
|
+
var key, i;
|
|
109
|
+
if (Object.getOwnPropertySymbols) {
|
|
110
|
+
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
111
|
+
for(i = 0; i < sourceSymbolKeys.length; i++){
|
|
112
|
+
key = sourceSymbolKeys[i];
|
|
113
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
114
|
+
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
115
|
+
target[key] = source[key];
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
return target;
|
|
119
|
+
}
|
|
120
|
+
function _object_without_properties_loose(source, excluded) {
|
|
121
|
+
if (source == null) return {};
|
|
122
|
+
var target = {};
|
|
123
|
+
var sourceKeys = Object.keys(source);
|
|
124
|
+
var key, i;
|
|
125
|
+
for(i = 0; i < sourceKeys.length; i++){
|
|
126
|
+
key = sourceKeys[i];
|
|
127
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
128
|
+
target[key] = source[key];
|
|
129
|
+
}
|
|
130
|
+
return target;
|
|
131
|
+
}
|
|
132
|
+
function _sliced_to_array(arr, i) {
|
|
133
|
+
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
|
|
134
|
+
}
|
|
135
|
+
function _to_consumable_array(arr) {
|
|
136
|
+
return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
|
|
137
|
+
}
|
|
138
|
+
function _type_of(obj) {
|
|
139
|
+
"@swc/helpers - typeof";
|
|
140
|
+
return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
|
|
141
|
+
}
|
|
142
|
+
function _unsupported_iterable_to_array(o, minLen) {
|
|
143
|
+
if (!o) return;
|
|
144
|
+
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
|
145
|
+
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
146
|
+
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
147
|
+
if (n === "Map" || n === "Set") return Array.from(n);
|
|
148
|
+
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
149
|
+
}
|
|
150
|
+
var _import_chart_Chart;
|
|
151
|
+
var __create = Object.create;
|
|
152
|
+
var __defProp = Object.defineProperty;
|
|
153
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
154
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
155
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
156
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
157
|
+
var __export = function(target, all) {
|
|
158
|
+
for(var name in all)__defProp(target, name, {
|
|
159
|
+
get: all[name],
|
|
160
|
+
enumerable: true
|
|
161
|
+
});
|
|
162
|
+
};
|
|
163
|
+
var __copyProps = function(to, from, except, desc) {
|
|
164
|
+
if (from && (typeof from === "undefined" ? "undefined" : _type_of(from)) === "object" || typeof from === "function") {
|
|
165
|
+
var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
|
|
166
|
+
try {
|
|
167
|
+
var _loop = function() {
|
|
168
|
+
var key = _step.value;
|
|
169
|
+
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
170
|
+
get: function() {
|
|
171
|
+
return from[key];
|
|
172
|
+
},
|
|
173
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
174
|
+
});
|
|
175
|
+
};
|
|
176
|
+
for(var _iterator = __getOwnPropNames(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true)_loop();
|
|
177
|
+
} catch (err) {
|
|
178
|
+
_didIteratorError = true;
|
|
179
|
+
_iteratorError = err;
|
|
180
|
+
} finally{
|
|
181
|
+
try {
|
|
182
|
+
if (!_iteratorNormalCompletion && _iterator.return != null) {
|
|
183
|
+
_iterator.return();
|
|
184
|
+
}
|
|
185
|
+
} finally{
|
|
186
|
+
if (_didIteratorError) {
|
|
187
|
+
throw _iteratorError;
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
return to;
|
|
193
|
+
};
|
|
194
|
+
var __toESM = function(mod, isNodeMode, target) {
|
|
195
|
+
return target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(// If the importer is in node compatibility mode or this is not an ESM
|
|
196
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
197
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
198
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
199
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
200
|
+
value: mod,
|
|
201
|
+
enumerable: true
|
|
202
|
+
}) : target, mod);
|
|
203
|
+
};
|
|
204
|
+
var __toCommonJS = function(mod) {
|
|
205
|
+
return __copyProps(__defProp({}, "__esModule", {
|
|
206
|
+
value: true
|
|
207
|
+
}), mod);
|
|
208
|
+
};
|
|
209
|
+
// src/index.ts
|
|
210
|
+
var index_exports = {};
|
|
211
|
+
__export(index_exports, {
|
|
212
|
+
MahatiActivity: function() {
|
|
213
|
+
return MahatiActivity;
|
|
214
|
+
},
|
|
215
|
+
MahatiButton: function() {
|
|
216
|
+
return Button;
|
|
217
|
+
},
|
|
218
|
+
MahatiCalendar: function() {
|
|
219
|
+
return Calendar;
|
|
220
|
+
},
|
|
221
|
+
MahatiCard: function() {
|
|
222
|
+
return Card;
|
|
223
|
+
},
|
|
224
|
+
MahatiChart: function() {
|
|
225
|
+
return ChartInterface;
|
|
226
|
+
},
|
|
227
|
+
MahatiDropdown: function() {
|
|
228
|
+
return Dropdown;
|
|
229
|
+
},
|
|
230
|
+
MahatiFilter: function() {
|
|
231
|
+
return Filter;
|
|
232
|
+
},
|
|
233
|
+
MahatiFormContainer: function() {
|
|
234
|
+
return FormContainer;
|
|
235
|
+
},
|
|
236
|
+
MahatiInput: function() {
|
|
237
|
+
return Input;
|
|
238
|
+
},
|
|
239
|
+
MahatiModal: function() {
|
|
240
|
+
return Modal;
|
|
241
|
+
},
|
|
242
|
+
MahatiSearch: function() {
|
|
243
|
+
return MahatiSearch;
|
|
244
|
+
},
|
|
245
|
+
MahatiStatus: function() {
|
|
246
|
+
return MahatiStatus;
|
|
247
|
+
},
|
|
248
|
+
MahatiTabbedInterface: function() {
|
|
249
|
+
return TabbedInterface;
|
|
250
|
+
},
|
|
251
|
+
MahatiTabbedInterfaceTailwind: function() {
|
|
252
|
+
return TabbedInterface2;
|
|
253
|
+
},
|
|
254
|
+
MahatiTable: function() {
|
|
255
|
+
return Table;
|
|
256
|
+
},
|
|
257
|
+
MahatiTableTailwind: function() {
|
|
258
|
+
return Table2;
|
|
259
|
+
},
|
|
260
|
+
MahatiTooltip: function() {
|
|
261
|
+
return Tooltip;
|
|
262
|
+
}
|
|
263
|
+
});
|
|
264
|
+
module.exports = __toCommonJS(index_exports);
|
|
265
|
+
// src/components/Button.tsx
|
|
266
|
+
var import_react = __toESM(require("react"));
|
|
267
|
+
var import_class_variance_authority = require("class-variance-authority");
|
|
268
|
+
// src/lib/utils.ts
|
|
269
|
+
var import_clsx = require("clsx");
|
|
270
|
+
var import_tailwind_merge = require("tailwind-merge");
|
|
271
|
+
function cn() {
|
|
272
|
+
for(var _len = arguments.length, inputs = new Array(_len), _key = 0; _key < _len; _key++){
|
|
273
|
+
inputs[_key] = arguments[_key];
|
|
274
|
+
}
|
|
275
|
+
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
|
|
276
|
+
}
|
|
277
|
+
// src/components/Button.tsx
|
|
278
|
+
var buttonVariants = (0, import_class_variance_authority.cva)("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", {
|
|
279
|
+
variants: {
|
|
280
|
+
variant: {
|
|
281
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
282
|
+
destructive: "purple",
|
|
283
|
+
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
|
284
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
285
|
+
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
286
|
+
link: "text-primary underline-offset-4 hover:underline",
|
|
287
|
+
danger: "hover:text-white hover:bg-primary/90"
|
|
288
|
+
},
|
|
289
|
+
size: {
|
|
290
|
+
default: "h-10 px-4 py-2",
|
|
291
|
+
sm: "h-9 rounded-md px-3",
|
|
292
|
+
md: "rounded-md px-2",
|
|
293
|
+
lg: "h-11 rounded-md px-8",
|
|
294
|
+
icon: "h-10 w-10"
|
|
295
|
+
}
|
|
296
|
+
},
|
|
297
|
+
defaultVariants: {
|
|
298
|
+
variant: "default",
|
|
299
|
+
size: "default"
|
|
300
|
+
}
|
|
301
|
+
});
|
|
302
|
+
var IconButtonGroup = import_react.default.forwardRef(function(_param, ref) {
|
|
303
|
+
var className = _param.className, _param_direction = _param.direction, direction = _param_direction === void 0 ? "row" : _param_direction, _param_gapClass = _param.gapClass, gapClass = _param_gapClass === void 0 ? "gap-2" : _param_gapClass, props = _object_without_properties(_param, [
|
|
304
|
+
"className",
|
|
305
|
+
"direction",
|
|
306
|
+
"gapClass"
|
|
307
|
+
]);
|
|
308
|
+
return /* @__PURE__ */ import_react.default.createElement("div", _object_spread({
|
|
309
|
+
ref: ref,
|
|
310
|
+
className: cn("inline-flex", direction === "row" ? "flex-row items-center" : "flex-col items-start", gapClass, className)
|
|
311
|
+
}, props));
|
|
312
|
+
});
|
|
313
|
+
IconButtonGroup.displayName = "IconButtonGroup";
|
|
314
|
+
function getHoverIntensityClasses(intensity) {
|
|
315
|
+
if (intensity == null) return "";
|
|
316
|
+
var v = Math.max(0, Math.min(100, intensity));
|
|
317
|
+
if (v === 0) return "";
|
|
318
|
+
if (v <= 10) return "hover:opacity-95 active:opacity-90";
|
|
319
|
+
if (v <= 25) return "hover:opacity-90 active:opacity-80";
|
|
320
|
+
if (v <= 40) return "hover:opacity-85 active:opacity-75";
|
|
321
|
+
if (v <= 55) return "hover:opacity-80 active:opacity-70";
|
|
322
|
+
if (v <= 70) return "hover:opacity-75 active:opacity-65";
|
|
323
|
+
if (v <= 85) return "hover:opacity-70 active:opacity-60";
|
|
324
|
+
return "hover:opacity-60 active:opacity-50";
|
|
325
|
+
}
|
|
326
|
+
var ButtonBase = import_react.default.forwardRef(function(_param, ref) {
|
|
327
|
+
var className = _param.className, variant = _param.variant, size = _param.size, _param_asChild = _param.asChild, asChild = _param_asChild === void 0 ? false : _param_asChild, _param_iconButton = _param.iconButton, iconButton = _param_iconButton === void 0 ? false : _param_iconButton, iconButtonHeightClass = _param.iconButtonHeightClass, iconButtonWidthClass = _param.iconButtonWidthClass, iconButtonBgClass = _param.iconButtonBgClass, iconButtonRadiusClass = _param.iconButtonRadiusClass, iconButtonBgPaddingClass = _param.iconButtonBgPaddingClass, iconButtonHoverBgClass = _param.iconButtonHoverBgClass, iconButtonHoverIntensity = _param.iconButtonHoverIntensity, children = _param.children, props = _object_without_properties(_param, [
|
|
328
|
+
"className",
|
|
329
|
+
"variant",
|
|
330
|
+
"size",
|
|
331
|
+
"asChild",
|
|
332
|
+
"iconButton",
|
|
333
|
+
"iconButtonHeightClass",
|
|
334
|
+
"iconButtonWidthClass",
|
|
335
|
+
"iconButtonBgClass",
|
|
336
|
+
"iconButtonRadiusClass",
|
|
337
|
+
"iconButtonBgPaddingClass",
|
|
338
|
+
"iconButtonHoverBgClass",
|
|
339
|
+
"iconButtonHoverIntensity",
|
|
340
|
+
"children"
|
|
341
|
+
]);
|
|
342
|
+
var hasCustomIconBg = Boolean(iconButtonBgClass);
|
|
343
|
+
if (iconButton) {
|
|
344
|
+
var defaultHoverOverlay = hasCustomIconBg ? "hover:bg-white/10 active:bg-white/15" : "hover:bg-white/10 active:bg-white/15";
|
|
345
|
+
var intensityClasses = getHoverIntensityClasses(iconButtonHoverIntensity);
|
|
346
|
+
return /* @__PURE__ */ import_react.default.createElement("button", _object_spread({
|
|
347
|
+
className: cn(buttonVariants({
|
|
348
|
+
variant: variant,
|
|
349
|
+
size: size,
|
|
350
|
+
className: className
|
|
351
|
+
}), "!bg-transparent hover:!bg-transparent active:!bg-transparent", "p-0 inline-flex items-center justify-center", "text-white/90 hover:text-white", "focus-visible:ring-2 focus-visible:ring-white/70 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent", iconButtonHeightClass !== null && iconButtonHeightClass !== void 0 ? iconButtonHeightClass : "h-9", iconButtonWidthClass !== null && iconButtonWidthClass !== void 0 ? iconButtonWidthClass : "w-9"),
|
|
352
|
+
ref: ref
|
|
353
|
+
}, props), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
354
|
+
className: cn("inline-flex items-center justify-center overflow-hidden transition-colors", iconButtonRadiusClass !== null && iconButtonRadiusClass !== void 0 ? iconButtonRadiusClass : "rounded-md", iconButtonBgPaddingClass !== null && iconButtonBgPaddingClass !== void 0 ? iconButtonBgPaddingClass : "p-[2px]", hasCustomIconBg ? iconButtonBgClass : "bg-transparent", iconButtonHoverBgClass !== null && iconButtonHoverBgClass !== void 0 ? iconButtonHoverBgClass : defaultHoverOverlay, intensityClasses)
|
|
355
|
+
}, children));
|
|
356
|
+
}
|
|
357
|
+
return /* @__PURE__ */ import_react.default.createElement("button", _object_spread({
|
|
358
|
+
className: cn(buttonVariants({
|
|
359
|
+
variant: variant,
|
|
360
|
+
size: size,
|
|
361
|
+
className: className
|
|
362
|
+
})),
|
|
363
|
+
ref: ref
|
|
364
|
+
}, props), children);
|
|
365
|
+
});
|
|
366
|
+
ButtonBase.displayName = "Button";
|
|
367
|
+
var Button = ButtonBase;
|
|
368
|
+
Button.IconButtonGroup = IconButtonGroup;
|
|
369
|
+
// src/components/card.tsx
|
|
370
|
+
var import_react2 = __toESM(require("react"));
|
|
371
|
+
var import_lucide_react = require("lucide-react");
|
|
372
|
+
var Card = import_react2.default.forwardRef(function(_param, ref) {
|
|
373
|
+
var title = _param.title, cardContent = _param.cardContent, cardBackContent = _param.cardBackContent, _param_collapsible = _param.collapsible, collapsible = _param_collapsible === void 0 ? false : _param_collapsible, _param_flippable = _param.flippable, flippable = _param_flippable === void 0 ? false : _param_flippable, backgroundColor = _param.backgroundColor, borderRadius = _param.borderRadius, _param_variant = _param.variant, variant = _param_variant === void 0 ? "default" : _param_variant, _param_size = _param.size, size = _param_size === void 0 ? "default" : _param_size, _param_className = _param.className, className = _param_className === void 0 ? "" : _param_className, children = _param.children, _param_defaultOpen = _param.defaultOpen, defaultOpen = _param_defaultOpen === void 0 ? true : _param_defaultOpen, onFlip = _param.onFlip, style = _param.style, props = _object_without_properties(_param, [
|
|
374
|
+
"title",
|
|
375
|
+
"cardContent",
|
|
376
|
+
"cardBackContent",
|
|
377
|
+
"collapsible",
|
|
378
|
+
"flippable",
|
|
379
|
+
"backgroundColor",
|
|
380
|
+
"borderRadius",
|
|
381
|
+
"variant",
|
|
382
|
+
"size",
|
|
383
|
+
"className",
|
|
384
|
+
"children",
|
|
385
|
+
"defaultOpen",
|
|
386
|
+
"onFlip",
|
|
387
|
+
"style"
|
|
388
|
+
]);
|
|
389
|
+
var _ref = _sliced_to_array((0, import_react2.useState)(defaultOpen), 2), open = _ref[0], setOpen = _ref[1];
|
|
390
|
+
var _ref1 = _sliced_to_array((0, import_react2.useState)(false), 2), isFlipped = _ref1[0], setIsFlipped = _ref1[1];
|
|
391
|
+
var contentId = import_react2.default.useId();
|
|
392
|
+
var getVariantStyles = function() {
|
|
393
|
+
var variants = {
|
|
394
|
+
default: "bg-white text-slate-800 border border-slate-200 hover:shadow-lg",
|
|
395
|
+
elevated: "bg-white shadow-md border border-transparent",
|
|
396
|
+
outline: "bg-slate-50 border border-slate-200",
|
|
397
|
+
subtle: "bg-slate-50 border border-transparent",
|
|
398
|
+
figma: ""
|
|
399
|
+
};
|
|
400
|
+
return variants[variant];
|
|
401
|
+
};
|
|
402
|
+
var getSizeStyles = function() {
|
|
403
|
+
var sizes = {
|
|
404
|
+
default: "p-6 rounded-[14px]",
|
|
405
|
+
sm: "p-4",
|
|
406
|
+
lg: "p-8",
|
|
407
|
+
figma: "w-[280px] p-6"
|
|
408
|
+
};
|
|
409
|
+
return sizes[size];
|
|
410
|
+
};
|
|
411
|
+
var figmaStyles = variant === "figma" ? _object_spread({
|
|
412
|
+
backgroundColor: backgroundColor || "rgba(77, 175, 131, 0.10)",
|
|
413
|
+
border: "1px solid #1761A3",
|
|
414
|
+
boxShadow: "0 4px 4px 0 rgba(0, 0, 0, 0.25)",
|
|
415
|
+
borderRadius: "14px"
|
|
416
|
+
}, style) : backgroundColor ? _object_spread({
|
|
417
|
+
backgroundColor: backgroundColor
|
|
418
|
+
}, style) : style;
|
|
419
|
+
var handleFlip = function() {
|
|
420
|
+
if (!flippable) return;
|
|
421
|
+
var newFlippedState = !isFlipped;
|
|
422
|
+
setIsFlipped(newFlippedState);
|
|
423
|
+
onFlip === null || onFlip === void 0 ? void 0 : onFlip(newFlippedState);
|
|
424
|
+
};
|
|
425
|
+
var mainContent = cardContent || children;
|
|
426
|
+
return /* @__PURE__ */ import_react2.default.createElement("div", {
|
|
427
|
+
className: flippable ? "perspective-[1000px] group" : "",
|
|
428
|
+
onClick: flippable ? handleFlip : void 0
|
|
429
|
+
}, /* @__PURE__ */ import_react2.default.createElement("div", _object_spread_props(_object_spread({
|
|
430
|
+
ref: ref
|
|
431
|
+
}, props), {
|
|
432
|
+
style: figmaStyles,
|
|
433
|
+
className: "\n rounded-[14px] transition-all duration-300 shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]\n ".concat(getVariantStyles(), "\n ").concat(getSizeStyles(), "\n ").concat(flippable ? "relative transition-transform duration-700 [transform-style:preserve-3d]" : "", "\n ").concat(flippable && isFlipped ? "[transform:rotateY(180deg)]" : "", "\n ").concat(className, "\n ")
|
|
434
|
+
}), /* @__PURE__ */ import_react2.default.createElement("div", {
|
|
435
|
+
className: flippable ? "[backface-visibility:hidden]" : ""
|
|
436
|
+
}, title && /* @__PURE__ */ import_react2.default.createElement("div", {
|
|
437
|
+
className: "flex items-center justify-between ".concat(open && mainContent ? "mb-4" : "")
|
|
438
|
+
}, /* @__PURE__ */ import_react2.default.createElement("h4", {
|
|
439
|
+
className: "text-xl font-semibold text-slate-800"
|
|
440
|
+
}, title), collapsible && /* @__PURE__ */ import_react2.default.createElement("button", {
|
|
441
|
+
type: "button",
|
|
442
|
+
style: {
|
|
443
|
+
backgroundColor: "#1761A3"
|
|
444
|
+
},
|
|
445
|
+
className: "z-10 flex items-center justify-center w-8 h-8 rounded-full hover:opacity-80 transition-opacity duration-200 focus:outline-none focus:ring-2 focus:ring-[#1761A3] focus:ring-offset-2",
|
|
446
|
+
onClick: function(e) {
|
|
447
|
+
if (flippable) e.stopPropagation();
|
|
448
|
+
setOpen(function(p) {
|
|
449
|
+
return !p;
|
|
450
|
+
});
|
|
451
|
+
},
|
|
452
|
+
"aria-label": open ? "Hide content" : "Show content",
|
|
453
|
+
"aria-expanded": open,
|
|
454
|
+
"aria-controls": contentId
|
|
455
|
+
}, open ? /* @__PURE__ */ import_react2.default.createElement(import_lucide_react.ChevronUp, {
|
|
456
|
+
className: "w-5 h-5 text-white"
|
|
457
|
+
}) : /* @__PURE__ */ import_react2.default.createElement(import_lucide_react.ChevronDown, {
|
|
458
|
+
className: "w-5 h-5 text-white"
|
|
459
|
+
}))), mainContent && /* @__PURE__ */ import_react2.default.createElement("div", {
|
|
460
|
+
id: contentId,
|
|
461
|
+
className: "\n grid overflow-hidden transition-all duration-500 ease-in-out\n ".concat(open ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0", "\n ")
|
|
462
|
+
}, /* @__PURE__ */ import_react2.default.createElement("div", {
|
|
463
|
+
className: "overflow-hidden"
|
|
464
|
+
}, mainContent))), flippable && cardBackContent && /* @__PURE__ */ import_react2.default.createElement("div", {
|
|
465
|
+
className: "absolute inset-0 w-full h-full p-6 [backface-visibility:hidden] [transform:rotateY(180deg)]"
|
|
466
|
+
}, cardBackContent)));
|
|
467
|
+
});
|
|
468
|
+
Card.displayName = "Card";
|
|
469
|
+
// src/components/Modal.tsx
|
|
470
|
+
var React3 = __toESM(require("react"));
|
|
471
|
+
var import_lucide_react2 = require("lucide-react");
|
|
472
|
+
var MODAL_WIDTH_MAP = {
|
|
473
|
+
sm: "360px",
|
|
474
|
+
default: "562px",
|
|
475
|
+
md: "720px",
|
|
476
|
+
lg: "760px",
|
|
477
|
+
xl: "800px"
|
|
478
|
+
};
|
|
479
|
+
function Modal(param) {
|
|
480
|
+
var isOpen = param.isOpen, onClose = param.onClose, title = param.title, subtitle = param.subtitle, children = param.children, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className, customWidth = param.width, height = param.height, margin = param.margin, primaryAction = param.primaryAction, secondaryAction = param.secondaryAction, headerIcon = param.headerIcon, _param_showDivider = param.showDivider, showDivider = _param_showDivider === void 0 ? true : _param_showDivider, _param_position = param.position, position = _param_position === void 0 ? "center" : _param_position, _param_size = param.size, size = _param_size === void 0 ? "default" : _param_size;
|
|
481
|
+
var _ref;
|
|
482
|
+
var width = (_ref = customWidth !== null && customWidth !== void 0 ? customWidth : MODAL_WIDTH_MAP[size]) !== null && _ref !== void 0 ? _ref : MODAL_WIDTH_MAP.default;
|
|
483
|
+
React3.useEffect(function() {
|
|
484
|
+
if (!isOpen) return;
|
|
485
|
+
var onKey = function(e) {
|
|
486
|
+
return e.key === "Escape" && onClose();
|
|
487
|
+
};
|
|
488
|
+
document.addEventListener("keydown", onKey);
|
|
489
|
+
return function() {
|
|
490
|
+
return document.removeEventListener("keydown", onKey);
|
|
491
|
+
};
|
|
492
|
+
}, [
|
|
493
|
+
isOpen,
|
|
494
|
+
onClose
|
|
495
|
+
]);
|
|
496
|
+
if (!isOpen) return null;
|
|
497
|
+
var getPositionStyles = function() {
|
|
498
|
+
switch(position || "center"){
|
|
499
|
+
// Ensure position is always a string for the switch
|
|
500
|
+
case "center":
|
|
501
|
+
return {
|
|
502
|
+
alignItems: "center",
|
|
503
|
+
justifyContent: "center"
|
|
504
|
+
};
|
|
505
|
+
case "top-left":
|
|
506
|
+
return {
|
|
507
|
+
alignItems: "flex-start",
|
|
508
|
+
justifyContent: "flex-start"
|
|
509
|
+
};
|
|
510
|
+
case "top-right":
|
|
511
|
+
return {
|
|
512
|
+
alignItems: "flex-start",
|
|
513
|
+
justifyContent: "flex-end"
|
|
514
|
+
};
|
|
515
|
+
case "top-center":
|
|
516
|
+
return {
|
|
517
|
+
alignItems: "flex-start",
|
|
518
|
+
justifyContent: "center"
|
|
519
|
+
};
|
|
520
|
+
case "bottom-left":
|
|
521
|
+
return {
|
|
522
|
+
alignItems: "flex-end",
|
|
523
|
+
justifyContent: "flex-start"
|
|
524
|
+
};
|
|
525
|
+
case "bottom-right":
|
|
526
|
+
return {
|
|
527
|
+
alignItems: "flex-end",
|
|
528
|
+
justifyContent: "flex-end"
|
|
529
|
+
};
|
|
530
|
+
case "bottom-center":
|
|
531
|
+
return {
|
|
532
|
+
alignItems: "flex-end",
|
|
533
|
+
justifyContent: "center"
|
|
534
|
+
};
|
|
535
|
+
case "center-left":
|
|
536
|
+
return {
|
|
537
|
+
alignItems: "center",
|
|
538
|
+
justifyContent: "flex-start"
|
|
539
|
+
};
|
|
540
|
+
case "center-right":
|
|
541
|
+
return {
|
|
542
|
+
alignItems: "center",
|
|
543
|
+
justifyContent: "flex-end"
|
|
544
|
+
};
|
|
545
|
+
default:
|
|
546
|
+
return {
|
|
547
|
+
alignItems: "center",
|
|
548
|
+
justifyContent: "center"
|
|
549
|
+
};
|
|
550
|
+
}
|
|
551
|
+
};
|
|
552
|
+
var borderRadiusClasses = {
|
|
553
|
+
center: "rounded-[8px]",
|
|
554
|
+
"top-left": "rounded-tr-[8px] rounded-br-[8px] rounded-bl-[8px]",
|
|
555
|
+
"top-right": "rounded-tl-[8px] rounded-bl-[8px] rounded-br-[8px]",
|
|
556
|
+
"top-center": "rounded-b-[8px]",
|
|
557
|
+
"bottom-left": "rounded-tr-[8px] rounded-tl-[8px] rounded-br-[8px]",
|
|
558
|
+
"bottom-right": "rounded-tl-[8px] rounded-tr-[8px] rounded-bl-[8px]",
|
|
559
|
+
"bottom-center": "rounded-t-[8px]",
|
|
560
|
+
"center-left": "rounded-r-[8px]",
|
|
561
|
+
"center-right": "rounded-l-[8px]"
|
|
562
|
+
};
|
|
563
|
+
var _secondaryAction_label, _primaryAction_label;
|
|
564
|
+
return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("div", {
|
|
565
|
+
className: "fixed inset-0 bg-black/40",
|
|
566
|
+
onClick: onClose,
|
|
567
|
+
"aria-hidden": "true"
|
|
568
|
+
}), /* @__PURE__ */ React3.createElement("div", {
|
|
569
|
+
className: "fixed flex p-4",
|
|
570
|
+
style: _object_spread({
|
|
571
|
+
inset: "0px",
|
|
572
|
+
zIndex: 9999,
|
|
573
|
+
pointerEvents: "none"
|
|
574
|
+
}, getPositionStyles())
|
|
575
|
+
}, /* @__PURE__ */ React3.createElement("div", {
|
|
576
|
+
role: "dialog",
|
|
577
|
+
"aria-modal": "true",
|
|
578
|
+
onClick: function(e) {
|
|
579
|
+
return e.stopPropagation();
|
|
580
|
+
},
|
|
581
|
+
className: "\n relative bg-white\n shadow-2xl\n flex flex-col\n ".concat(position.includes("left") || position.includes("right") ? "" : "max-h-[90vh]", "\n ").concat(className, "\n "),
|
|
582
|
+
style: {
|
|
583
|
+
width: width,
|
|
584
|
+
height: height !== null && height !== void 0 ? height : position.includes("left") || position.includes("right") ? "90vh" : "auto",
|
|
585
|
+
pointerEvents: "auto",
|
|
586
|
+
margin: margin,
|
|
587
|
+
boxShadow: "0px 4px 24px 0px rgba(0, 0, 0, 0.15)",
|
|
588
|
+
border: "1px solid #E5E7EB"
|
|
589
|
+
}
|
|
590
|
+
}, /* @__PURE__ */ React3.createElement("div", {
|
|
591
|
+
className: "px-6 py-4 pb-4 shrink-0 flex items-center justify-between border-b border-gray-200"
|
|
592
|
+
}, /* @__PURE__ */ React3.createElement("div", {
|
|
593
|
+
className: "flex items-center gap-3"
|
|
594
|
+
}, headerIcon && /* @__PURE__ */ React3.createElement("div", {
|
|
595
|
+
className: "flex shrink-0 items-center justify-center"
|
|
596
|
+
}, headerIcon), /* @__PURE__ */ React3.createElement("div", {
|
|
597
|
+
className: "flex-1"
|
|
598
|
+
}, title && /* @__PURE__ */ React3.createElement("h3", {
|
|
599
|
+
className: "text-[#333333] font-['Poppins'] text-[16px] font-semibold leading-normal"
|
|
600
|
+
}, title), subtitle && /* @__PURE__ */ React3.createElement("p", {
|
|
601
|
+
className: "mt-1 text-sm text-gray-500"
|
|
602
|
+
}, subtitle))), /* @__PURE__ */ React3.createElement("button", {
|
|
603
|
+
onClick: onClose,
|
|
604
|
+
"aria-label": "Close dialog",
|
|
605
|
+
className: "text-gray-400 hover:text-gray-600 transition-colors"
|
|
606
|
+
}, /* @__PURE__ */ React3.createElement(import_lucide_react2.X, {
|
|
607
|
+
size: 20,
|
|
608
|
+
strokeWidth: 2
|
|
609
|
+
}))), /* @__PURE__ */ React3.createElement("div", {
|
|
610
|
+
className: "flex-grow overflow-y-auto"
|
|
611
|
+
}, children), (primaryAction || secondaryAction) && /* @__PURE__ */ React3.createElement("div", {
|
|
612
|
+
className: "px-6 py-4 flex justify-center gap-3 shrink-0 border-t border-gray-200"
|
|
613
|
+
}, secondaryAction && /* @__PURE__ */ React3.createElement("button", {
|
|
614
|
+
onClick: secondaryAction.onClick,
|
|
615
|
+
className: "min-w-[140px] h-[36px] px-4 rounded-md border border-[#1761A3] bg-white text-[#1761A3] font-['Poppins'] text-[14px] font-medium hover:bg-gray-50 transition-colors",
|
|
616
|
+
type: "button"
|
|
617
|
+
}, (_secondaryAction_label = secondaryAction.label) !== null && _secondaryAction_label !== void 0 ? _secondaryAction_label : "Cancel"), primaryAction && /* @__PURE__ */ React3.createElement("button", {
|
|
618
|
+
onClick: primaryAction.onClick,
|
|
619
|
+
disabled: primaryAction.disabled,
|
|
620
|
+
className: "min-w-[140px] h-[36px] px-4 rounded-md font-['Poppins'] text-[14px] font-medium transition-colors ".concat(primaryAction.disabled ? "bg-blue-300 text-white cursor-not-allowed" : "bg-[#1761A3] text-white hover:bg-[#134a7a]"),
|
|
621
|
+
type: "button"
|
|
622
|
+
}, (_primaryAction_label = primaryAction.label) !== null && _primaryAction_label !== void 0 ? _primaryAction_label : "Save")))));
|
|
623
|
+
}
|
|
624
|
+
Modal.displayName = "Modal";
|
|
625
|
+
// src/components/ChartInterface.tsx
|
|
626
|
+
var import_react3 = __toESM(require("react"));
|
|
627
|
+
var import_chart = require("chart.js");
|
|
628
|
+
var import_class_variance_authority2 = require("class-variance-authority");
|
|
629
|
+
(_import_chart_Chart = import_chart.Chart).register.apply(_import_chart_Chart, _to_consumable_array(import_chart.registerables));
|
|
630
|
+
var cn2 = function() {
|
|
631
|
+
for(var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++){
|
|
632
|
+
classes[_key] = arguments[_key];
|
|
633
|
+
}
|
|
634
|
+
return classes.filter(Boolean).join(" ");
|
|
635
|
+
};
|
|
636
|
+
var chartVariants = (0, import_class_variance_authority2.cva)("rounded-lg transition-all", {
|
|
637
|
+
variants: {
|
|
638
|
+
variant: {
|
|
639
|
+
default: "bg-white border border-gray-200 p-4",
|
|
640
|
+
filled: "bg-gray-50 border border-gray-300 p-4",
|
|
641
|
+
elevated: "bg-white shadow-lg p-4",
|
|
642
|
+
flat: "bg-transparent p-0",
|
|
643
|
+
card: "bg-white border border-gray-200 shadow-sm p-6"
|
|
644
|
+
},
|
|
645
|
+
size: {
|
|
646
|
+
sm: "h-48",
|
|
647
|
+
default: "h-64",
|
|
648
|
+
lg: "h-96",
|
|
649
|
+
xl: "h-[500px]"
|
|
650
|
+
}
|
|
651
|
+
},
|
|
652
|
+
defaultVariants: {
|
|
653
|
+
variant: "default",
|
|
654
|
+
size: "default"
|
|
655
|
+
}
|
|
656
|
+
});
|
|
657
|
+
var ChartInterface = import_react3.default.forwardRef(function(_param, ref) {
|
|
658
|
+
var _param_type = _param.type, type = _param_type === void 0 ? "line" : _param_type, data = _param.data, _param_options = _param.options, options = _param_options === void 0 ? {} : _param_options, variant = _param.variant, size = _param.size, className = _param.className, props = _object_without_properties(_param, [
|
|
659
|
+
"type",
|
|
660
|
+
"data",
|
|
661
|
+
"options",
|
|
662
|
+
"variant",
|
|
663
|
+
"size",
|
|
664
|
+
"className"
|
|
665
|
+
]);
|
|
666
|
+
var canvasRef = (0, import_react3.useRef)(null);
|
|
667
|
+
var chartInstanceRef = (0, import_react3.useRef)(null);
|
|
668
|
+
(0, import_react3.useEffect)(function() {
|
|
669
|
+
var _canvasRef_current;
|
|
670
|
+
var ctx = (_canvasRef_current = canvasRef.current) === null || _canvasRef_current === void 0 ? void 0 : _canvasRef_current.getContext("2d");
|
|
671
|
+
if (!ctx) return;
|
|
672
|
+
if (chartInstanceRef.current) {
|
|
673
|
+
chartInstanceRef.current.destroy();
|
|
674
|
+
chartInstanceRef.current = null;
|
|
675
|
+
}
|
|
676
|
+
var safeData = JSON.parse(JSON.stringify(data));
|
|
677
|
+
var safeOptions = JSON.parse(JSON.stringify(options));
|
|
678
|
+
chartInstanceRef.current = new import_chart.Chart(ctx, {
|
|
679
|
+
type: type,
|
|
680
|
+
data: safeData,
|
|
681
|
+
options: _object_spread({
|
|
682
|
+
responsive: true,
|
|
683
|
+
maintainAspectRatio: false
|
|
684
|
+
}, safeOptions)
|
|
685
|
+
});
|
|
686
|
+
return function() {
|
|
687
|
+
if (chartInstanceRef.current) {
|
|
688
|
+
chartInstanceRef.current.destroy();
|
|
689
|
+
chartInstanceRef.current = null;
|
|
690
|
+
}
|
|
691
|
+
};
|
|
692
|
+
}, [
|
|
693
|
+
type,
|
|
694
|
+
JSON.stringify(data),
|
|
695
|
+
// Forces re-render on data change
|
|
696
|
+
JSON.stringify(options)
|
|
697
|
+
]);
|
|
698
|
+
return /* @__PURE__ */ import_react3.default.createElement("div", _object_spread({
|
|
699
|
+
ref: ref,
|
|
700
|
+
className: cn2(chartVariants({
|
|
701
|
+
variant: variant,
|
|
702
|
+
size: size
|
|
703
|
+
}), className)
|
|
704
|
+
}, props), /* @__PURE__ */ import_react3.default.createElement("canvas", {
|
|
705
|
+
ref: canvasRef
|
|
706
|
+
}));
|
|
707
|
+
});
|
|
708
|
+
ChartInterface.displayName = "ChartInterface";
|
|
709
|
+
// src/components/FormContainer.tsx
|
|
710
|
+
var import_react4 = __toESM(require("react"));
|
|
711
|
+
var FormContainer = function(param) {
|
|
712
|
+
var children = param.children, onSubmit = param.onSubmit, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className;
|
|
713
|
+
return /* @__PURE__ */ import_react4.default.createElement("form", {
|
|
714
|
+
onSubmit: onSubmit,
|
|
715
|
+
className: "\n flex flex-col items-center justify-center\n w-full max-w-[560px] min-h-[80vh] mx-auto p-6\n bg-white shadow-lg rounded-lg\n ".concat(className, "\n ")
|
|
716
|
+
}, children);
|
|
717
|
+
};
|
|
718
|
+
FormContainer.displayName = "FormContainer";
|
|
719
|
+
// src/components/Input.tsx
|
|
720
|
+
var import_react5 = __toESM(require("react"));
|
|
721
|
+
var Input = function(param) {
|
|
722
|
+
var _param_type = param.type, type = _param_type === void 0 ? "text" : _param_type, name = param.name, placeholder = param.placeholder, onChange = param.onChange, _param_hasError = param.hasError, hasError = _param_hasError === void 0 ? false : _param_hasError, _param_errorMessage = param.errorMessage, errorMessage = _param_errorMessage === void 0 ? "" : _param_errorMessage, _param_value = param.value, value = _param_value === void 0 ? "" : _param_value, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className;
|
|
723
|
+
var _ref = _sliced_to_array((0, import_react5.useState)(value), 2), internalValue = _ref[0], setInternalValue = _ref[1];
|
|
724
|
+
var _ref1 = _sliced_to_array((0, import_react5.useState)(false), 2), showError = _ref1[0], setShowError = _ref1[1];
|
|
725
|
+
(0, import_react5.useEffect)(function() {
|
|
726
|
+
setInternalValue(value);
|
|
727
|
+
setShowError(hasError || value === "");
|
|
728
|
+
}, [
|
|
729
|
+
value,
|
|
730
|
+
hasError
|
|
731
|
+
]);
|
|
732
|
+
var handleChange = function(e) {
|
|
733
|
+
var newValue = e.target.value;
|
|
734
|
+
setInternalValue(newValue);
|
|
735
|
+
onChange(e);
|
|
736
|
+
setShowError(newValue === "");
|
|
737
|
+
};
|
|
738
|
+
return /* @__PURE__ */ import_react5.default.createElement("div", {
|
|
739
|
+
className: "mb-4"
|
|
740
|
+
}, /* @__PURE__ */ import_react5.default.createElement("input", {
|
|
741
|
+
type: type,
|
|
742
|
+
name: name,
|
|
743
|
+
placeholder: placeholder,
|
|
744
|
+
value: internalValue,
|
|
745
|
+
onChange: handleChange,
|
|
746
|
+
className: "\n w-[438px] max-w-full h-[44px] flex-shrink-0\n rounded-[6px] border\n ".concat(showError ? "border-red-500" : "border-[#D9D9D9]", "\n bg-white\n text-base leading-5\n outline-none\n ").concat(className, "\n ")
|
|
747
|
+
}), /* @__PURE__ */ import_react5.default.createElement("span", {
|
|
748
|
+
className: "block text-sm text-red-500 h-[0.8rem]"
|
|
749
|
+
}, errorMessage));
|
|
750
|
+
};
|
|
751
|
+
Input.displayName = "Input";
|
|
752
|
+
// src/components/TabbedInterface.tsx
|
|
753
|
+
var import_react6 = __toESM(require("react"));
|
|
754
|
+
var TabbedInterface = function(param) {
|
|
755
|
+
var tabs = param.tabs, _param_variant = param.variant, variant = _param_variant === void 0 ? "basic" : _param_variant, _param_defaultActiveTab = param.defaultActiveTab, defaultActiveTab = _param_defaultActiveTab === void 0 ? 0 : _param_defaultActiveTab, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className, onTabChange = param.onTabChange;
|
|
756
|
+
var _tabs_activeTab;
|
|
757
|
+
var _ref = _sliced_to_array((0, import_react6.useState)(defaultActiveTab), 2), activeTab = _ref[0], setActiveTab = _ref[1];
|
|
758
|
+
var id = (0, import_react6.useId)();
|
|
759
|
+
var PRIMARY_COLOR = "#1e73be";
|
|
760
|
+
var ACCENT_COLOR = "#4DAF83";
|
|
761
|
+
var handleTabClick = function(index) {
|
|
762
|
+
var _tabs_index;
|
|
763
|
+
if ((_tabs_index = tabs[index]) === null || _tabs_index === void 0 ? void 0 : _tabs_index.disabled) return;
|
|
764
|
+
setActiveTab(index);
|
|
765
|
+
onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(index);
|
|
766
|
+
};
|
|
767
|
+
var getTabButtonStyles = function(index) {
|
|
768
|
+
var _tabs_index;
|
|
769
|
+
var isActive = index === activeTab;
|
|
770
|
+
var baseStyles = "flex items-center justify-center gap-2 px-6 py-3 text-sm font-semibold transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 whitespace-nowrap flex-shrink-0";
|
|
771
|
+
var disabledStyles = "opacity-50 cursor-not-allowed";
|
|
772
|
+
if ((_tabs_index = tabs[index]) === null || _tabs_index === void 0 ? void 0 : _tabs_index.disabled) {
|
|
773
|
+
return "".concat(baseStyles, " ").concat(disabledStyles, " text-gray-500");
|
|
774
|
+
}
|
|
775
|
+
switch(variant){
|
|
776
|
+
case "basic":
|
|
777
|
+
return "".concat(baseStyles, " ").concat(isActive ? "text-[".concat(PRIMARY_COLOR, "] border-b-2 border-[").concat(PRIMARY_COLOR, "]") : "text-gray-600 hover:text-gray-800 hover:border-b-2 hover:border-gray-300");
|
|
778
|
+
case "underline":
|
|
779
|
+
return "".concat(baseStyles, " relative ").concat(isActive ? "text-[".concat(PRIMARY_COLOR, "]") : "text-gray-600 hover:text-gray-800");
|
|
780
|
+
case "pill":
|
|
781
|
+
return "".concat(baseStyles, " rounded-full font-semibold text-[14px] leading-normal ").concat(isActive ? "bg-white text-[".concat(PRIMARY_COLOR, "] border border-gray-400 shadow-md") : "bg-[#EEF4F7] text-[".concat(PRIMARY_COLOR, "] border border-[rgba(38,118,154,0.45)] hover:bg-blue-100"));
|
|
782
|
+
case "square":
|
|
783
|
+
return "".concat(baseStyles, " rounded-[6px] border border-[rgba(38,118,154,0.45)] font-semibold text-[14px] leading-normal ").concat(isActive ? "bg-white text-[".concat(PRIMARY_COLOR, "]") : "bg-[#EEF4F7] text-gray-600 hover:bg-gray-200");
|
|
784
|
+
case "dark":
|
|
785
|
+
return "".concat(baseStyles, " rounded-lg ").concat(isActive ? "bg-gray-700 text-white shadow-md" : "bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white");
|
|
786
|
+
case "shadow":
|
|
787
|
+
return "".concat(baseStyles, " rounded-lg ").concat(isActive ? "bg-white text-[".concat(PRIMARY_COLOR, "] shadow-lg") : "bg-gray-50 text-gray-600 shadow-sm hover:bg-white");
|
|
788
|
+
case "glass":
|
|
789
|
+
return "".concat(baseStyles, " rounded-lg border border-white/30 backdrop-blur-lg ").concat(isActive ? "bg-[".concat(PRIMARY_COLOR, "]/40 text-white shadow-md") : "bg-white/20 text-[".concat(PRIMARY_COLOR, "] hover:bg-[").concat(PRIMARY_COLOR, "]/50 hover:text-white"));
|
|
790
|
+
case "gradient":
|
|
791
|
+
return "".concat(baseStyles, " rounded-lg ").concat(isActive ? "bg-gradient-to-r from-[".concat(PRIMARY_COLOR, "] to-[").concat(ACCENT_COLOR, "] text-white shadow-md") : "bg-gray-100 text-[".concat(PRIMARY_COLOR, "] hover:bg-gray-200"));
|
|
792
|
+
default:
|
|
793
|
+
return "".concat(baseStyles, " ").concat(isActive ? "text-[".concat(PRIMARY_COLOR, "]") : "text-gray-600 hover:text-gray-800");
|
|
794
|
+
}
|
|
795
|
+
};
|
|
796
|
+
var getUnderlineBarClasses = function(index) {
|
|
797
|
+
var isActive = index === activeTab;
|
|
798
|
+
if (variant === "underline") {
|
|
799
|
+
return "absolute bottom-0 left-0 h-[3px] bg-gradient-to-r from-[".concat(PRIMARY_COLOR, "] to-[").concat(ACCENT_COLOR, "] transition-all duration-300 ease-out ").concat(isActive ? "w-full" : "w-0");
|
|
800
|
+
}
|
|
801
|
+
return "hidden";
|
|
802
|
+
};
|
|
803
|
+
return /* @__PURE__ */ import_react6.default.createElement("div", {
|
|
804
|
+
className: "w-full bg-[#EEF4F7] rounded-lg border border-gray-200 shadow-sm ".concat(className)
|
|
805
|
+
}, /* @__PURE__ */ import_react6.default.createElement("div", {
|
|
806
|
+
className: "flex flex-row overflow-x-auto scrollbar-hide space-x-4 p-4",
|
|
807
|
+
role: "tablist"
|
|
808
|
+
}, tabs.map(function(tab, index) {
|
|
809
|
+
return /* @__PURE__ */ import_react6.default.createElement("button", {
|
|
810
|
+
key: tab.id || "tab-".concat(id, "-").concat(index),
|
|
811
|
+
className: getTabButtonStyles(index),
|
|
812
|
+
onClick: function() {
|
|
813
|
+
return handleTabClick(index);
|
|
814
|
+
},
|
|
815
|
+
disabled: tab.disabled,
|
|
816
|
+
"aria-selected": index === activeTab,
|
|
817
|
+
"aria-controls": "".concat(id, "-tabpanel-").concat(index),
|
|
818
|
+
role: "tab",
|
|
819
|
+
type: "button"
|
|
820
|
+
}, tab.icon && /* @__PURE__ */ import_react6.default.createElement("span", {
|
|
821
|
+
className: "flex-shrink-0 w-4 h-4"
|
|
822
|
+
}, tab.icon), /* @__PURE__ */ import_react6.default.createElement("span", {
|
|
823
|
+
className: "truncate"
|
|
824
|
+
}, tab.label), variant === "underline" && /* @__PURE__ */ import_react6.default.createElement("span", {
|
|
825
|
+
className: getUnderlineBarClasses(index)
|
|
826
|
+
}));
|
|
827
|
+
})), /* @__PURE__ */ import_react6.default.createElement("div", {
|
|
828
|
+
className: "h-[2px] flex-shrink-0 bg-[#D9D9D9]"
|
|
829
|
+
}), /* @__PURE__ */ import_react6.default.createElement("div", {
|
|
830
|
+
id: "".concat(id, "-tabpanel-").concat(activeTab),
|
|
831
|
+
role: "tabpanel",
|
|
832
|
+
"aria-labelledby": "".concat(id, "-tab-").concat(activeTab),
|
|
833
|
+
className: "p-6 animate-fade-in bg-white"
|
|
834
|
+
}, ((_tabs_activeTab = tabs[activeTab]) === null || _tabs_activeTab === void 0 ? void 0 : _tabs_activeTab.content) || /* @__PURE__ */ import_react6.default.createElement("div", {
|
|
835
|
+
className: "text-center text-gray-500 py-8"
|
|
836
|
+
}, "No content available for this tab")));
|
|
837
|
+
};
|
|
838
|
+
TabbedInterface.displayName = "TabbedInterface";
|
|
839
|
+
// src/components/TabedInterfaceTailwindCSS.tsx
|
|
840
|
+
var import_react7 = __toESM(require("react"));
|
|
841
|
+
var cn3 = function() {
|
|
842
|
+
for(var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++){
|
|
843
|
+
classes[_key] = arguments[_key];
|
|
844
|
+
}
|
|
845
|
+
return classes.filter(Boolean).join(" ");
|
|
846
|
+
};
|
|
847
|
+
var getFontClass = function(font) {
|
|
848
|
+
if (!font) return "font-sans";
|
|
849
|
+
var lower = font.toLowerCase().trim();
|
|
850
|
+
if (lower === "sans" || lower === "sans-serif") return "font-sans";
|
|
851
|
+
if (lower === "serif") return "font-serif";
|
|
852
|
+
if (lower === "mono" || lower === "monospace") return "font-mono";
|
|
853
|
+
if (font.startsWith("font-") || font.includes("[")) return font;
|
|
854
|
+
return "font-[".concat(font, "]");
|
|
855
|
+
};
|
|
856
|
+
var getContainerClasses = function(variant) {
|
|
857
|
+
var base = "w-full max-w-4xl mx-auto my-10 rounded-xl border p-8 box-border transition-all duration-300 overflow-hidden";
|
|
858
|
+
switch(variant){
|
|
859
|
+
case "dark":
|
|
860
|
+
return cn3(base, "bg-[#45484f] border-slate-700 text-slate-50 shadow-lg");
|
|
861
|
+
case "glass":
|
|
862
|
+
return cn3(base, "bg-white/10 border-white/30 text-slate-900 backdrop-blur-xl shadow-lg");
|
|
863
|
+
default:
|
|
864
|
+
return cn3(base, "bg-white border-[#b8d1f3] text-slate-900 shadow-sm");
|
|
865
|
+
}
|
|
866
|
+
};
|
|
867
|
+
var getTabButtonClasses = function(variant, active, isDragging, orientation, tabHeaderFontClass) {
|
|
868
|
+
var base = "relative flex items-center px-4 py-2 text-sm font-semibold cursor-pointer transition-all duration-300 select-none";
|
|
869
|
+
var alignment = orientation === "vertical" ? "text-left" : "text-center";
|
|
870
|
+
var iconSize = " [&>svg]:h-[18px] [&>svg]:w-[18px] [&>svg]:shrink-0";
|
|
871
|
+
var draggingRing = isDragging ? "ring-2 ring-[#1761A3]/60" : "";
|
|
872
|
+
switch(variant){
|
|
873
|
+
case "underline":
|
|
874
|
+
return cn3(base, alignment, iconSize, draggingRing, tabHeaderFontClass, active ? "text-[#1761A3]" : "text-slate-600 hover:text-[#1761A3] hover:bg-slate-50/60");
|
|
875
|
+
case "pill":
|
|
876
|
+
return cn3(base, alignment, iconSize, "rounded-full", draggingRing, tabHeaderFontClass, active ? "bg-[#1761A3] text-white shadow-md" : "bg-transparent text-[#1761A3] hover:bg-[#1761A3]/10");
|
|
877
|
+
case "outline":
|
|
878
|
+
return cn3(base, alignment, iconSize, "rounded-lg border-2", draggingRing, tabHeaderFontClass, active ? "border-[#1761A3] bg-[#F3F8FF] text-[#1761A3] shadow-sm" : "border-transparent text-slate-700 hover:border-slate-300 hover:bg-slate-50");
|
|
879
|
+
case "filled":
|
|
880
|
+
return cn3(base, alignment, iconSize, "rounded-lg", draggingRing, tabHeaderFontClass, active ? "bg-[#1761A3] text-white shadow-md" : "bg-[#EAF3FD] text-[#1761A3] hover:bg-[#d3e4fb]");
|
|
881
|
+
case "gradient":
|
|
882
|
+
return cn3(base, alignment, iconSize, "rounded-lg", draggingRing, tabHeaderFontClass, active ? "bg-gradient-to-r from-[#1761A3] to-[#4DAF83] text-white shadow-md" : "bg-[#F0F4F8] text-[#1761A3] hover:bg-[#e1e8f0]");
|
|
883
|
+
case "shadow":
|
|
884
|
+
return cn3(base, alignment, iconSize, "rounded-lg", draggingRing, tabHeaderFontClass, active ? "bg-white text-[#1761A3] shadow-lg" : "bg-[#F8FAFD] text-slate-600 shadow-sm hover:bg-white");
|
|
885
|
+
case "glass":
|
|
886
|
+
return cn3(base, alignment, iconSize, "rounded-lg border border-white/30 backdrop-blur-lg", draggingRing, tabHeaderFontClass, active ? "bg-[#1761A3]/40 text-white shadow-md" : "bg-white/20 text-[#1761A3] hover:bg-[#1761A3]/50 hover:text-white");
|
|
887
|
+
case "dark":
|
|
888
|
+
return cn3(base, alignment, iconSize, "rounded-none", draggingRing, tabHeaderFontClass, active ? "text-[#90cdf4] border-b-4 border-[#63b3ed]" : "text-[#cbd5e0] hover:text-[#63b3ed]");
|
|
889
|
+
default:
|
|
890
|
+
return cn3(base, alignment, iconSize, draggingRing, tabHeaderFontClass, active ? "text-[#1761A3]" : "text-slate-700 hover:text-[#1761A3] hover:bg-slate-50");
|
|
891
|
+
}
|
|
892
|
+
};
|
|
893
|
+
var getUnderlineInnerClasses = function(variant, active, orientation) {
|
|
894
|
+
if (variant !== "underline") return "hidden";
|
|
895
|
+
if (orientation === "vertical") {
|
|
896
|
+
return cn3("pointer-events-none absolute left-0 top-0 h-full w-[3px] rounded-full bg-gradient-to-b from-[#1761A3] to-[#4DAF83] transition-transform duration-300 origin-top", active ? "scale-y-100" : "scale-y-0");
|
|
897
|
+
}
|
|
898
|
+
return cn3("pointer-events-none absolute bottom-[-2px] left-0 h-[3px] w-full rounded-full bg-gradient-to-r from-[#1761A3] to-[#4DAF83] transition-transform duration-300 origin-left", active ? "scale-x-100" : "scale-x-0");
|
|
899
|
+
};
|
|
900
|
+
var TabbedInterface2 = function(param) {
|
|
901
|
+
var tabs = param.tabs, _param_variant = param.variant, variant = _param_variant === void 0 ? "underline" : _param_variant, onTabChange = param.onTabChange, _param_draggableTabs = param.draggableTabs, draggableTabs = _param_draggableTabs === void 0 ? false : _param_draggableTabs, onReorderTabs = param.onReorderTabs, _param_orientation = param.orientation, orientation = _param_orientation === void 0 ? "horizontal" : _param_orientation, _param_verticalPosition = param.verticalPosition, verticalPosition = _param_verticalPosition === void 0 ? "left" : _param_verticalPosition, _param_showTabCloseIconInHeader = param.showTabCloseIconInHeader, showTabCloseIconInHeader = _param_showTabCloseIconInHeader === void 0 ? false : _param_showTabCloseIconInHeader, _param_tabCloseIconPosition = param.tabCloseIconPosition, tabCloseIconPosition = _param_tabCloseIconPosition === void 0 ? "right" : _param_tabCloseIconPosition, tabCloseIconContent = param.tabCloseIconContent, onCloseTab = param.onCloseTab, tabHeaderFont = param.tabHeaderFont, tabContentFont = param.tabContentFont, sectionTitleFont = param.sectionTitleFont, sectionDescriptionFont = param.sectionDescriptionFont;
|
|
902
|
+
var _ref = _sliced_to_array((0, import_react7.useState)(0), 2), activeIndex = _ref[0], setActiveIndex = _ref[1];
|
|
903
|
+
var _ref1 = _sliced_to_array((0, import_react7.useState)(null), 2), draggingIndex = _ref1[0], setDraggingIndex = _ref1[1];
|
|
904
|
+
var effectiveCloseIconContent = tabCloseIconContent !== null && tabCloseIconContent !== void 0 ? tabCloseIconContent : "\xD7";
|
|
905
|
+
var tabHeaderFontClass = getFontClass(tabHeaderFont);
|
|
906
|
+
var tabContentFontClass = getFontClass(tabContentFont);
|
|
907
|
+
(0, import_react7.useEffect)(function() {
|
|
908
|
+
if (!tabs.length) {
|
|
909
|
+
setActiveIndex(0);
|
|
910
|
+
return;
|
|
911
|
+
}
|
|
912
|
+
setActiveIndex(function(prev) {
|
|
913
|
+
return prev < 0 ? 0 : prev >= tabs.length ? tabs.length - 1 : prev;
|
|
914
|
+
});
|
|
915
|
+
}, [
|
|
916
|
+
tabs.length
|
|
917
|
+
]);
|
|
918
|
+
var handleTabClick = function(index) {
|
|
919
|
+
setActiveIndex(index);
|
|
920
|
+
onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(tabs[index].label);
|
|
921
|
+
};
|
|
922
|
+
var handleDragStart = function(index) {
|
|
923
|
+
if (!draggableTabs) return;
|
|
924
|
+
setDraggingIndex(index);
|
|
925
|
+
};
|
|
926
|
+
var handleDragOver = function(event) {
|
|
927
|
+
if (!draggableTabs) return;
|
|
928
|
+
event.preventDefault();
|
|
929
|
+
};
|
|
930
|
+
var handleDrop = function(index) {
|
|
931
|
+
if (!draggableTabs) return;
|
|
932
|
+
if (draggingIndex === null) {
|
|
933
|
+
setDraggingIndex(null);
|
|
934
|
+
return;
|
|
935
|
+
}
|
|
936
|
+
var fromIndex = draggingIndex;
|
|
937
|
+
var toIndex = index;
|
|
938
|
+
if (fromIndex === toIndex) {
|
|
939
|
+
setDraggingIndex(null);
|
|
940
|
+
return;
|
|
941
|
+
}
|
|
942
|
+
setActiveIndex(function(prevActive) {
|
|
943
|
+
var active = prevActive;
|
|
944
|
+
if (active === fromIndex) {
|
|
945
|
+
return toIndex;
|
|
946
|
+
}
|
|
947
|
+
if (fromIndex < toIndex) {
|
|
948
|
+
if (active > fromIndex && active <= toIndex) {
|
|
949
|
+
return active - 1;
|
|
950
|
+
}
|
|
951
|
+
} else if (fromIndex > toIndex) {
|
|
952
|
+
if (active >= toIndex && active < fromIndex) {
|
|
953
|
+
return active + 1;
|
|
954
|
+
}
|
|
955
|
+
}
|
|
956
|
+
return active;
|
|
957
|
+
});
|
|
958
|
+
onReorderTabs === null || onReorderTabs === void 0 ? void 0 : onReorderTabs(fromIndex, toIndex);
|
|
959
|
+
setDraggingIndex(null);
|
|
960
|
+
};
|
|
961
|
+
var handleDragEnd = function() {
|
|
962
|
+
if (!draggableTabs) return;
|
|
963
|
+
setDraggingIndex(null);
|
|
964
|
+
};
|
|
965
|
+
var headerButtons = /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, tabs.map(function(tab, index) {
|
|
966
|
+
var active = index === activeIndex;
|
|
967
|
+
var isDragging = draggableTabs && draggingIndex === index;
|
|
968
|
+
var showClose = showTabCloseIconInHeader && !!onCloseTab;
|
|
969
|
+
var closeIcon = showClose ? /* @__PURE__ */ import_react7.default.createElement("span", {
|
|
970
|
+
"aria-label": "Close tab",
|
|
971
|
+
role: "button",
|
|
972
|
+
onClick: function(e) {
|
|
973
|
+
e.stopPropagation();
|
|
974
|
+
onCloseTab === null || onCloseTab === void 0 ? void 0 : onCloseTab(index);
|
|
975
|
+
},
|
|
976
|
+
className: cn3("inline-flex h-6 w-6 items-center justify-center rounded-full text-md font-bold hover:bg-slate-200 hover:text-slate-700", tabHeaderFontClass)
|
|
977
|
+
}, effectiveCloseIconContent) : null;
|
|
978
|
+
return /* @__PURE__ */ import_react7.default.createElement("button", {
|
|
979
|
+
type: "button",
|
|
980
|
+
key: index,
|
|
981
|
+
onClick: function() {
|
|
982
|
+
return handleTabClick(index);
|
|
983
|
+
},
|
|
984
|
+
className: getTabButtonClasses(variant, active, isDragging, orientation, tabHeaderFontClass),
|
|
985
|
+
draggable: draggableTabs,
|
|
986
|
+
onDragStart: function() {
|
|
987
|
+
return handleDragStart(index);
|
|
988
|
+
},
|
|
989
|
+
onDragOver: handleDragOver,
|
|
990
|
+
onDrop: function() {
|
|
991
|
+
return handleDrop(index);
|
|
992
|
+
},
|
|
993
|
+
onDragEnd: handleDragEnd
|
|
994
|
+
}, /* @__PURE__ */ import_react7.default.createElement("div", {
|
|
995
|
+
className: "flex w-full items-center justify-between gap-2"
|
|
996
|
+
}, /* @__PURE__ */ import_react7.default.createElement("div", {
|
|
997
|
+
className: "flex min-w-0 items-center gap-2"
|
|
998
|
+
}, tabCloseIconPosition === "left" && closeIcon, tab.icon && /* @__PURE__ */ import_react7.default.createElement("span", {
|
|
999
|
+
className: "[&>svg]:h-[18px] [&>svg]:w-[18px] [&>svg]:shrink-0"
|
|
1000
|
+
}, tab.icon), /* @__PURE__ */ import_react7.default.createElement("span", {
|
|
1001
|
+
className: "truncate"
|
|
1002
|
+
}, tab.label)), tabCloseIconPosition === "right" && closeIcon), /* @__PURE__ */ import_react7.default.createElement("span", {
|
|
1003
|
+
className: getUnderlineInnerClasses(variant, active, orientation)
|
|
1004
|
+
}));
|
|
1005
|
+
}));
|
|
1006
|
+
var content = /* @__PURE__ */ import_react7.default.createElement("div", {
|
|
1007
|
+
className: cn3("relative min-h-[180px]", tabContentFontClass)
|
|
1008
|
+
}, tabs.map(function(tab, index) {
|
|
1009
|
+
var active = index === activeIndex;
|
|
1010
|
+
return /* @__PURE__ */ import_react7.default.createElement("div", {
|
|
1011
|
+
key: index,
|
|
1012
|
+
className: cn3("transition-opacity duration-300", active ? "relative opacity-100" : "pointer-events-none absolute inset-0 opacity-0")
|
|
1013
|
+
}, tab.content);
|
|
1014
|
+
}));
|
|
1015
|
+
var containerClasses = getContainerClasses(variant);
|
|
1016
|
+
if (orientation === "horizontal") {
|
|
1017
|
+
return /* @__PURE__ */ import_react7.default.createElement("div", {
|
|
1018
|
+
className: containerClasses
|
|
1019
|
+
}, /* @__PURE__ */ import_react7.default.createElement("div", {
|
|
1020
|
+
className: "mb-5 flex justify-around max-[600px]:flex-col max-[600px]:items-center"
|
|
1021
|
+
}, headerButtons), content);
|
|
1022
|
+
}
|
|
1023
|
+
return /* @__PURE__ */ import_react7.default.createElement("div", {
|
|
1024
|
+
className: containerClasses
|
|
1025
|
+
}, verticalPosition === "left" ? /* @__PURE__ */ import_react7.default.createElement("div", {
|
|
1026
|
+
className: "grid gap-6 md:grid-cols-[minmax(180px,220px)_1fr]"
|
|
1027
|
+
}, /* @__PURE__ */ import_react7.default.createElement("div", {
|
|
1028
|
+
className: "flex flex-col gap-2 border-b border-slate-200 pb-3 md:border-b-0 md:border-r md:pb-0 md:pr-4"
|
|
1029
|
+
}, headerButtons), /* @__PURE__ */ import_react7.default.createElement("div", null, content)) : /* @__PURE__ */ import_react7.default.createElement("div", {
|
|
1030
|
+
className: "grid gap-6 md:grid-cols-[1fr_minmax(180px,220px)]"
|
|
1031
|
+
}, /* @__PURE__ */ import_react7.default.createElement("div", null, content), /* @__PURE__ */ import_react7.default.createElement("div", {
|
|
1032
|
+
className: "flex flex-col gap-2 border-t border-slate-200 pt-3 md:border-t-0 md:border-l md:pt-0 md:pl-4"
|
|
1033
|
+
}, headerButtons)));
|
|
1034
|
+
};
|
|
1035
|
+
TabbedInterface2.displayName = "TabbedInterface";
|
|
1036
|
+
// src/components/Table.tsx
|
|
1037
|
+
var import_react8 = __toESM(require("react"));
|
|
1038
|
+
var import_outline = require("@heroicons/react/24/outline");
|
|
1039
|
+
var Table = function(param) {
|
|
1040
|
+
var headers = param.headers, data = param.data, page = param.page, setPage = param.setPage, limit = param.limit, setLimit = param.setLimit, totalCount = param.totalCount, highlightRowColor = param.highlightRowColor, actions = param.actions, paginationRequired = param.paginationRequired, _param_paginationPosition = param.paginationPosition, paginationPosition = _param_paginationPosition === void 0 ? "bottom-center" : _param_paginationPosition, onDownloadPDF = param.onDownloadPDF, onDownloadExcel = param.onDownloadExcel, _param_searchable = param.searchable, searchable = _param_searchable === void 0 ? false : _param_searchable, _param_searchTerm = param.searchTerm, searchTerm = _param_searchTerm === void 0 ? "" : _param_searchTerm, onResetSearch = param.onResetSearch, onSearch = param.onSearch, _param_searchModeOptions = param.searchModeOptions, searchModeOptions = _param_searchModeOptions === void 0 ? [
|
|
1041
|
+
"includes",
|
|
1042
|
+
"startsWith"
|
|
1043
|
+
] : _param_searchModeOptions;
|
|
1044
|
+
var _ref = _sliced_to_array((0, import_react8.useState)(searchModeOptions[0]), 2), searchMode = _ref[0], setSearchMode = _ref[1];
|
|
1045
|
+
var isPaginated = paginationRequired;
|
|
1046
|
+
var handleChange = function(e) {
|
|
1047
|
+
onSearch === null || onSearch === void 0 ? void 0 : onSearch(e.target.value, searchMode);
|
|
1048
|
+
};
|
|
1049
|
+
var totalPages = isPaginated ? Math.max(1, Math.ceil((totalCount || 0) / (limit || 1))) : 0;
|
|
1050
|
+
var currentPage = isPaginated ? typeof page === "number" && page > 0 ? page : 1 : 1;
|
|
1051
|
+
var goToPage = function(p) {
|
|
1052
|
+
if (!isPaginated) return;
|
|
1053
|
+
var clamped = Math.max(1, Math.min(totalPages, p));
|
|
1054
|
+
setPage === null || setPage === void 0 ? void 0 : setPage(clamped);
|
|
1055
|
+
};
|
|
1056
|
+
var renderPageNumbers = function() {
|
|
1057
|
+
var _loop = function(i) {
|
|
1058
|
+
pages.push(/* @__PURE__ */ import_react8.default.createElement("button", {
|
|
1059
|
+
key: i,
|
|
1060
|
+
onClick: function() {
|
|
1061
|
+
return goToPage(i);
|
|
1062
|
+
},
|
|
1063
|
+
disabled: currentPage === i,
|
|
1064
|
+
className: "inline-flex items-center rounded-md px-3 py-1 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50",
|
|
1065
|
+
style: {
|
|
1066
|
+
background: currentPage === i ? "#ccc" : "linear-gradient(to right, #1e73be, #28a97d)"
|
|
1067
|
+
}
|
|
1068
|
+
}, i));
|
|
1069
|
+
};
|
|
1070
|
+
if (!isPaginated || totalPages <= 1) return null;
|
|
1071
|
+
var pages = [];
|
|
1072
|
+
var siblings = 1;
|
|
1073
|
+
pages.push(/* @__PURE__ */ import_react8.default.createElement("button", {
|
|
1074
|
+
key: 1,
|
|
1075
|
+
onClick: function() {
|
|
1076
|
+
return goToPage(1);
|
|
1077
|
+
},
|
|
1078
|
+
disabled: currentPage === 1,
|
|
1079
|
+
className: "inline-flex items-center rounded-md px-3 py-1 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50",
|
|
1080
|
+
style: {
|
|
1081
|
+
background: currentPage === 1 ? "#ccc" : "linear-gradient(to right, #1e73be, #28a97d)"
|
|
1082
|
+
}
|
|
1083
|
+
}, "1"));
|
|
1084
|
+
if (currentPage > siblings + 2) {
|
|
1085
|
+
pages.push(/* @__PURE__ */ import_react8.default.createElement("span", {
|
|
1086
|
+
key: "start-ellipsis",
|
|
1087
|
+
className: "px-1 text-sm text-slate-500"
|
|
1088
|
+
}, "..."));
|
|
1089
|
+
}
|
|
1090
|
+
var start = Math.max(2, currentPage - siblings);
|
|
1091
|
+
var end = Math.min(totalPages - 1, currentPage + siblings);
|
|
1092
|
+
for(var i = start; i <= end; i++)_loop(i);
|
|
1093
|
+
if (currentPage < totalPages - siblings - 1) {
|
|
1094
|
+
pages.push(/* @__PURE__ */ import_react8.default.createElement("span", {
|
|
1095
|
+
key: "end-ellipsis",
|
|
1096
|
+
className: "px-1 text-sm text-slate-500"
|
|
1097
|
+
}, "..."));
|
|
1098
|
+
}
|
|
1099
|
+
if (totalPages > 1) {
|
|
1100
|
+
pages.push(/* @__PURE__ */ import_react8.default.createElement("button", {
|
|
1101
|
+
key: totalPages,
|
|
1102
|
+
onClick: function() {
|
|
1103
|
+
return goToPage(totalPages);
|
|
1104
|
+
},
|
|
1105
|
+
disabled: currentPage === totalPages,
|
|
1106
|
+
className: "inline-flex items-center rounded-md px-3 py-1 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50",
|
|
1107
|
+
style: {
|
|
1108
|
+
background: currentPage === totalPages ? "#ccc" : "linear-gradient(to right, #1e73be, #28a97d)"
|
|
1109
|
+
}
|
|
1110
|
+
}, totalPages));
|
|
1111
|
+
}
|
|
1112
|
+
return pages;
|
|
1113
|
+
};
|
|
1114
|
+
var renderPagination = function() {
|
|
1115
|
+
if (!isPaginated) return null;
|
|
1116
|
+
var align = paginationPosition.includes("left") ? "justify-start" : paginationPosition.includes("right") ? "justify-end" : "justify-center";
|
|
1117
|
+
return /* @__PURE__ */ import_react8.default.createElement("div", {
|
|
1118
|
+
className: "my-2 flex w-full ".concat(align)
|
|
1119
|
+
}, /* @__PURE__ */ import_react8.default.createElement("div", {
|
|
1120
|
+
className: "flex flex-wrap items-center justify-center gap-2"
|
|
1121
|
+
}, /* @__PURE__ */ import_react8.default.createElement("button", {
|
|
1122
|
+
onClick: function() {
|
|
1123
|
+
return goToPage(currentPage - 1);
|
|
1124
|
+
},
|
|
1125
|
+
disabled: currentPage === 1,
|
|
1126
|
+
className: "inline-flex items-center rounded-md px-3 py-1 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50",
|
|
1127
|
+
style: {
|
|
1128
|
+
background: currentPage === 1 ? "#ccc" : "linear-gradient(to right, #1e73be, #28a97d)"
|
|
1129
|
+
}
|
|
1130
|
+
}, "Previous"), renderPageNumbers(), /* @__PURE__ */ import_react8.default.createElement("button", {
|
|
1131
|
+
onClick: function() {
|
|
1132
|
+
return goToPage(currentPage + 1);
|
|
1133
|
+
},
|
|
1134
|
+
disabled: currentPage === totalPages,
|
|
1135
|
+
className: "inline-flex items-center rounded-md px-3 py-1 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50",
|
|
1136
|
+
style: {
|
|
1137
|
+
background: currentPage === totalPages ? "#ccc" : "linear-gradient(to right, #1e73be, #28a97d)"
|
|
1138
|
+
}
|
|
1139
|
+
}, "Next"), /* @__PURE__ */ import_react8.default.createElement("select", {
|
|
1140
|
+
value: limit,
|
|
1141
|
+
onChange: function(e) {
|
|
1142
|
+
setPage === null || setPage === void 0 ? void 0 : setPage(1);
|
|
1143
|
+
setLimit === null || setLimit === void 0 ? void 0 : setLimit(Number(e.target.value));
|
|
1144
|
+
},
|
|
1145
|
+
className: "ml-2 rounded-md border border-slate-300 px-2 py-1 text-sm text-slate-700"
|
|
1146
|
+
}, [
|
|
1147
|
+
5,
|
|
1148
|
+
10,
|
|
1149
|
+
15
|
|
1150
|
+
].map(function(size) {
|
|
1151
|
+
return /* @__PURE__ */ import_react8.default.createElement("option", {
|
|
1152
|
+
key: size,
|
|
1153
|
+
value: size
|
|
1154
|
+
}, size);
|
|
1155
|
+
})), /* @__PURE__ */ import_react8.default.createElement("span", {
|
|
1156
|
+
className: "ml-2 text-xs text-slate-600"
|
|
1157
|
+
}, "Page ", currentPage, " of ", totalPages, " (Total: ", totalCount, " items)")));
|
|
1158
|
+
};
|
|
1159
|
+
return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, (searchable || onDownloadExcel || onDownloadPDF) && /* @__PURE__ */ import_react8.default.createElement("div", {
|
|
1160
|
+
className: "mb-3 flex flex-wrap items-center justify-between gap-3"
|
|
1161
|
+
}, searchable && /* @__PURE__ */ import_react8.default.createElement("div", {
|
|
1162
|
+
className: "flex items-center gap-2"
|
|
1163
|
+
}, /* @__PURE__ */ import_react8.default.createElement("div", {
|
|
1164
|
+
className: "relative flex items-center"
|
|
1165
|
+
}, /* @__PURE__ */ import_react8.default.createElement("input", {
|
|
1166
|
+
type: "text",
|
|
1167
|
+
placeholder: "Search...",
|
|
1168
|
+
value: searchTerm,
|
|
1169
|
+
onChange: handleChange,
|
|
1170
|
+
className: "w-56 rounded-lg border border-transparent bg-white px-3 py-2 pr-8 text-sm font-medium text-[#1761A3] shadow-sm outline-none ring-1 ring-transparent transition focus:border-transparent focus:ring-2 focus:ring-emerald-400"
|
|
1171
|
+
}), searchTerm && /* @__PURE__ */ import_react8.default.createElement("button", {
|
|
1172
|
+
onClick: onResetSearch,
|
|
1173
|
+
"aria-label": "Clear search",
|
|
1174
|
+
className: "absolute right-2 flex h-6 w-6 items-center justify-center rounded-full text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
|
|
1175
|
+
}, /* @__PURE__ */ import_react8.default.createElement(import_outline.XMarkIcon, {
|
|
1176
|
+
className: "h-4 w-4"
|
|
1177
|
+
}))), /* @__PURE__ */ import_react8.default.createElement("select", {
|
|
1178
|
+
value: searchMode,
|
|
1179
|
+
onChange: function(e) {
|
|
1180
|
+
return setSearchMode(e.target.value);
|
|
1181
|
+
},
|
|
1182
|
+
className: "rounded-lg border border-transparent bg-white px-2 py-2 text-sm font-medium text-slate-700 shadow-sm outline-none ring-1 ring-transparent transition hover:bg-slate-50 focus:border-transparent focus:ring-2 focus:ring-emerald-400"
|
|
1183
|
+
}, searchModeOptions.map(function(mode) {
|
|
1184
|
+
return /* @__PURE__ */ import_react8.default.createElement("option", {
|
|
1185
|
+
key: mode,
|
|
1186
|
+
value: mode
|
|
1187
|
+
}, mode === "startsWith" ? "Starts With" : "Includes");
|
|
1188
|
+
}))), (onDownloadPDF || onDownloadExcel) && /* @__PURE__ */ import_react8.default.createElement("div", {
|
|
1189
|
+
className: "mt-1 flex items-center gap-2"
|
|
1190
|
+
}, onDownloadPDF && /* @__PURE__ */ import_react8.default.createElement("button", {
|
|
1191
|
+
onClick: function() {
|
|
1192
|
+
return onDownloadPDF(data, headers);
|
|
1193
|
+
},
|
|
1194
|
+
className: "inline-flex items-center gap-1 rounded-md px-3 py-2 text-sm font-medium text-white shadow-sm hover:opacity-90",
|
|
1195
|
+
style: {
|
|
1196
|
+
background: "linear-gradient(to right, #1e73be, #28a97d)"
|
|
1197
|
+
}
|
|
1198
|
+
}, /* @__PURE__ */ import_react8.default.createElement(import_outline.ArrowDownOnSquareIcon, {
|
|
1199
|
+
className: "h-5 w-5"
|
|
1200
|
+
})), onDownloadExcel && /* @__PURE__ */ import_react8.default.createElement("button", {
|
|
1201
|
+
onClick: function() {
|
|
1202
|
+
return onDownloadExcel(data, headers);
|
|
1203
|
+
},
|
|
1204
|
+
className: "inline-flex items-center gap-1 rounded-md px-3 py-2 text-sm font-medium text-white shadow-sm hover:opacity-90",
|
|
1205
|
+
style: {
|
|
1206
|
+
background: "linear-gradient(to right, #1e73be, #28a97d)"
|
|
1207
|
+
}
|
|
1208
|
+
}, /* @__PURE__ */ import_react8.default.createElement(import_outline.ArrowDownOnSquareIcon, {
|
|
1209
|
+
className: "h-5 w-5"
|
|
1210
|
+
}), /* @__PURE__ */ import_react8.default.createElement("span", null, "Excel")))), paginationPosition.startsWith("top") && data.length > 0 && renderPagination(), /* @__PURE__ */ import_react8.default.createElement("div", {
|
|
1211
|
+
className: "mt-1 overflow-hidden rounded-xl border border-[#1761A3] bg-white"
|
|
1212
|
+
}, /* @__PURE__ */ import_react8.default.createElement("table", {
|
|
1213
|
+
className: "w-full border-collapse"
|
|
1214
|
+
}, /* @__PURE__ */ import_react8.default.createElement("thead", {
|
|
1215
|
+
style: {
|
|
1216
|
+
background: "linear-gradient(to right, #1e73be, #28a97d)"
|
|
1217
|
+
}
|
|
1218
|
+
}, /* @__PURE__ */ import_react8.default.createElement("tr", null, headers.map(function(header, idx) {
|
|
1219
|
+
return /* @__PURE__ */ import_react8.default.createElement("th", {
|
|
1220
|
+
key: idx,
|
|
1221
|
+
className: "h-[50px] px-3 py-2 text-left text-sm font-bold text-white first:rounded-tl-xl last:rounded-tr-xl"
|
|
1222
|
+
}, header.label);
|
|
1223
|
+
}), actions && /* @__PURE__ */ import_react8.default.createElement("th", {
|
|
1224
|
+
className: "h-[50px] px-3 py-2 text-left text-sm font-bold text-white"
|
|
1225
|
+
}, "Actions"))), /* @__PURE__ */ import_react8.default.createElement("tbody", null, data.length > 0 ? data.map(function(row, rowIndex) {
|
|
1226
|
+
return /* @__PURE__ */ import_react8.default.createElement("tr", {
|
|
1227
|
+
key: rowIndex,
|
|
1228
|
+
className: "h-[57px] border-b border-slate-200 text-sm text-slate-900 even:bg-slate-50 hover:bg-slate-100 ".concat(highlightRowColor || "")
|
|
1229
|
+
}, headers.map(function(header, cellIdx) {
|
|
1230
|
+
return /* @__PURE__ */ import_react8.default.createElement("td", {
|
|
1231
|
+
key: cellIdx,
|
|
1232
|
+
className: "px-3 py-2"
|
|
1233
|
+
}, function() {
|
|
1234
|
+
var value = row[header.key];
|
|
1235
|
+
if (import_react8.default.isValidElement(value)) return value;
|
|
1236
|
+
if (typeof value === "function") {
|
|
1237
|
+
try {
|
|
1238
|
+
var result = value();
|
|
1239
|
+
if (import_react8.default.isValidElement(result)) return result;
|
|
1240
|
+
} catch (e) {
|
|
1241
|
+
console.warn("Error executing function in table cell:", e);
|
|
1242
|
+
}
|
|
1243
|
+
}
|
|
1244
|
+
if (typeof value === "string" && value.trim().startsWith("<") && value.trim().endsWith(">")) {
|
|
1245
|
+
return /* @__PURE__ */ import_react8.default.createElement("span", {
|
|
1246
|
+
dangerouslySetInnerHTML: {
|
|
1247
|
+
__html: value
|
|
1248
|
+
}
|
|
1249
|
+
});
|
|
1250
|
+
}
|
|
1251
|
+
if (Array.isArray(value)) {
|
|
1252
|
+
if (value.some(function(item) {
|
|
1253
|
+
return import_react8.default.isValidElement(item);
|
|
1254
|
+
})) {
|
|
1255
|
+
return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, value);
|
|
1256
|
+
}
|
|
1257
|
+
return value.join(", ");
|
|
1258
|
+
}
|
|
1259
|
+
if (_instanceof(value, Date)) return value.toLocaleString();
|
|
1260
|
+
if (typeof value === "boolean") return value ? "Yes" : "No";
|
|
1261
|
+
if (value === null || value === void 0) return "-";
|
|
1262
|
+
if (typeof value === "number") return value.toString();
|
|
1263
|
+
if ((typeof value === "undefined" ? "undefined" : _type_of(value)) === "object") return JSON.stringify(value);
|
|
1264
|
+
return String(value);
|
|
1265
|
+
}());
|
|
1266
|
+
}), actions && /* @__PURE__ */ import_react8.default.createElement("td", {
|
|
1267
|
+
className: "px-3 py-2"
|
|
1268
|
+
}, actions(row)));
|
|
1269
|
+
}) : /* @__PURE__ */ import_react8.default.createElement("tr", null, /* @__PURE__ */ import_react8.default.createElement("td", {
|
|
1270
|
+
colSpan: headers.length + (actions ? 1 : 0),
|
|
1271
|
+
className: "px-4 py-6 text-center text-slate-500"
|
|
1272
|
+
}, /* @__PURE__ */ import_react8.default.createElement("div", {
|
|
1273
|
+
className: "flex items-center justify-center gap-4"
|
|
1274
|
+
}, /* @__PURE__ */ import_react8.default.createElement("span", null, "No records found."), onResetSearch && /* @__PURE__ */ import_react8.default.createElement("button", {
|
|
1275
|
+
onClick: onResetSearch,
|
|
1276
|
+
className: "inline-flex items-center gap-1 rounded-md px-3 py-2 text-sm font-medium text-white shadow-sm hover:opacity-90",
|
|
1277
|
+
style: {
|
|
1278
|
+
background: "linear-gradient(to right, #1e73be, #28a97d)"
|
|
1279
|
+
}
|
|
1280
|
+
}, /* @__PURE__ */ import_react8.default.createElement("span", null, "Reset"), /* @__PURE__ */ import_react8.default.createElement(import_outline.ArrowPathIcon, {
|
|
1281
|
+
className: "h-5 w-5"
|
|
1282
|
+
})))))))), paginationPosition.startsWith("bottom") && data.length > 0 && renderPagination());
|
|
1283
|
+
};
|
|
1284
|
+
Table.displayName = "Table";
|
|
1285
|
+
// src/components/TableTailwindCSS.tsx
|
|
1286
|
+
var import_react9 = __toESM(require("react"));
|
|
1287
|
+
var import_outline2 = require("@heroicons/react/24/outline");
|
|
1288
|
+
var Table2 = function(param) {
|
|
1289
|
+
var headers = param.headers, data = param.data, page = param.page, setPage = param.setPage, limit = param.limit, setLimit = param.setLimit, totalCount = param.totalCount, highlightRowColor = param.highlightRowColor, actions = param.actions, paginationRequired = param.paginationRequired, _param_paginationPosition = param.paginationPosition, paginationPosition = _param_paginationPosition === void 0 ? "bottom-center" : _param_paginationPosition, onDownloadPDF = param.onDownloadPDF, onDownloadExcel = param.onDownloadExcel, _param_searchable = param.searchable, searchable = _param_searchable === void 0 ? false : _param_searchable, _param_searchTerm = param.searchTerm, searchTerm = _param_searchTerm === void 0 ? "" : _param_searchTerm, onResetSearch = param.onResetSearch, onSearch = param.onSearch, _param_searchModeOptions = param.searchModeOptions, searchModeOptions = _param_searchModeOptions === void 0 ? [
|
|
1290
|
+
"includes",
|
|
1291
|
+
"startsWith"
|
|
1292
|
+
] : _param_searchModeOptions, summary = param.summary, _param_summaryKey = param.summaryKey, summaryKey = _param_summaryKey === void 0 ? "summary" : _param_summaryKey, _param_summaryTitleField = param.summaryTitleField, summaryTitleField = _param_summaryTitleField === void 0 ? "name" : _param_summaryTitleField, _param_summaryColumn = param.summaryColumn, summaryColumn = _param_summaryColumn === void 0 ? false : _param_summaryColumn, summaryColumnKey = param.summaryColumnKey, _param_summaryColumnMaxLength = param.summaryColumnMaxLength, summaryColumnMaxLength = _param_summaryColumnMaxLength === void 0 ? 120 : _param_summaryColumnMaxLength, textWrapColumns = param.textWrapColumns, _param_textWrapMaxLength = param.textWrapMaxLength, textWrapMaxLength = _param_textWrapMaxLength === void 0 ? 120 : _param_textWrapMaxLength, textWrapColumnMaxLengths = param.textWrapColumnMaxLengths;
|
|
1293
|
+
var _ref = _sliced_to_array((0, import_react9.useState)(searchModeOptions[0]), 2), searchMode = _ref[0], setSearchMode = _ref[1];
|
|
1294
|
+
var _ref1 = _sliced_to_array((0, import_react9.useState)(null), 2), expandedRowIndex = _ref1[0], setExpandedRowIndex = _ref1[1];
|
|
1295
|
+
var _ref2 = _sliced_to_array((0, import_react9.useState)(/* @__PURE__ */ new Set()), 2), expandedRowIndexes = _ref2[0], setExpandedRowIndexes = _ref2[1];
|
|
1296
|
+
var isPaginated = paginationRequired;
|
|
1297
|
+
var handleChange = function(e) {
|
|
1298
|
+
onSearch === null || onSearch === void 0 ? void 0 : onSearch(e.target.value, searchMode);
|
|
1299
|
+
};
|
|
1300
|
+
var totalPages = isPaginated ? Math.max(1, Math.ceil((totalCount || 0) / (limit || 1))) : 0;
|
|
1301
|
+
var currentPage = isPaginated ? typeof page === "number" && page > 0 ? page : 1 : 1;
|
|
1302
|
+
var goToPage = function(p) {
|
|
1303
|
+
if (!isPaginated) return;
|
|
1304
|
+
var clamped = Math.max(1, Math.min(totalPages, p));
|
|
1305
|
+
setPage === null || setPage === void 0 ? void 0 : setPage(clamped);
|
|
1306
|
+
};
|
|
1307
|
+
var renderPageNumbers = function() {
|
|
1308
|
+
var _loop = function(i) {
|
|
1309
|
+
pages.push(/* @__PURE__ */ import_react9.default.createElement("button", {
|
|
1310
|
+
key: i,
|
|
1311
|
+
onClick: function() {
|
|
1312
|
+
return goToPage(i);
|
|
1313
|
+
},
|
|
1314
|
+
disabled: currentPage === i,
|
|
1315
|
+
className: "inline-flex items-center rounded-md px-3 py-1 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50",
|
|
1316
|
+
style: {
|
|
1317
|
+
background: currentPage === i ? "#ccc" : "linear-gradient(to right, #1e73be, #28a97d)"
|
|
1318
|
+
}
|
|
1319
|
+
}, i));
|
|
1320
|
+
};
|
|
1321
|
+
if (!isPaginated || totalPages <= 1) return null;
|
|
1322
|
+
var pages = [];
|
|
1323
|
+
var siblings = 1;
|
|
1324
|
+
pages.push(/* @__PURE__ */ import_react9.default.createElement("button", {
|
|
1325
|
+
key: 1,
|
|
1326
|
+
onClick: function() {
|
|
1327
|
+
return goToPage(1);
|
|
1328
|
+
},
|
|
1329
|
+
disabled: currentPage === 1,
|
|
1330
|
+
className: "inline-flex items-center rounded-md px-3 py-1 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50",
|
|
1331
|
+
style: {
|
|
1332
|
+
background: currentPage === 1 ? "#ccc" : "linear-gradient(to right, #1e73beee, #28a97d)"
|
|
1333
|
+
}
|
|
1334
|
+
}, "1"));
|
|
1335
|
+
if (currentPage > siblings + 2) {
|
|
1336
|
+
pages.push(/* @__PURE__ */ import_react9.default.createElement("span", {
|
|
1337
|
+
key: "start-ellipsis",
|
|
1338
|
+
className: "px-1 text-sm text-slate-500"
|
|
1339
|
+
}, "..."));
|
|
1340
|
+
}
|
|
1341
|
+
var start = Math.max(2, currentPage - siblings);
|
|
1342
|
+
var end = Math.min(totalPages - 1, currentPage + siblings);
|
|
1343
|
+
for(var i = start; i <= end; i++)_loop(i);
|
|
1344
|
+
if (currentPage < totalPages - siblings - 1) {
|
|
1345
|
+
pages.push(/* @__PURE__ */ import_react9.default.createElement("span", {
|
|
1346
|
+
key: "end-ellipsis",
|
|
1347
|
+
className: "px-1 text-sm text-slate-500"
|
|
1348
|
+
}, "..."));
|
|
1349
|
+
}
|
|
1350
|
+
if (totalPages > 1) {
|
|
1351
|
+
pages.push(/* @__PURE__ */ import_react9.default.createElement("button", {
|
|
1352
|
+
key: totalPages,
|
|
1353
|
+
onClick: function() {
|
|
1354
|
+
return goToPage(totalPages);
|
|
1355
|
+
},
|
|
1356
|
+
disabled: currentPage === totalPages,
|
|
1357
|
+
className: "inline-flex items-center rounded-md px-3 py-1 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50",
|
|
1358
|
+
style: {
|
|
1359
|
+
background: currentPage === totalPages ? "#ccc" : "linear-gradient(to right, #1e73be, #28a97d)"
|
|
1360
|
+
}
|
|
1361
|
+
}, totalPages));
|
|
1362
|
+
}
|
|
1363
|
+
return pages;
|
|
1364
|
+
};
|
|
1365
|
+
var renderPagination = function() {
|
|
1366
|
+
if (!isPaginated) return null;
|
|
1367
|
+
var align = paginationPosition.includes("left") ? "justify-start" : paginationPosition.includes("right") ? "justify-end" : "justify-center";
|
|
1368
|
+
return /* @__PURE__ */ import_react9.default.createElement("div", {
|
|
1369
|
+
className: "my-2 flex w-full ".concat(align)
|
|
1370
|
+
}, /* @__PURE__ */ import_react9.default.createElement("div", {
|
|
1371
|
+
className: "flex flex-wrap items-center justify-center gap-2"
|
|
1372
|
+
}, /* @__PURE__ */ import_react9.default.createElement("button", {
|
|
1373
|
+
onClick: function() {
|
|
1374
|
+
return goToPage(currentPage - 1);
|
|
1375
|
+
},
|
|
1376
|
+
disabled: currentPage === 1,
|
|
1377
|
+
className: "inline-flex items-center rounded-md px-3 py-1 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50",
|
|
1378
|
+
style: {
|
|
1379
|
+
background: currentPage === 1 ? "#ccc" : "linear-gradient(to right, #1e73be, #28a97d)"
|
|
1380
|
+
}
|
|
1381
|
+
}, "Previous"), renderPageNumbers(), /* @__PURE__ */ import_react9.default.createElement("button", {
|
|
1382
|
+
onClick: function() {
|
|
1383
|
+
return goToPage(currentPage + 1);
|
|
1384
|
+
},
|
|
1385
|
+
disabled: currentPage === totalPages,
|
|
1386
|
+
className: "inline-flex items-center rounded-md px-3 py-1 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50",
|
|
1387
|
+
style: {
|
|
1388
|
+
background: currentPage === totalPages ? "#ccc" : "linear-gradient(to right, #1e73be, #28a97d)"
|
|
1389
|
+
}
|
|
1390
|
+
}, "Next"), /* @__PURE__ */ import_react9.default.createElement("select", {
|
|
1391
|
+
value: limit,
|
|
1392
|
+
onChange: function(e) {
|
|
1393
|
+
setPage === null || setPage === void 0 ? void 0 : setPage(1);
|
|
1394
|
+
setLimit === null || setLimit === void 0 ? void 0 : setLimit(Number(e.target.value));
|
|
1395
|
+
},
|
|
1396
|
+
className: "ml-2 rounded-md border border-slate-300 px-2 py-1 text-sm text-slate-700"
|
|
1397
|
+
}, [
|
|
1398
|
+
5,
|
|
1399
|
+
10,
|
|
1400
|
+
15
|
|
1401
|
+
].map(function(size) {
|
|
1402
|
+
return /* @__PURE__ */ import_react9.default.createElement("option", {
|
|
1403
|
+
key: size,
|
|
1404
|
+
value: size
|
|
1405
|
+
}, size);
|
|
1406
|
+
})), /* @__PURE__ */ import_react9.default.createElement("span", {
|
|
1407
|
+
className: "ml-2 text-xs text-slate-600"
|
|
1408
|
+
}, "Page ", currentPage, " of ", totalPages, " (Total: ", totalCount, " items)")));
|
|
1409
|
+
};
|
|
1410
|
+
var summaryColKeyToUse = summaryColumnKey || summaryKey;
|
|
1411
|
+
return /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, (searchable || onDownloadExcel || onDownloadPDF) && /* @__PURE__ */ import_react9.default.createElement("div", {
|
|
1412
|
+
className: "mb-3 flex flex-wrap items-center justify-between gap-3"
|
|
1413
|
+
}, searchable && /* @__PURE__ */ import_react9.default.createElement("div", {
|
|
1414
|
+
className: "flex items-center gap-2"
|
|
1415
|
+
}, /* @__PURE__ */ import_react9.default.createElement("div", {
|
|
1416
|
+
className: "relative flex items-center"
|
|
1417
|
+
}, /* @__PURE__ */ import_react9.default.createElement("input", {
|
|
1418
|
+
type: "text",
|
|
1419
|
+
placeholder: "Search...",
|
|
1420
|
+
value: searchTerm,
|
|
1421
|
+
onChange: handleChange,
|
|
1422
|
+
className: "w-56 rounded-lg border border-transparent bg-white px-3 py-2 pr-8 text-sm font-medium text-[#1761A3] shadow-sm outline-none ring-1 ring-transparent transition focus:border-transparent focus:ring-2 focus:ring-emerald-400"
|
|
1423
|
+
}), searchTerm && /* @__PURE__ */ import_react9.default.createElement("button", {
|
|
1424
|
+
onClick: onResetSearch,
|
|
1425
|
+
"aria-label": "Clear search",
|
|
1426
|
+
className: "absolute right-2 flex h-6 w-6 items-center justify-center rounded-full text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
|
|
1427
|
+
}, /* @__PURE__ */ import_react9.default.createElement(import_outline2.XMarkIcon, {
|
|
1428
|
+
className: "h-4 w-4"
|
|
1429
|
+
}))), /* @__PURE__ */ import_react9.default.createElement("select", {
|
|
1430
|
+
value: searchMode,
|
|
1431
|
+
onChange: function(e) {
|
|
1432
|
+
return setSearchMode(e.target.value);
|
|
1433
|
+
},
|
|
1434
|
+
className: "rounded-lg border border-transparent bg-white px-2 py-2 text-sm font-medium text-slate-700 shadow-sm outline-none ring-1 ring-transparent transition hover:bg-slate-50 focus:border-transparent focus:ring-2 focus:ring-emerald-400"
|
|
1435
|
+
}, searchModeOptions.map(function(mode) {
|
|
1436
|
+
return /* @__PURE__ */ import_react9.default.createElement("option", {
|
|
1437
|
+
key: mode,
|
|
1438
|
+
value: mode
|
|
1439
|
+
}, mode === "startsWith" ? "Starts With" : "Includes");
|
|
1440
|
+
}))), (onDownloadPDF || onDownloadExcel) && /* @__PURE__ */ import_react9.default.createElement("div", {
|
|
1441
|
+
className: "mt-1 flex items-center gap-2"
|
|
1442
|
+
}, onDownloadPDF && /* @__PURE__ */ import_react9.default.createElement("button", {
|
|
1443
|
+
onClick: function() {
|
|
1444
|
+
return onDownloadPDF(data, headers);
|
|
1445
|
+
},
|
|
1446
|
+
className: "inline-flex items-center gap-1 rounded-md px-3 py-2 text-sm font-medium text-white shadow-sm hover:opacity-90",
|
|
1447
|
+
style: {
|
|
1448
|
+
background: "linear-gradient(to right, #1e73be, #28a97d)"
|
|
1449
|
+
}
|
|
1450
|
+
}, /* @__PURE__ */ import_react9.default.createElement(import_outline2.ArrowDownOnSquareIcon, {
|
|
1451
|
+
className: "h-5 w-5"
|
|
1452
|
+
})), onDownloadExcel && /* @__PURE__ */ import_react9.default.createElement("button", {
|
|
1453
|
+
onClick: function() {
|
|
1454
|
+
return onDownloadExcel(data, headers);
|
|
1455
|
+
},
|
|
1456
|
+
className: "inline-flex items-center gap-1 rounded-md px-3 py-2 text-sm font-medium text-white shadow-sm hover:opacity-90",
|
|
1457
|
+
style: {
|
|
1458
|
+
background: "linear-gradient(to right, #1e73be, #28a97d)"
|
|
1459
|
+
}
|
|
1460
|
+
}, /* @__PURE__ */ import_react9.default.createElement(import_outline2.ArrowDownOnSquareIcon, {
|
|
1461
|
+
className: "h-5 w-5"
|
|
1462
|
+
}), /* @__PURE__ */ import_react9.default.createElement("span", null, "Excel")))), paginationPosition.startsWith("top") && data.length > 0 && renderPagination(), /* @__PURE__ */ import_react9.default.createElement("div", {
|
|
1463
|
+
className: "mt-1 overflow-hidden rounded-xl border border-[#1761A3] bg-white"
|
|
1464
|
+
}, /* @__PURE__ */ import_react9.default.createElement("table", {
|
|
1465
|
+
className: "w-full border-collapse"
|
|
1466
|
+
}, /* @__PURE__ */ import_react9.default.createElement("thead", {
|
|
1467
|
+
style: {
|
|
1468
|
+
background: "linear-gradient(to right, #1e73be, #28a97d)"
|
|
1469
|
+
}
|
|
1470
|
+
}, /* @__PURE__ */ import_react9.default.createElement("tr", null, headers.map(function(header, idx) {
|
|
1471
|
+
return /* @__PURE__ */ import_react9.default.createElement("th", {
|
|
1472
|
+
key: idx,
|
|
1473
|
+
className: "h-[50px] px-3 py-2 text-left text-sm font-bold text-white first:rounded-tl-xl last:rounded-tr-xl"
|
|
1474
|
+
}, header.label);
|
|
1475
|
+
}), actions && /* @__PURE__ */ import_react9.default.createElement("th", {
|
|
1476
|
+
className: "h-[50px] px-3 py-2 text-left text-sm font-bold text-white"
|
|
1477
|
+
}, "Actions"))), /* @__PURE__ */ import_react9.default.createElement("tbody", null, data.length > 0 ? data.map(function(row, rowIndex) {
|
|
1478
|
+
var isExpandable = !!summary;
|
|
1479
|
+
var isExpanded = summary === "single" ? expandedRowIndex === rowIndex : summary === "multi" ? expandedRowIndexes.has(rowIndex) : false;
|
|
1480
|
+
var handleRowClick = function() {
|
|
1481
|
+
if (!summary) return;
|
|
1482
|
+
if (summary === "single") {
|
|
1483
|
+
setExpandedRowIndex(function(prev) {
|
|
1484
|
+
return prev === rowIndex ? null : rowIndex;
|
|
1485
|
+
});
|
|
1486
|
+
} else if (summary === "multi") {
|
|
1487
|
+
setExpandedRowIndexes(function(prev) {
|
|
1488
|
+
var next = new Set(prev);
|
|
1489
|
+
if (next.has(rowIndex)) {
|
|
1490
|
+
next.delete(rowIndex);
|
|
1491
|
+
} else {
|
|
1492
|
+
next.add(rowIndex);
|
|
1493
|
+
}
|
|
1494
|
+
return next;
|
|
1495
|
+
});
|
|
1496
|
+
}
|
|
1497
|
+
};
|
|
1498
|
+
var handleCloseDrawer = function(e) {
|
|
1499
|
+
e.stopPropagation();
|
|
1500
|
+
if (summary === "single") {
|
|
1501
|
+
setExpandedRowIndex(null);
|
|
1502
|
+
} else if (summary === "multi") {
|
|
1503
|
+
setExpandedRowIndexes(function(prev) {
|
|
1504
|
+
var next = new Set(prev);
|
|
1505
|
+
next.delete(rowIndex);
|
|
1506
|
+
return next;
|
|
1507
|
+
});
|
|
1508
|
+
}
|
|
1509
|
+
};
|
|
1510
|
+
var titleValue = row[summaryTitleField];
|
|
1511
|
+
var summaryValue = row[summaryKey];
|
|
1512
|
+
return /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, {
|
|
1513
|
+
key: rowIndex
|
|
1514
|
+
}, /* @__PURE__ */ import_react9.default.createElement("tr", {
|
|
1515
|
+
onClick: isExpandable ? handleRowClick : void 0,
|
|
1516
|
+
className: "h-[57px] border-b border-slate-200 text-sm text-slate-900 even:bg-slate-50 hover:bg-slate-100 ".concat(isExpandable ? "cursor-pointer transition-colors" : "", " ").concat(highlightRowColor || "", " ").concat(isExpanded ? "bg-[#1e73be80]" : ""),
|
|
1517
|
+
style: isExpanded ? {
|
|
1518
|
+
backgroundColor: "rgba(30, 190, 145, 0.38)"
|
|
1519
|
+
} : void 0
|
|
1520
|
+
}, headers.map(function(header, cellIdx) {
|
|
1521
|
+
return /* @__PURE__ */ import_react9.default.createElement("td", {
|
|
1522
|
+
key: cellIdx,
|
|
1523
|
+
className: "px-3 py-2"
|
|
1524
|
+
}, function() {
|
|
1525
|
+
var value = row[header.key];
|
|
1526
|
+
if (summaryColumn && header.key === summaryColKeyToUse) {
|
|
1527
|
+
if (value == null) {
|
|
1528
|
+
return "-";
|
|
1529
|
+
}
|
|
1530
|
+
if (import_react9.default.isValidElement(value)) {
|
|
1531
|
+
return /* @__PURE__ */ import_react9.default.createElement("div", {
|
|
1532
|
+
className: "text-sm leading-relaxed text-slate-600 break-words whitespace-normal line-clamp-2"
|
|
1533
|
+
}, value);
|
|
1534
|
+
}
|
|
1535
|
+
var fullText;
|
|
1536
|
+
if (typeof value === "string") {
|
|
1537
|
+
fullText = value;
|
|
1538
|
+
} else if ((typeof value === "undefined" ? "undefined" : _type_of(value)) === "object") {
|
|
1539
|
+
fullText = JSON.stringify(value);
|
|
1540
|
+
} else {
|
|
1541
|
+
fullText = String(value);
|
|
1542
|
+
}
|
|
1543
|
+
var summaryOverride = textWrapColumnMaxLengths && textWrapColumnMaxLengths[summaryColKeyToUse];
|
|
1544
|
+
var maxLen = summaryOverride !== null && summaryOverride !== void 0 ? summaryOverride : summaryColumnMaxLength;
|
|
1545
|
+
var truncated = fullText.length <= maxLen ? fullText : fullText.substring(0, maxLen).trim() + "...";
|
|
1546
|
+
return /* @__PURE__ */ import_react9.default.createElement("div", {
|
|
1547
|
+
className: "text-sm leading-relaxed text-slate-600 break-words whitespace-normal line-clamp-2",
|
|
1548
|
+
title: fullText
|
|
1549
|
+
}, truncated);
|
|
1550
|
+
}
|
|
1551
|
+
if (textWrapColumns && textWrapColumns.includes(header.key)) {
|
|
1552
|
+
if (value == null) {
|
|
1553
|
+
return "-";
|
|
1554
|
+
}
|
|
1555
|
+
if (import_react9.default.isValidElement(value)) {
|
|
1556
|
+
return /* @__PURE__ */ import_react9.default.createElement("div", {
|
|
1557
|
+
className: "text-sm leading-relaxed text-slate-600 break-words whitespace-normal line-clamp-2"
|
|
1558
|
+
}, value);
|
|
1559
|
+
}
|
|
1560
|
+
var fullText1;
|
|
1561
|
+
if (typeof value === "string") {
|
|
1562
|
+
fullText1 = value;
|
|
1563
|
+
} else if ((typeof value === "undefined" ? "undefined" : _type_of(value)) === "object") {
|
|
1564
|
+
fullText1 = JSON.stringify(value);
|
|
1565
|
+
} else {
|
|
1566
|
+
fullText1 = String(value);
|
|
1567
|
+
}
|
|
1568
|
+
var perColMax = textWrapColumnMaxLengths && textWrapColumnMaxLengths[header.key];
|
|
1569
|
+
var maxLen1 = perColMax !== null && perColMax !== void 0 ? perColMax : textWrapMaxLength;
|
|
1570
|
+
var truncated1 = fullText1.length <= maxLen1 ? fullText1 : fullText1.substring(0, maxLen1).trim() + "...";
|
|
1571
|
+
return /* @__PURE__ */ import_react9.default.createElement("div", {
|
|
1572
|
+
className: "text-sm leading-relaxed text-slate-600 break-words whitespace-normal line-clamp-2",
|
|
1573
|
+
title: fullText1
|
|
1574
|
+
}, truncated1);
|
|
1575
|
+
}
|
|
1576
|
+
if (import_react9.default.isValidElement(value)) return value;
|
|
1577
|
+
if (typeof value === "function") {
|
|
1578
|
+
try {
|
|
1579
|
+
var result = value();
|
|
1580
|
+
if (import_react9.default.isValidElement(result)) return result;
|
|
1581
|
+
} catch (e) {
|
|
1582
|
+
console.warn("Error executing function in table cell:", e);
|
|
1583
|
+
}
|
|
1584
|
+
}
|
|
1585
|
+
if (typeof value === "string" && value.trim().startsWith("<") && value.trim().endsWith(">")) {
|
|
1586
|
+
return /* @__PURE__ */ import_react9.default.createElement("span", {
|
|
1587
|
+
dangerouslySetInnerHTML: {
|
|
1588
|
+
__html: value
|
|
1589
|
+
}
|
|
1590
|
+
});
|
|
1591
|
+
}
|
|
1592
|
+
if (Array.isArray(value)) {
|
|
1593
|
+
if (value.some(function(item) {
|
|
1594
|
+
return import_react9.default.isValidElement(item);
|
|
1595
|
+
})) {
|
|
1596
|
+
return /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, value);
|
|
1597
|
+
}
|
|
1598
|
+
return value.join(", ");
|
|
1599
|
+
}
|
|
1600
|
+
if (_instanceof(value, Date)) return value.toLocaleString();
|
|
1601
|
+
if (typeof value === "boolean") return value ? "Yes" : "No";
|
|
1602
|
+
if (value === null || value === void 0) return "-";
|
|
1603
|
+
if (typeof value === "number") return value.toString();
|
|
1604
|
+
if ((typeof value === "undefined" ? "undefined" : _type_of(value)) === "object") return JSON.stringify(value);
|
|
1605
|
+
return String(value);
|
|
1606
|
+
}());
|
|
1607
|
+
}), actions && /* @__PURE__ */ import_react9.default.createElement("td", {
|
|
1608
|
+
className: "px-3 py-2"
|
|
1609
|
+
}, actions(row))), isExpandable && isExpanded && /* @__PURE__ */ import_react9.default.createElement("tr", {
|
|
1610
|
+
className: "border-b border-blue-200"
|
|
1611
|
+
}, /* @__PURE__ */ import_react9.default.createElement("td", {
|
|
1612
|
+
colSpan: headers.length + (actions ? 1 : 0),
|
|
1613
|
+
className: "bg-gradient-to-r from-blue-25 to-blue-50 px-3 py-4"
|
|
1614
|
+
}, /* @__PURE__ */ import_react9.default.createElement("div", {
|
|
1615
|
+
className: "flex items-start gap-3"
|
|
1616
|
+
}, /* @__PURE__ */ import_react9.default.createElement("div", {
|
|
1617
|
+
className: "flex-1"
|
|
1618
|
+
}, /* @__PURE__ */ import_react9.default.createElement("div", {
|
|
1619
|
+
className: "mb-2 flex items-start justify-between"
|
|
1620
|
+
}, /* @__PURE__ */ import_react9.default.createElement("h4", {
|
|
1621
|
+
className: "text-sm font-semibold text-slate-800"
|
|
1622
|
+
}, titleValue ? "Summary for ".concat(String(titleValue)) : "Summary"), /* @__PURE__ */ import_react9.default.createElement("button", {
|
|
1623
|
+
onClick: handleCloseDrawer,
|
|
1624
|
+
className: "ml-2 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full transition-colors hover:bg-blue-200",
|
|
1625
|
+
"aria-label": "Close summary"
|
|
1626
|
+
}, /* @__PURE__ */ import_react9.default.createElement(import_outline2.XMarkIcon, {
|
|
1627
|
+
className: "h-4 w-4 text-slate-600"
|
|
1628
|
+
}))), /* @__PURE__ */ import_react9.default.createElement("p", {
|
|
1629
|
+
className: "text-sm leading-relaxed text-slate-600"
|
|
1630
|
+
}, summaryValue == null ? "-" : import_react9.default.isValidElement(summaryValue) ? summaryValue : typeof summaryValue === "string" ? summaryValue : (typeof summaryValue === "undefined" ? "undefined" : _type_of(summaryValue)) === "object" ? JSON.stringify(summaryValue) : String(summaryValue)))))));
|
|
1631
|
+
}) : /* @__PURE__ */ import_react9.default.createElement("tr", null, /* @__PURE__ */ import_react9.default.createElement("td", {
|
|
1632
|
+
colSpan: headers.length + (actions ? 1 : 0),
|
|
1633
|
+
className: "px-4 py-6 text-center text-slate-500"
|
|
1634
|
+
}, /* @__PURE__ */ import_react9.default.createElement("div", {
|
|
1635
|
+
className: "flex items-center justify-center gap-4"
|
|
1636
|
+
}, /* @__PURE__ */ import_react9.default.createElement("span", null, "No records found."), onResetSearch && /* @__PURE__ */ import_react9.default.createElement("button", {
|
|
1637
|
+
onClick: onResetSearch,
|
|
1638
|
+
className: "inline-flex items-center gap-1 rounded-md px-3 py-2 text-sm font-medium text-white shadow-sm hover:opacity-90",
|
|
1639
|
+
style: {
|
|
1640
|
+
background: "linear-gradient(to right, #1e73b, #28a97d)"
|
|
1641
|
+
}
|
|
1642
|
+
}, /* @__PURE__ */ import_react9.default.createElement("span", null, "Reset"), /* @__PURE__ */ import_react9.default.createElement(import_outline2.ArrowPathIcon, {
|
|
1643
|
+
className: "h-5 w-5"
|
|
1644
|
+
})))))))), paginationPosition.startsWith("bottom") && data.length > 0 && renderPagination());
|
|
1645
|
+
};
|
|
1646
|
+
Table2.displayName = "Table";
|
|
1647
|
+
// src/components/TooltipTailwindCSS.tsx
|
|
1648
|
+
var import_react10 = __toESM(require("react"));
|
|
1649
|
+
var Tooltip = function(param) {
|
|
1650
|
+
var text = param.text, _param_position = param.position, position = _param_position === void 0 ? "top" : _param_position, children = param.children, _param_variant = param.variant, variant = _param_variant === void 0 ? "default" : _param_variant, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className, _param_textColor = param.textColor, textColor = _param_textColor === void 0 ? "text-gray-800" : _param_textColor, _param_backgroundColor = param.backgroundColor, backgroundColor = _param_backgroundColor === void 0 ? "bg-gradient-to-r from-[rgba(23,97,163,1)] to-[rgba(77,175,131,1)]" : _param_backgroundColor, image = param.image, animation = param.animation;
|
|
1651
|
+
var _ref = _sliced_to_array((0, import_react10.useState)(false), 2), visible = _ref[0], setVisible = _ref[1];
|
|
1652
|
+
var _ref1 = _sliced_to_array((0, import_react10.useState)(false), 2), showAnimation = _ref1[0], setShowAnimation = _ref1[1];
|
|
1653
|
+
var showTooltip = function() {
|
|
1654
|
+
setVisible(true);
|
|
1655
|
+
if (animation) {
|
|
1656
|
+
var delay = animation.triggerDelay || 100;
|
|
1657
|
+
setTimeout(function() {
|
|
1658
|
+
return setShowAnimation(true);
|
|
1659
|
+
}, delay);
|
|
1660
|
+
}
|
|
1661
|
+
};
|
|
1662
|
+
var hideTooltip = function() {
|
|
1663
|
+
setVisible(false);
|
|
1664
|
+
setShowAnimation(false);
|
|
1665
|
+
};
|
|
1666
|
+
var containerClasses = "relative inline-block ".concat(className);
|
|
1667
|
+
var defaultTooltipClasses = "\n absolute z-50 \n font-poppins \n font-medium \n \n text-[rgba(255,255,255,1)]\n text-[10px] \n leading-normal \n not-italic\n rounded \n shadow-sm \n transition-opacity \n duration-200\n w-[98px] \n h-[26px] \n flex-shrink-0 flex \n items-center \n justify-center\n bg-[rgba(23,97,163,1)] \n bg-gradient-to-r from-[rgba(23,97,163,1)] to-[rgba(77,175,131,1)]\n ".concat(visible ? "opacity-100" : "opacity-0 pointer-events-none", "\n ").concat(image ? "" : "px-3 py-3", "\n ");
|
|
1668
|
+
var transparentTooltipClasses = "\n absolute z-50 font-medium ".concat(textColor, "\n rounded transition-all duration-200\n ").concat(visible ? "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none", "\n ").concat(image ? "p-1" : "px-3 py-2", "\n ");
|
|
1669
|
+
var positionClasses = {
|
|
1670
|
+
top: "bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 mb-2",
|
|
1671
|
+
right: "left-full top-1/2 transform -translate-y-1/2 translate-x-2 ml-2",
|
|
1672
|
+
bottom: "top-full left-1/2 transform -translate-x-1/2 translate-y-2 mt-2",
|
|
1673
|
+
left: "right-full top-1/2 transform -translate-y-1/2 -translate-x-2 mr-2"
|
|
1674
|
+
};
|
|
1675
|
+
var arrowBaseClasses = "absolute w-2 h-2 transform rotate-45";
|
|
1676
|
+
var arrowPositionClasses = {
|
|
1677
|
+
top: "bottom-[-4px] left-1/2 transform -translate-x-1/2",
|
|
1678
|
+
right: "left-[-4px] top-1/2 transform -translate-y-1/2",
|
|
1679
|
+
bottom: "top-[-4px] left-1/2 transform -translate-x-1/2",
|
|
1680
|
+
left: "right-[-4px] top-1/2 transform -translate-y-1/2"
|
|
1681
|
+
};
|
|
1682
|
+
var arrowBackgroundClass = "bg-[rgba(23,97,163,1)]";
|
|
1683
|
+
var tooltipClasses = variant === "transparent" ? "".concat(transparentTooltipClasses, " ").concat(positionClasses[position]) : "".concat(defaultTooltipClasses, " ").concat(positionClasses[position]);
|
|
1684
|
+
var renderTooltipContent = function() {
|
|
1685
|
+
if (image) {
|
|
1686
|
+
return /* @__PURE__ */ import_react10.default.createElement("img", {
|
|
1687
|
+
src: image.src,
|
|
1688
|
+
alt: image.alt || "Tooltip image",
|
|
1689
|
+
width: image.width || 200,
|
|
1690
|
+
height: image.height || 150,
|
|
1691
|
+
className: "rounded-md object-cover",
|
|
1692
|
+
loading: "lazy"
|
|
1693
|
+
});
|
|
1694
|
+
}
|
|
1695
|
+
return text;
|
|
1696
|
+
};
|
|
1697
|
+
var renderAnimation = function() {
|
|
1698
|
+
if (!animation || !showAnimation) return null;
|
|
1699
|
+
var AnimationComponent = animation.component;
|
|
1700
|
+
return /* @__PURE__ */ import_react10.default.createElement(AnimationComponent, _object_spread({
|
|
1701
|
+
isActive: showAnimation
|
|
1702
|
+
}, animation.props));
|
|
1703
|
+
};
|
|
1704
|
+
return /* @__PURE__ */ import_react10.default.createElement("div", {
|
|
1705
|
+
className: containerClasses,
|
|
1706
|
+
onMouseEnter: showTooltip,
|
|
1707
|
+
onMouseLeave: hideTooltip,
|
|
1708
|
+
onFocus: showTooltip,
|
|
1709
|
+
onBlur: hideTooltip
|
|
1710
|
+
}, children, renderAnimation(), /* @__PURE__ */ import_react10.default.createElement("div", {
|
|
1711
|
+
className: tooltipClasses,
|
|
1712
|
+
role: "tooltip"
|
|
1713
|
+
}, renderTooltipContent(), variant === "default" && !image && /* @__PURE__ */ import_react10.default.createElement("div", {
|
|
1714
|
+
className: "".concat(arrowBaseClasses, " ").concat(arrowPositionClasses[position], " ").concat(arrowBackgroundClass, " rounded-sm")
|
|
1715
|
+
})));
|
|
1716
|
+
};
|
|
1717
|
+
Tooltip.displayName = "Tooltip";
|
|
1718
|
+
// src/components/Calendar.tsx
|
|
1719
|
+
var import_react11 = __toESM(require("react"));
|
|
1720
|
+
var import_hi = require("react-icons/hi");
|
|
1721
|
+
var import_hi2 = require("react-icons/hi2");
|
|
1722
|
+
var convertToDateString = function(date) {
|
|
1723
|
+
if (!date) return "";
|
|
1724
|
+
var year = date.year;
|
|
1725
|
+
var month = String(date.month + 1).padStart(2, "0");
|
|
1726
|
+
var day = String(date.day).padStart(2, "0");
|
|
1727
|
+
return "".concat(year, "-").concat(month, "-").concat(day);
|
|
1728
|
+
};
|
|
1729
|
+
var cn4 = function() {
|
|
1730
|
+
for(var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++){
|
|
1731
|
+
classes[_key] = arguments[_key];
|
|
1732
|
+
}
|
|
1733
|
+
return classes.filter(Boolean).join(" ");
|
|
1734
|
+
};
|
|
1735
|
+
var isSameDate = function(date1, date2) {
|
|
1736
|
+
if (!date1 || !date2) return false;
|
|
1737
|
+
return date1.year === date2.year && date1.month === date2.month && date1.day === date2.day;
|
|
1738
|
+
};
|
|
1739
|
+
var formatDate = function(date) {
|
|
1740
|
+
if (!date) return "";
|
|
1741
|
+
var month = String(date.month + 1).padStart(2, "0");
|
|
1742
|
+
var day = String(date.day).padStart(2, "0");
|
|
1743
|
+
var year = String(date.year);
|
|
1744
|
+
return "".concat(month, "-").concat(day, "-").concat(year);
|
|
1745
|
+
};
|
|
1746
|
+
var formatDateWithFormat = function(date, format) {
|
|
1747
|
+
if (!date) return "";
|
|
1748
|
+
var monthNum = date.month + 1;
|
|
1749
|
+
var month = String(monthNum).padStart(2, "0");
|
|
1750
|
+
var day = String(date.day).padStart(2, "0");
|
|
1751
|
+
var year = String(date.year);
|
|
1752
|
+
var monthNames = [
|
|
1753
|
+
"JAN",
|
|
1754
|
+
"FEB",
|
|
1755
|
+
"MAR",
|
|
1756
|
+
"APR",
|
|
1757
|
+
"MAY",
|
|
1758
|
+
"JUN",
|
|
1759
|
+
"JUL",
|
|
1760
|
+
"AUG",
|
|
1761
|
+
"SEP",
|
|
1762
|
+
"OCT",
|
|
1763
|
+
"NOV",
|
|
1764
|
+
"DEC"
|
|
1765
|
+
];
|
|
1766
|
+
var monthAbbr = monthNames[date.month];
|
|
1767
|
+
if (format === "none") {
|
|
1768
|
+
return "".concat(month, "-").concat(day, "-").concat(year);
|
|
1769
|
+
}
|
|
1770
|
+
switch(format){
|
|
1771
|
+
case "MM/DD/YYYY":
|
|
1772
|
+
return "".concat(month, "/").concat(day, "/").concat(year);
|
|
1773
|
+
case "DD/MM/YYYY":
|
|
1774
|
+
return "".concat(day, "/").concat(month, "/").concat(year);
|
|
1775
|
+
case "YYYY/MM/DD":
|
|
1776
|
+
return "".concat(year, "/").concat(month, "/").concat(day);
|
|
1777
|
+
case "MMM/DD/YYYY":
|
|
1778
|
+
return "".concat(monthAbbr, "/").concat(day, "/").concat(year);
|
|
1779
|
+
case "DD/MMM/YYYY":
|
|
1780
|
+
return "".concat(day, "/").concat(monthAbbr, "/").concat(year);
|
|
1781
|
+
case "YYYY/MMM/DD":
|
|
1782
|
+
return "".concat(year, "/").concat(monthAbbr, "/").concat(day);
|
|
1783
|
+
case "MMM DD, YYYY":
|
|
1784
|
+
return "".concat(monthAbbr, " ").concat(day, ", ").concat(year);
|
|
1785
|
+
case "DD MMM YYYY":
|
|
1786
|
+
return "".concat(day, " ").concat(monthAbbr, " ").concat(year);
|
|
1787
|
+
case "YYYY MMM DD":
|
|
1788
|
+
return "".concat(year, " ").concat(monthAbbr, " ").concat(day);
|
|
1789
|
+
case "MM-DD-YYYY":
|
|
1790
|
+
return "".concat(month, "-").concat(day, "-").concat(year);
|
|
1791
|
+
case "DD-MM-YYYY":
|
|
1792
|
+
return "".concat(day, "-").concat(month, "-").concat(year);
|
|
1793
|
+
case "YYYY-MM-DD":
|
|
1794
|
+
return "".concat(year, "-").concat(month, "-").concat(day);
|
|
1795
|
+
case "MMM-DD-YYYY":
|
|
1796
|
+
return "".concat(monthAbbr, "-").concat(day, "-").concat(year);
|
|
1797
|
+
case "DD-MMM-YYYY":
|
|
1798
|
+
return "".concat(day, "-").concat(monthAbbr, "-").concat(year);
|
|
1799
|
+
case "YYYY-MMM-DD":
|
|
1800
|
+
return "".concat(year, "-").concat(monthAbbr, "-").concat(day);
|
|
1801
|
+
case "DD.MM.YYYY":
|
|
1802
|
+
return "".concat(day, ".").concat(month, ".").concat(year);
|
|
1803
|
+
case "MM.DD.YYYY":
|
|
1804
|
+
return "".concat(month, ".").concat(day, ".").concat(year);
|
|
1805
|
+
case "YYYY.MM.DD":
|
|
1806
|
+
return "".concat(year, ".").concat(month, ".").concat(day);
|
|
1807
|
+
default:
|
|
1808
|
+
return "".concat(month, "-").concat(day, "-").concat(year);
|
|
1809
|
+
}
|
|
1810
|
+
};
|
|
1811
|
+
var formatTime = function(time) {
|
|
1812
|
+
var format = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "12h";
|
|
1813
|
+
if (!time) return "";
|
|
1814
|
+
if (format === "24h") {
|
|
1815
|
+
var hour24 = time.hour;
|
|
1816
|
+
if (time.period === "PM" && time.hour !== 12) {
|
|
1817
|
+
hour24 = time.hour + 12;
|
|
1818
|
+
} else if (time.period === "AM" && time.hour === 12) {
|
|
1819
|
+
hour24 = 0;
|
|
1820
|
+
}
|
|
1821
|
+
var hour2 = String(hour24).padStart(2, "0");
|
|
1822
|
+
var minute2 = String(time.minute).padStart(2, "0");
|
|
1823
|
+
return "".concat(hour2, ":").concat(minute2);
|
|
1824
|
+
}
|
|
1825
|
+
var hour = String(time.hour).padStart(2, "0");
|
|
1826
|
+
var minute = String(time.minute).padStart(2, "0");
|
|
1827
|
+
return "".concat(hour, ":").concat(minute, " ").concat(time.period);
|
|
1828
|
+
};
|
|
1829
|
+
var getDaysInMonth = function(year, monthIndex) {
|
|
1830
|
+
return new Date(year, monthIndex + 1, 0).getDate();
|
|
1831
|
+
};
|
|
1832
|
+
var getFirstDayOfMonth = function(year, monthIndex) {
|
|
1833
|
+
return new Date(year, monthIndex, 1).getDay();
|
|
1834
|
+
};
|
|
1835
|
+
var getMonthName = function(monthIndex) {
|
|
1836
|
+
return new Date(2024, monthIndex, 1).toLocaleDateString("en-US", {
|
|
1837
|
+
month: "long"
|
|
1838
|
+
});
|
|
1839
|
+
};
|
|
1840
|
+
var DAY_NAMES = [
|
|
1841
|
+
"SUN",
|
|
1842
|
+
"MON",
|
|
1843
|
+
"TUE",
|
|
1844
|
+
"WED",
|
|
1845
|
+
"THU",
|
|
1846
|
+
"FRI",
|
|
1847
|
+
"SAT"
|
|
1848
|
+
];
|
|
1849
|
+
var DATE_FORMAT_OPTIONS = [
|
|
1850
|
+
"none",
|
|
1851
|
+
"MM/DD/YYYY",
|
|
1852
|
+
"DD/MM/YYYY",
|
|
1853
|
+
"YYYY/MM/DD",
|
|
1854
|
+
"MMM/DD/YYYY",
|
|
1855
|
+
"DD/MMM/YYYY",
|
|
1856
|
+
"YYYY/MMM/DD",
|
|
1857
|
+
"MMM DD, YYYY",
|
|
1858
|
+
"DD MMM YYYY",
|
|
1859
|
+
"YYYY MMM DD",
|
|
1860
|
+
"MM-DD-YYYY",
|
|
1861
|
+
"DD-MM-YYYY",
|
|
1862
|
+
"YYYY-MM-DD",
|
|
1863
|
+
"MMM-DD-YYYY",
|
|
1864
|
+
"DD-MMM-YYYY",
|
|
1865
|
+
"YYYY-MMM-DD",
|
|
1866
|
+
"DD.MM.YYYY",
|
|
1867
|
+
"MM.DD.YYYY",
|
|
1868
|
+
"YYYY.MM.DD"
|
|
1869
|
+
];
|
|
1870
|
+
var TIME_ZONE_OPTIONS = [
|
|
1871
|
+
"none",
|
|
1872
|
+
"UTC",
|
|
1873
|
+
"GMT",
|
|
1874
|
+
"EST",
|
|
1875
|
+
"EDT",
|
|
1876
|
+
"CST",
|
|
1877
|
+
"CDT",
|
|
1878
|
+
"MST",
|
|
1879
|
+
"MDT",
|
|
1880
|
+
"PST",
|
|
1881
|
+
"PDT",
|
|
1882
|
+
"IST",
|
|
1883
|
+
"JST",
|
|
1884
|
+
"KST",
|
|
1885
|
+
"AEST",
|
|
1886
|
+
"AEDT",
|
|
1887
|
+
"NZST",
|
|
1888
|
+
"NZDT",
|
|
1889
|
+
"CET",
|
|
1890
|
+
"CEST",
|
|
1891
|
+
"BST",
|
|
1892
|
+
"AST",
|
|
1893
|
+
"HST",
|
|
1894
|
+
"AKST",
|
|
1895
|
+
"AKDT",
|
|
1896
|
+
"SST",
|
|
1897
|
+
"NST",
|
|
1898
|
+
"WET",
|
|
1899
|
+
"WEST",
|
|
1900
|
+
"EET",
|
|
1901
|
+
"EEST",
|
|
1902
|
+
"MSK",
|
|
1903
|
+
"HKT",
|
|
1904
|
+
"SGT",
|
|
1905
|
+
"PKT",
|
|
1906
|
+
"BDT",
|
|
1907
|
+
"AWST",
|
|
1908
|
+
"ACST",
|
|
1909
|
+
"ACDT",
|
|
1910
|
+
"NFT"
|
|
1911
|
+
];
|
|
1912
|
+
var compareInternalDates = function(a, b) {
|
|
1913
|
+
if (a.year !== b.year) return a.year - b.year;
|
|
1914
|
+
if (a.monthIndex !== b.monthIndex) return a.monthIndex - b.monthIndex;
|
|
1915
|
+
return a.day - b.day;
|
|
1916
|
+
};
|
|
1917
|
+
var addDaysInternal = function(start, daysToAdd) {
|
|
1918
|
+
var y = start.year;
|
|
1919
|
+
var m = start.monthIndex;
|
|
1920
|
+
var d = start.day + daysToAdd;
|
|
1921
|
+
while(true){
|
|
1922
|
+
var dim = getDaysInMonth(y, m);
|
|
1923
|
+
if (d <= dim) break;
|
|
1924
|
+
d -= dim;
|
|
1925
|
+
m += 1;
|
|
1926
|
+
if (m > 11) {
|
|
1927
|
+
m = 0;
|
|
1928
|
+
y += 1;
|
|
1929
|
+
}
|
|
1930
|
+
}
|
|
1931
|
+
return {
|
|
1932
|
+
year: y,
|
|
1933
|
+
monthIndex: m,
|
|
1934
|
+
day: d
|
|
1935
|
+
};
|
|
1936
|
+
};
|
|
1937
|
+
var isBlockedDateHelper = function(date, config) {
|
|
1938
|
+
if (!config || config.days <= 0) return false;
|
|
1939
|
+
var startInternal = {
|
|
1940
|
+
year: config.startDate.year,
|
|
1941
|
+
monthIndex: config.startDate.month - 1,
|
|
1942
|
+
day: config.startDate.day
|
|
1943
|
+
};
|
|
1944
|
+
var endInternal = addDaysInternal(startInternal, config.days - 1);
|
|
1945
|
+
var currentInternal = {
|
|
1946
|
+
year: date.year,
|
|
1947
|
+
monthIndex: date.month,
|
|
1948
|
+
day: date.day
|
|
1949
|
+
};
|
|
1950
|
+
var afterOrOnStart = compareInternalDates(currentInternal, startInternal) >= 0;
|
|
1951
|
+
var beforeOrOnEnd = compareInternalDates(currentInternal, endInternal) <= 0;
|
|
1952
|
+
return afterOrOnStart && beforeOrOnEnd;
|
|
1953
|
+
};
|
|
1954
|
+
var getLocalTimeZone = function() {
|
|
1955
|
+
var timeZoneString = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
1956
|
+
var date = /* @__PURE__ */ new Date();
|
|
1957
|
+
var shortTimeZone = date.toLocaleTimeString("en-us", {
|
|
1958
|
+
timeZoneName: "short"
|
|
1959
|
+
}).split(" ")[2];
|
|
1960
|
+
return shortTimeZone || timeZoneString;
|
|
1961
|
+
};
|
|
1962
|
+
var SIZE_SCALES = {
|
|
1963
|
+
"small": 0.65,
|
|
1964
|
+
"medium": 0.8,
|
|
1965
|
+
"large": 0.9,
|
|
1966
|
+
"extra-large": 1
|
|
1967
|
+
};
|
|
1968
|
+
var getDeviceScale = function() {
|
|
1969
|
+
if (typeof window === "undefined") return 1;
|
|
1970
|
+
var width = window.innerWidth;
|
|
1971
|
+
if (width < 640) return 0.7;
|
|
1972
|
+
if (width < 1024) return 0.85;
|
|
1973
|
+
return 1;
|
|
1974
|
+
};
|
|
1975
|
+
var Calendar = function(param) {
|
|
1976
|
+
var value = param.value, onChange = param.onChange, _param_enableRangeSelection = param.enableRangeSelection, enableRangeSelection = _param_enableRangeSelection === void 0 ? false : _param_enableRangeSelection, rangeValue = param.rangeValue, onRangeChange = param.onRangeChange, _param_enableTimeSelection = param.enableTimeSelection, enableTimeSelection = _param_enableTimeSelection === void 0 ? false : _param_enableTimeSelection, timeValue = param.timeValue, onTimeChange = param.onTimeChange, _param_showTimeFormatToggle = param.showTimeFormatToggle, showTimeFormatToggle = _param_showTimeFormatToggle === void 0 ? false : _param_showTimeFormatToggle, _param_timeFormat = param.timeFormat, timeFormat = _param_timeFormat === void 0 ? "12h" : _param_timeFormat, onTimeFormatChange = param.onTimeFormatChange, _param_autoHide = param.autoHide, autoHide = _param_autoHide === void 0 ? false : _param_autoHide, _param_showTodayButton = param.showTodayButton, showTodayButton = _param_showTodayButton === void 0 ? false : _param_showTodayButton, _param_showClearButton = param.showClearButton, showClearButton = _param_showClearButton === void 0 ? false : _param_showClearButton, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "Select date" : _param_placeholder, className = param.className, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, onShow = param.onShow, onHide = param.onHide, icon = param.icon, _param_showIcon = param.showIcon, showIcon = _param_showIcon === void 0 ? true : _param_showIcon, _param_size = param.size, size = _param_size === void 0 ? "extra-large" : _param_size, _param_enableYearDropdown = param.enableYearDropdown, enableYearDropdown = _param_enableYearDropdown === void 0 ? false : _param_enableYearDropdown, _param_showDateFormatSelector = param.showDateFormatSelector, showDateFormatSelector = _param_showDateFormatSelector === void 0 ? false : _param_showDateFormatSelector, _param_dateFormat = param.dateFormat, dateFormat = _param_dateFormat === void 0 ? "none" : _param_dateFormat, onDateFormatChange = param.onDateFormatChange, _param_showTimeZoneSelector = param.showTimeZoneSelector, showTimeZoneSelector = _param_showTimeZoneSelector === void 0 ? false : _param_showTimeZoneSelector, _param_timeZoneFormat = param.timeZoneFormat, timeZoneFormat = _param_timeZoneFormat === void 0 ? "none" : _param_timeZoneFormat, onTimeZoneFormatChange = param.onTimeZoneFormatChange, blockDateConfig = param.blockDateConfig;
|
|
1977
|
+
var today = /* @__PURE__ */ new Date();
|
|
1978
|
+
var _ref = _sliced_to_array((0, import_react11.useState)((value === null || value === void 0 ? void 0 : value.year) || today.getFullYear()), 2), currentYear = _ref[0], setCurrentYear = _ref[1];
|
|
1979
|
+
var _value_month;
|
|
1980
|
+
var _ref1 = _sliced_to_array((0, import_react11.useState)((_value_month = value === null || value === void 0 ? void 0 : value.month) !== null && _value_month !== void 0 ? _value_month : today.getMonth()), 2), currentMonth = _ref1[0], setCurrentMonth = _ref1[1];
|
|
1981
|
+
var _ref2 = _sliced_to_array((0, import_react11.useState)(false), 2), isOpen = _ref2[0], setIsOpen = _ref2[1];
|
|
1982
|
+
var _ref3 = _sliced_to_array((0, import_react11.useState)("start"), 2), activeField = _ref3[0], setActiveField = _ref3[1];
|
|
1983
|
+
var _ref4 = _sliced_to_array((0, import_react11.useState)(false), 2), showTimeSelector = _ref4[0], setShowTimeSelector = _ref4[1];
|
|
1984
|
+
var _ref5 = _sliced_to_array((0, import_react11.useState)((timeValue === null || timeValue === void 0 ? void 0 : timeValue.hour) || 12), 2), selectedHour = _ref5[0], setSelectedHour = _ref5[1];
|
|
1985
|
+
var _ref6 = _sliced_to_array((0, import_react11.useState)((timeValue === null || timeValue === void 0 ? void 0 : timeValue.minute) || 0), 2), selectedMinute = _ref6[0], setSelectedMinute = _ref6[1];
|
|
1986
|
+
var _ref7 = _sliced_to_array((0, import_react11.useState)((timeValue === null || timeValue === void 0 ? void 0 : timeValue.period) || "AM"), 2), selectedPeriod = _ref7[0], setSelectedPeriod = _ref7[1];
|
|
1987
|
+
var _ref8 = _sliced_to_array((0, import_react11.useState)(timeFormat), 2), internalTimeFormat = _ref8[0], setInternalTimeFormat = _ref8[1];
|
|
1988
|
+
var _ref9 = _sliced_to_array((0, import_react11.useState)(false), 2), showYearDropdown = _ref9[0], setShowYearDropdown = _ref9[1];
|
|
1989
|
+
var _ref10 = _sliced_to_array((0, import_react11.useState)(dateFormat), 2), internalDateFormat = _ref10[0], setInternalDateFormat = _ref10[1];
|
|
1990
|
+
var _ref11 = _sliced_to_array((0, import_react11.useState)(timeZoneFormat), 2), internalTimeZoneFormat = _ref11[0], setInternalTimeZoneFormat = _ref11[1];
|
|
1991
|
+
var _ref12 = _sliced_to_array((0, import_react11.useState)(1), 2), deviceScale = _ref12[0], setDeviceScale = _ref12[1];
|
|
1992
|
+
var _ref13 = _sliced_to_array((0, import_react11.useState)(false), 2), positionAbove = _ref13[0], setPositionAbove = _ref13[1];
|
|
1993
|
+
var containerRef = (0, import_react11.useRef)(null);
|
|
1994
|
+
var calendarRef = (0, import_react11.useRef)(null);
|
|
1995
|
+
var sizeScale = SIZE_SCALES[size];
|
|
1996
|
+
var scale = sizeScale * deviceScale;
|
|
1997
|
+
var scaled = function(value2) {
|
|
1998
|
+
return Math.round(value2 * scale);
|
|
1999
|
+
};
|
|
2000
|
+
(0, import_react11.useEffect)(function() {
|
|
2001
|
+
var handleResize = function() {
|
|
2002
|
+
setDeviceScale(getDeviceScale());
|
|
2003
|
+
};
|
|
2004
|
+
handleResize();
|
|
2005
|
+
window.addEventListener("resize", handleResize);
|
|
2006
|
+
return function() {
|
|
2007
|
+
window.removeEventListener("resize", handleResize);
|
|
2008
|
+
};
|
|
2009
|
+
}, []);
|
|
2010
|
+
(0, import_react11.useEffect)(function() {
|
|
2011
|
+
if (!isOpen || !containerRef.current || !calendarRef.current) return;
|
|
2012
|
+
var calculatePosition = function() {
|
|
2013
|
+
var _containerRef_current, _calendarRef_current;
|
|
2014
|
+
var containerRect = (_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.getBoundingClientRect();
|
|
2015
|
+
var calendarHeight = ((_calendarRef_current = calendarRef.current) === null || _calendarRef_current === void 0 ? void 0 : _calendarRef_current.offsetHeight) || 580 * scale;
|
|
2016
|
+
if (!containerRect) return;
|
|
2017
|
+
var spaceBelow = window.innerHeight - containerRect.bottom;
|
|
2018
|
+
var spaceAbove = containerRect.top;
|
|
2019
|
+
var bufferSpace = 16;
|
|
2020
|
+
if (spaceBelow < calendarHeight + bufferSpace && spaceAbove > spaceBelow) {
|
|
2021
|
+
setPositionAbove(true);
|
|
2022
|
+
} else {
|
|
2023
|
+
setPositionAbove(false);
|
|
2024
|
+
}
|
|
2025
|
+
};
|
|
2026
|
+
calculatePosition();
|
|
2027
|
+
window.addEventListener("resize", calculatePosition);
|
|
2028
|
+
window.addEventListener("scroll", calculatePosition, true);
|
|
2029
|
+
return function() {
|
|
2030
|
+
window.removeEventListener("resize", calculatePosition);
|
|
2031
|
+
window.removeEventListener("scroll", calculatePosition, true);
|
|
2032
|
+
};
|
|
2033
|
+
}, [
|
|
2034
|
+
isOpen,
|
|
2035
|
+
scale
|
|
2036
|
+
]);
|
|
2037
|
+
(0, import_react11.useEffect)(function() {
|
|
2038
|
+
if (value) {
|
|
2039
|
+
setCurrentYear(value.year);
|
|
2040
|
+
setCurrentMonth(value.month);
|
|
2041
|
+
}
|
|
2042
|
+
}, [
|
|
2043
|
+
value
|
|
2044
|
+
]);
|
|
2045
|
+
(0, import_react11.useEffect)(function() {
|
|
2046
|
+
if (timeValue) {
|
|
2047
|
+
setSelectedHour(timeValue.hour);
|
|
2048
|
+
setSelectedMinute(timeValue.minute);
|
|
2049
|
+
setSelectedPeriod(timeValue.period);
|
|
2050
|
+
}
|
|
2051
|
+
}, [
|
|
2052
|
+
timeValue
|
|
2053
|
+
]);
|
|
2054
|
+
(0, import_react11.useEffect)(function() {
|
|
2055
|
+
setInternalTimeFormat(timeFormat);
|
|
2056
|
+
}, [
|
|
2057
|
+
timeFormat
|
|
2058
|
+
]);
|
|
2059
|
+
(0, import_react11.useEffect)(function() {
|
|
2060
|
+
setInternalDateFormat(dateFormat);
|
|
2061
|
+
}, [
|
|
2062
|
+
dateFormat
|
|
2063
|
+
]);
|
|
2064
|
+
(0, import_react11.useEffect)(function() {
|
|
2065
|
+
setInternalTimeZoneFormat(timeZoneFormat);
|
|
2066
|
+
}, [
|
|
2067
|
+
timeZoneFormat
|
|
2068
|
+
]);
|
|
2069
|
+
(0, import_react11.useEffect)(function() {
|
|
2070
|
+
var handleClickOutside = function(event) {
|
|
2071
|
+
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
2072
|
+
if (isOpen) {
|
|
2073
|
+
setIsOpen(false);
|
|
2074
|
+
setShowTimeSelector(false);
|
|
2075
|
+
setShowYearDropdown(false);
|
|
2076
|
+
onHide === null || onHide === void 0 ? void 0 : onHide();
|
|
2077
|
+
}
|
|
2078
|
+
}
|
|
2079
|
+
};
|
|
2080
|
+
if (isOpen) {
|
|
2081
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
2082
|
+
}
|
|
2083
|
+
return function() {
|
|
2084
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
2085
|
+
};
|
|
2086
|
+
}, [
|
|
2087
|
+
isOpen,
|
|
2088
|
+
onHide
|
|
2089
|
+
]);
|
|
2090
|
+
var daysInMonth = getDaysInMonth(currentYear, currentMonth);
|
|
2091
|
+
var firstDay = getFirstDayOfMonth(currentYear, currentMonth);
|
|
2092
|
+
var monthName = getMonthName(currentMonth);
|
|
2093
|
+
var totalCells = firstDay + daysInMonth;
|
|
2094
|
+
var rowsNeeded = Math.ceil(totalCells / 7);
|
|
2095
|
+
var previousMonth = function() {
|
|
2096
|
+
if (currentMonth === 0) {
|
|
2097
|
+
setCurrentMonth(11);
|
|
2098
|
+
setCurrentYear(currentYear - 1);
|
|
2099
|
+
} else {
|
|
2100
|
+
setCurrentMonth(currentMonth - 1);
|
|
2101
|
+
}
|
|
2102
|
+
};
|
|
2103
|
+
var nextMonth = function() {
|
|
2104
|
+
if (currentMonth === 11) {
|
|
2105
|
+
setCurrentMonth(0);
|
|
2106
|
+
setCurrentYear(currentYear + 1);
|
|
2107
|
+
} else {
|
|
2108
|
+
setCurrentMonth(currentMonth + 1);
|
|
2109
|
+
}
|
|
2110
|
+
};
|
|
2111
|
+
var selectDate = function(day) {
|
|
2112
|
+
var date = {
|
|
2113
|
+
year: currentYear,
|
|
2114
|
+
month: currentMonth,
|
|
2115
|
+
day: day
|
|
2116
|
+
};
|
|
2117
|
+
if (enableRangeSelection) {
|
|
2118
|
+
if (activeField === "start") {
|
|
2119
|
+
onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange({
|
|
2120
|
+
start: date,
|
|
2121
|
+
end: (rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.end) || null
|
|
2122
|
+
});
|
|
2123
|
+
setActiveField("end");
|
|
2124
|
+
} else {
|
|
2125
|
+
var start = rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.start;
|
|
2126
|
+
if (start) {
|
|
2127
|
+
var startTime = new Date(start.year, start.month, start.day).getTime();
|
|
2128
|
+
var endTime = new Date(date.year, date.month, date.day).getTime();
|
|
2129
|
+
if (endTime < startTime) {
|
|
2130
|
+
onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange({
|
|
2131
|
+
start: date,
|
|
2132
|
+
end: start
|
|
2133
|
+
});
|
|
2134
|
+
} else {
|
|
2135
|
+
onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange({
|
|
2136
|
+
start: start,
|
|
2137
|
+
end: date
|
|
2138
|
+
});
|
|
2139
|
+
}
|
|
2140
|
+
} else {
|
|
2141
|
+
onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange({
|
|
2142
|
+
start: date,
|
|
2143
|
+
end: null
|
|
2144
|
+
});
|
|
2145
|
+
setActiveField("end");
|
|
2146
|
+
}
|
|
2147
|
+
}
|
|
2148
|
+
} else {
|
|
2149
|
+
var dateString = convertToDateString(date);
|
|
2150
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(date, dateString);
|
|
2151
|
+
}
|
|
2152
|
+
if (showTimeSelector) {
|
|
2153
|
+
setShowTimeSelector(false);
|
|
2154
|
+
}
|
|
2155
|
+
if (autoHide && (!enableRangeSelection || enableRangeSelection && activeField === "end" && (rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.start))) {
|
|
2156
|
+
setIsOpen(false);
|
|
2157
|
+
setShowTimeSelector(false);
|
|
2158
|
+
onHide === null || onHide === void 0 ? void 0 : onHide();
|
|
2159
|
+
}
|
|
2160
|
+
};
|
|
2161
|
+
var selectToday = function() {
|
|
2162
|
+
var todayDate = {
|
|
2163
|
+
year: today.getFullYear(),
|
|
2164
|
+
month: today.getMonth(),
|
|
2165
|
+
day: today.getDate()
|
|
2166
|
+
};
|
|
2167
|
+
setCurrentYear(todayDate.year);
|
|
2168
|
+
setCurrentMonth(todayDate.month);
|
|
2169
|
+
var dateString = convertToDateString(todayDate);
|
|
2170
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(todayDate, dateString);
|
|
2171
|
+
if (enableTimeSelection && showTimeSelector) {
|
|
2172
|
+
var now = /* @__PURE__ */ new Date();
|
|
2173
|
+
var currentHour = now.getHours();
|
|
2174
|
+
var currentMinute = now.getMinutes();
|
|
2175
|
+
var hour12;
|
|
2176
|
+
var period;
|
|
2177
|
+
if (currentHour === 0) {
|
|
2178
|
+
hour12 = 12;
|
|
2179
|
+
period = "AM";
|
|
2180
|
+
} else if (currentHour === 12) {
|
|
2181
|
+
hour12 = 12;
|
|
2182
|
+
period = "PM";
|
|
2183
|
+
} else if (currentHour > 12) {
|
|
2184
|
+
hour12 = currentHour - 12;
|
|
2185
|
+
period = "PM";
|
|
2186
|
+
} else {
|
|
2187
|
+
hour12 = currentHour;
|
|
2188
|
+
period = "AM";
|
|
2189
|
+
}
|
|
2190
|
+
setSelectedHour(hour12);
|
|
2191
|
+
setSelectedMinute(currentMinute);
|
|
2192
|
+
setSelectedPeriod(period);
|
|
2193
|
+
onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange({
|
|
2194
|
+
hour: hour12,
|
|
2195
|
+
minute: currentMinute,
|
|
2196
|
+
period: period
|
|
2197
|
+
});
|
|
2198
|
+
if (showTimeZoneSelector) {
|
|
2199
|
+
var localTZ = getLocalTimeZone();
|
|
2200
|
+
setInternalTimeZoneFormat(localTZ);
|
|
2201
|
+
onTimeZoneFormatChange === null || onTimeZoneFormatChange === void 0 ? void 0 : onTimeZoneFormatChange(localTZ);
|
|
2202
|
+
}
|
|
2203
|
+
}
|
|
2204
|
+
if (autoHide) {
|
|
2205
|
+
setIsOpen(false);
|
|
2206
|
+
setShowTimeSelector(false);
|
|
2207
|
+
onHide === null || onHide === void 0 ? void 0 : onHide();
|
|
2208
|
+
}
|
|
2209
|
+
};
|
|
2210
|
+
var clearDate = function() {
|
|
2211
|
+
if (enableRangeSelection) {
|
|
2212
|
+
onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange({
|
|
2213
|
+
start: null,
|
|
2214
|
+
end: null
|
|
2215
|
+
});
|
|
2216
|
+
setActiveField("start");
|
|
2217
|
+
} else {
|
|
2218
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(null, "");
|
|
2219
|
+
}
|
|
2220
|
+
if (enableTimeSelection) {
|
|
2221
|
+
onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange({
|
|
2222
|
+
hour: 12,
|
|
2223
|
+
minute: 0,
|
|
2224
|
+
period: "AM"
|
|
2225
|
+
});
|
|
2226
|
+
setSelectedHour(12);
|
|
2227
|
+
setSelectedMinute(0);
|
|
2228
|
+
setSelectedPeriod("AM");
|
|
2229
|
+
}
|
|
2230
|
+
};
|
|
2231
|
+
var toggleCalendar = function() {
|
|
2232
|
+
if (disabled) return;
|
|
2233
|
+
var newState = !isOpen;
|
|
2234
|
+
setIsOpen(newState);
|
|
2235
|
+
if (newState) {
|
|
2236
|
+
setShowTimeSelector(false);
|
|
2237
|
+
onShow === null || onShow === void 0 ? void 0 : onShow();
|
|
2238
|
+
} else {
|
|
2239
|
+
setShowTimeSelector(false);
|
|
2240
|
+
onHide === null || onHide === void 0 ? void 0 : onHide();
|
|
2241
|
+
}
|
|
2242
|
+
};
|
|
2243
|
+
var handleStartFieldClick = function() {
|
|
2244
|
+
if (!isOpen) {
|
|
2245
|
+
setIsOpen(true);
|
|
2246
|
+
onShow === null || onShow === void 0 ? void 0 : onShow();
|
|
2247
|
+
}
|
|
2248
|
+
setActiveField("start");
|
|
2249
|
+
setShowTimeSelector(false);
|
|
2250
|
+
};
|
|
2251
|
+
var handleEndFieldClick = function() {
|
|
2252
|
+
if (!isOpen) {
|
|
2253
|
+
setIsOpen(true);
|
|
2254
|
+
onShow === null || onShow === void 0 ? void 0 : onShow();
|
|
2255
|
+
}
|
|
2256
|
+
setActiveField("end");
|
|
2257
|
+
setShowTimeSelector(false);
|
|
2258
|
+
};
|
|
2259
|
+
var handleChooseTimeClick = function() {
|
|
2260
|
+
setShowTimeSelector(!showTimeSelector);
|
|
2261
|
+
};
|
|
2262
|
+
var handleChooseDateClick = function() {
|
|
2263
|
+
setShowTimeSelector(false);
|
|
2264
|
+
};
|
|
2265
|
+
var handleTimeFormatToggle = function() {
|
|
2266
|
+
var newFormat = internalTimeFormat === "12h" ? "24h" : "12h";
|
|
2267
|
+
setInternalTimeFormat(newFormat);
|
|
2268
|
+
onTimeFormatChange === null || onTimeFormatChange === void 0 ? void 0 : onTimeFormatChange(newFormat);
|
|
2269
|
+
};
|
|
2270
|
+
var handleTimeConfirm = function() {
|
|
2271
|
+
onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange({
|
|
2272
|
+
hour: selectedHour,
|
|
2273
|
+
minute: selectedMinute,
|
|
2274
|
+
period: selectedPeriod
|
|
2275
|
+
});
|
|
2276
|
+
setShowTimeSelector(false);
|
|
2277
|
+
};
|
|
2278
|
+
var handleDateConfirm = function() {
|
|
2279
|
+
setIsOpen(false);
|
|
2280
|
+
onHide === null || onHide === void 0 ? void 0 : onHide();
|
|
2281
|
+
};
|
|
2282
|
+
var handleMonthYearClick = function() {
|
|
2283
|
+
if (enableYearDropdown) {
|
|
2284
|
+
setShowYearDropdown(!showYearDropdown);
|
|
2285
|
+
}
|
|
2286
|
+
};
|
|
2287
|
+
var handleYearSelect = function(year) {
|
|
2288
|
+
setCurrentYear(year);
|
|
2289
|
+
setShowYearDropdown(false);
|
|
2290
|
+
};
|
|
2291
|
+
var renderDays = function() {
|
|
2292
|
+
var _loop = function(day) {
|
|
2293
|
+
var date = {
|
|
2294
|
+
year: currentYear,
|
|
2295
|
+
month: currentMonth,
|
|
2296
|
+
day: day
|
|
2297
|
+
};
|
|
2298
|
+
var isSelected = enableRangeSelection ? isSameDate(rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.start, date) || isSameDate(rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.end, date) : isSameDate(value, date);
|
|
2299
|
+
var isInRange = enableRangeSelection && (rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.start) && (rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.end) ? function() {
|
|
2300
|
+
var currentTime = new Date(date.year, date.month, date.day).getTime();
|
|
2301
|
+
var startTime = new Date(rangeValue.start.year, rangeValue.start.month, rangeValue.start.day).getTime();
|
|
2302
|
+
var endTime = new Date(rangeValue.end.year, rangeValue.end.month, rangeValue.end.day).getTime();
|
|
2303
|
+
return currentTime > startTime && currentTime < endTime;
|
|
2304
|
+
}() : false;
|
|
2305
|
+
var isToday = isSameDate({
|
|
2306
|
+
year: today.getFullYear(),
|
|
2307
|
+
month: today.getMonth(),
|
|
2308
|
+
day: today.getDate()
|
|
2309
|
+
}, date);
|
|
2310
|
+
var isBlocked = isBlockedDateHelper(date, blockDateConfig);
|
|
2311
|
+
days.push(/* @__PURE__ */ import_react11.default.createElement("button", {
|
|
2312
|
+
type: "button",
|
|
2313
|
+
key: "current-".concat(day),
|
|
2314
|
+
onClick: function() {
|
|
2315
|
+
if (!isBlocked) selectDate(day);
|
|
2316
|
+
},
|
|
2317
|
+
disabled: isBlocked,
|
|
2318
|
+
className: cn4("flex items-center justify-center rounded transition-all duration-200", isSelected && "bg-gradient-to-b from-[#1761A3] to-[#4DAF83] text-white shadow-md", !isSelected && isToday && "border-2 border-[#1761A3] text-[#1761A3]", !isSelected && !isToday && !isInRange && "bg-[rgba(0,123,255,0.05)] text-gray-700", isInRange && !isSelected && "bg-[rgba(23,97,163,0.15)] text-gray-700", !isSelected && !isBlocked && "hover:bg-[rgba(23,97,163,0.1)]", isBlocked && "cursor-not-allowed opacity-40 text-gray-400"),
|
|
2319
|
+
style: {
|
|
2320
|
+
width: "".concat(scaled(32), "px"),
|
|
2321
|
+
height: "".concat(scaled(30), "px"),
|
|
2322
|
+
fontSize: "".concat(scaled(14), "px"),
|
|
2323
|
+
fontWeight: 600
|
|
2324
|
+
}
|
|
2325
|
+
}, day));
|
|
2326
|
+
};
|
|
2327
|
+
var days = [];
|
|
2328
|
+
for(var i = 0; i < firstDay; i++){
|
|
2329
|
+
days.push(/* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2330
|
+
key: "empty-start-".concat(i),
|
|
2331
|
+
className: "flex items-center justify-center",
|
|
2332
|
+
style: {
|
|
2333
|
+
width: "".concat(scaled(44), "px"),
|
|
2334
|
+
height: "".concat(scaled(44), "px")
|
|
2335
|
+
}
|
|
2336
|
+
}));
|
|
2337
|
+
}
|
|
2338
|
+
for(var day = 1; day <= daysInMonth; day++)_loop(day);
|
|
2339
|
+
var totalCells2 = firstDay + daysInMonth;
|
|
2340
|
+
var remainingCells = totalCells2 % 7 === 0 ? 0 : 7 - totalCells2 % 7;
|
|
2341
|
+
for(var i1 = 0; i1 < remainingCells; i1++){
|
|
2342
|
+
days.push(/* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2343
|
+
key: "empty-end-".concat(i1),
|
|
2344
|
+
className: "flex items-center justify-center",
|
|
2345
|
+
style: {
|
|
2346
|
+
width: "".concat(scaled(44), "px"),
|
|
2347
|
+
height: "".concat(scaled(44), "px")
|
|
2348
|
+
}
|
|
2349
|
+
}));
|
|
2350
|
+
}
|
|
2351
|
+
return days;
|
|
2352
|
+
};
|
|
2353
|
+
var renderTimeSelector = function() {
|
|
2354
|
+
var hours12 = Array.from({
|
|
2355
|
+
length: 12
|
|
2356
|
+
}, function(_, i) {
|
|
2357
|
+
return i + 1;
|
|
2358
|
+
});
|
|
2359
|
+
var hours24 = Array.from({
|
|
2360
|
+
length: 24
|
|
2361
|
+
}, function(_, i) {
|
|
2362
|
+
return i;
|
|
2363
|
+
});
|
|
2364
|
+
var minutes = Array.from({
|
|
2365
|
+
length: 60
|
|
2366
|
+
}, function(_, i) {
|
|
2367
|
+
return i;
|
|
2368
|
+
});
|
|
2369
|
+
return /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2370
|
+
className: "flex flex-col h-full"
|
|
2371
|
+
}, /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2372
|
+
className: "flex-1 overflow-y-auto"
|
|
2373
|
+
}, (showTimeFormatToggle || showDateFormatSelector || showTimeZoneSelector) && /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2374
|
+
style: {
|
|
2375
|
+
marginBottom: "".concat(scaled(12), "px")
|
|
2376
|
+
}
|
|
2377
|
+
}, showTimeFormatToggle && /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2378
|
+
style: {
|
|
2379
|
+
marginBottom: "".concat(scaled(12), "px")
|
|
2380
|
+
}
|
|
2381
|
+
}, /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2382
|
+
className: "flex flex-col",
|
|
2383
|
+
style: {
|
|
2384
|
+
gap: "".concat(scaled(8), "px")
|
|
2385
|
+
}
|
|
2386
|
+
}, /* @__PURE__ */ import_react11.default.createElement("span", {
|
|
2387
|
+
className: "text-black font-semibold",
|
|
2388
|
+
style: {
|
|
2389
|
+
fontSize: "".concat(scaled(12), "px")
|
|
2390
|
+
}
|
|
2391
|
+
}, "Format"), /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2392
|
+
className: "flex items-center",
|
|
2393
|
+
style: {
|
|
2394
|
+
gap: "".concat(scaled(8), "px")
|
|
2395
|
+
}
|
|
2396
|
+
}, /* @__PURE__ */ import_react11.default.createElement("span", {
|
|
2397
|
+
className: cn4("transition-colors duration-200 font-semibold", internalTimeFormat === "12h" ? "text-gray-900" : "text-gray-500"),
|
|
2398
|
+
style: {
|
|
2399
|
+
fontSize: "".concat(scaled(12), "px")
|
|
2400
|
+
}
|
|
2401
|
+
}, "12h"), /* @__PURE__ */ import_react11.default.createElement("button", {
|
|
2402
|
+
type: "button",
|
|
2403
|
+
onClick: handleTimeFormatToggle,
|
|
2404
|
+
className: cn4("relative inline-flex items-center rounded-[8px] transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2", internalTimeFormat === "24h" ? "bg-[#1761A3]" : "bg-slate-300"),
|
|
2405
|
+
style: {
|
|
2406
|
+
width: "".concat(scaled(38), "px"),
|
|
2407
|
+
height: "".concat(scaled(17), "px")
|
|
2408
|
+
},
|
|
2409
|
+
role: "switch",
|
|
2410
|
+
"aria-checked": internalTimeFormat === "24h"
|
|
2411
|
+
}, /* @__PURE__ */ import_react11.default.createElement("span", {
|
|
2412
|
+
className: "inline-block rounded-full transform bg-white shadow-md transition-transform duration-200",
|
|
2413
|
+
style: {
|
|
2414
|
+
width: "".concat(scaled(13), "px"),
|
|
2415
|
+
height: "".concat(scaled(13), "px"),
|
|
2416
|
+
transform: internalTimeFormat === "24h" ? "translateX(".concat(scaled(23), "px)") : "translateX(".concat(scaled(2), "px)")
|
|
2417
|
+
}
|
|
2418
|
+
})), /* @__PURE__ */ import_react11.default.createElement("span", {
|
|
2419
|
+
className: cn4("transition-colors duration-200 font-semibold", internalTimeFormat === "24h" ? "text-gray-900" : "text-gray-500"),
|
|
2420
|
+
style: {
|
|
2421
|
+
fontSize: "".concat(scaled(12), "px")
|
|
2422
|
+
}
|
|
2423
|
+
}, "24h")))), (showDateFormatSelector || showTimeZoneSelector) && /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2424
|
+
className: "flex items-start",
|
|
2425
|
+
style: {
|
|
2426
|
+
gap: "".concat(scaled(15), "px")
|
|
2427
|
+
}
|
|
2428
|
+
}, showDateFormatSelector && /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2429
|
+
className: cn4("flex flex-col", showTimeZoneSelector ? "flex-1" : "w-full"),
|
|
2430
|
+
style: {
|
|
2431
|
+
gap: "".concat(scaled(8), "px")
|
|
2432
|
+
}
|
|
2433
|
+
}, /* @__PURE__ */ import_react11.default.createElement("span", {
|
|
2434
|
+
className: "text-black font-semibold",
|
|
2435
|
+
style: {
|
|
2436
|
+
fontSize: "".concat(scaled(12), "px"),
|
|
2437
|
+
paddingLeft: "".concat(scaled(36), "px")
|
|
2438
|
+
}
|
|
2439
|
+
}, "Date Format"), /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2440
|
+
className: cn4("relative", showTimeZoneSelector ? "" : "w-full"),
|
|
2441
|
+
style: {
|
|
2442
|
+
height: "".concat(scaled(40), "px")
|
|
2443
|
+
}
|
|
2444
|
+
}, /* @__PURE__ */ import_react11.default.createElement("select", {
|
|
2445
|
+
value: internalDateFormat,
|
|
2446
|
+
onChange: function(e) {
|
|
2447
|
+
setInternalDateFormat(e.target.value);
|
|
2448
|
+
onDateFormatChange === null || onDateFormatChange === void 0 ? void 0 : onDateFormatChange(e.target.value);
|
|
2449
|
+
},
|
|
2450
|
+
className: cn4("block h-full border border-[rgba(23,97,163,0.4)] bg-[#F0F8FF] text-gray-900 font-semibold rounded-[6px] transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-200 appearance-none", showTimeZoneSelector ? "w-full" : "w-full", "hover:bg-gradient-to-r hover:from-[rgba(23,97,163,0.4)] hover:to-[rgba(77,175,131,0.4)]"),
|
|
2451
|
+
style: {
|
|
2452
|
+
fontSize: "".concat(scaled(12), "px"),
|
|
2453
|
+
paddingLeft: "".concat(scaled(36), "px"),
|
|
2454
|
+
paddingRight: "".concat(scaled(32), "px")
|
|
2455
|
+
}
|
|
2456
|
+
}, DATE_FORMAT_OPTIONS.map(function(format) {
|
|
2457
|
+
return /* @__PURE__ */ import_react11.default.createElement("option", {
|
|
2458
|
+
key: format,
|
|
2459
|
+
value: format
|
|
2460
|
+
}, format);
|
|
2461
|
+
})), /* @__PURE__ */ import_react11.default.createElement(import_hi.HiChevronDown, {
|
|
2462
|
+
className: "pointer-events-none absolute top-1/2 -translate-y-1/2 text-gray-500",
|
|
2463
|
+
style: {
|
|
2464
|
+
right: "".concat(scaled(8), "px"),
|
|
2465
|
+
fontSize: "".concat(scaled(18), "px")
|
|
2466
|
+
}
|
|
2467
|
+
}))), showTimeZoneSelector && /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2468
|
+
className: cn4("flex flex-col", showDateFormatSelector ? "flex-1" : "w-full"),
|
|
2469
|
+
style: {
|
|
2470
|
+
gap: "".concat(scaled(8), "px")
|
|
2471
|
+
}
|
|
2472
|
+
}, /* @__PURE__ */ import_react11.default.createElement("span", {
|
|
2473
|
+
className: "text-black font-semibold text-right",
|
|
2474
|
+
style: {
|
|
2475
|
+
fontSize: "".concat(scaled(12), "px"),
|
|
2476
|
+
paddingRight: "".concat(scaled(36), "px")
|
|
2477
|
+
}
|
|
2478
|
+
}, "Time Format"), /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2479
|
+
className: cn4("relative", showDateFormatSelector ? "" : "w-full"),
|
|
2480
|
+
style: {
|
|
2481
|
+
height: "".concat(scaled(40), "px")
|
|
2482
|
+
}
|
|
2483
|
+
}, /* @__PURE__ */ import_react11.default.createElement("select", {
|
|
2484
|
+
value: internalTimeZoneFormat,
|
|
2485
|
+
onChange: function(e) {
|
|
2486
|
+
setInternalTimeZoneFormat(e.target.value);
|
|
2487
|
+
onTimeZoneFormatChange === null || onTimeZoneFormatChange === void 0 ? void 0 : onTimeZoneFormatChange(e.target.value);
|
|
2488
|
+
},
|
|
2489
|
+
className: cn4("block h-full border border-[rgba(23,97,163,0.4)] bg-[#F0F8FF] text-gray-900 font-semibold rounded-[6px] transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-200 appearance-none", showDateFormatSelector ? "w-full" : "w-full", "hover:bg-gradient-to-r hover:from-[rgba(23,97,163,0.4)] hover:to-[rgba(77,175,131,0.4)]"),
|
|
2490
|
+
style: {
|
|
2491
|
+
fontSize: "".concat(scaled(12), "px"),
|
|
2492
|
+
paddingRight: "".concat(scaled(36), "px"),
|
|
2493
|
+
paddingLeft: "".concat(scaled(32), "px")
|
|
2494
|
+
}
|
|
2495
|
+
}, TIME_ZONE_OPTIONS.map(function(zone) {
|
|
2496
|
+
return /* @__PURE__ */ import_react11.default.createElement("option", {
|
|
2497
|
+
key: zone,
|
|
2498
|
+
value: zone
|
|
2499
|
+
}, zone);
|
|
2500
|
+
})), /* @__PURE__ */ import_react11.default.createElement(import_hi.HiChevronDown, {
|
|
2501
|
+
className: "pointer-events-none absolute top-1/2 -translate-y-1/2 text-gray-500",
|
|
2502
|
+
style: {
|
|
2503
|
+
right: "".concat(scaled(8), "px"),
|
|
2504
|
+
fontSize: "".concat(scaled(18), "px")
|
|
2505
|
+
}
|
|
2506
|
+
}))))), /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2507
|
+
style: {
|
|
2508
|
+
marginTop: "".concat(scaled(16), "px")
|
|
2509
|
+
}
|
|
2510
|
+
}, /* @__PURE__ */ import_react11.default.createElement("label", {
|
|
2511
|
+
className: "block text-gray-700 font-semibold",
|
|
2512
|
+
style: {
|
|
2513
|
+
marginBottom: "".concat(scaled(12), "px"),
|
|
2514
|
+
fontSize: "".concat(scaled(12), "px")
|
|
2515
|
+
}
|
|
2516
|
+
}, "Time Select"), /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2517
|
+
className: "flex",
|
|
2518
|
+
style: {
|
|
2519
|
+
gap: "".concat(scaled(12), "px")
|
|
2520
|
+
}
|
|
2521
|
+
}, /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2522
|
+
className: "flex-1"
|
|
2523
|
+
}, /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2524
|
+
className: "relative",
|
|
2525
|
+
style: {
|
|
2526
|
+
width: "".concat(scaled(106), "px")
|
|
2527
|
+
}
|
|
2528
|
+
}, /* @__PURE__ */ import_react11.default.createElement("select", {
|
|
2529
|
+
value: internalTimeFormat === "24h" ? selectedPeriod === "PM" && selectedHour !== 12 ? selectedHour + 12 : selectedPeriod === "AM" && selectedHour === 12 ? 0 : selectedHour : selectedHour,
|
|
2530
|
+
onChange: function(e) {
|
|
2531
|
+
var value2 = Number(e.target.value);
|
|
2532
|
+
if (internalTimeFormat === "24h") {
|
|
2533
|
+
if (value2 === 0) {
|
|
2534
|
+
setSelectedHour(12);
|
|
2535
|
+
setSelectedPeriod("AM");
|
|
2536
|
+
} else if (value2 === 12) {
|
|
2537
|
+
setSelectedHour(12);
|
|
2538
|
+
setSelectedPeriod("PM");
|
|
2539
|
+
} else if (value2 > 12) {
|
|
2540
|
+
setSelectedHour(value2 - 12);
|
|
2541
|
+
setSelectedPeriod("PM");
|
|
2542
|
+
} else {
|
|
2543
|
+
setSelectedHour(value2);
|
|
2544
|
+
setSelectedPeriod("AM");
|
|
2545
|
+
}
|
|
2546
|
+
} else {
|
|
2547
|
+
setSelectedHour(value2);
|
|
2548
|
+
}
|
|
2549
|
+
},
|
|
2550
|
+
className: "block w-full bg-white border border-[rgba(77,175,131,0.25)] text-gray-900 font-semibold rounded-[6px] transition-all duration-200 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 appearance-none",
|
|
2551
|
+
style: {
|
|
2552
|
+
height: "".concat(scaled(40), "px"),
|
|
2553
|
+
fontSize: "".concat(scaled(12), "px"),
|
|
2554
|
+
paddingLeft: "".concat(scaled(16), "px"),
|
|
2555
|
+
paddingRight: "".concat(scaled(32), "px")
|
|
2556
|
+
}
|
|
2557
|
+
}, (internalTimeFormat === "24h" ? hours24 : hours12).map(function(hour) {
|
|
2558
|
+
return /* @__PURE__ */ import_react11.default.createElement("option", {
|
|
2559
|
+
key: hour,
|
|
2560
|
+
value: hour
|
|
2561
|
+
}, String(hour).padStart(2, "0"));
|
|
2562
|
+
})), /* @__PURE__ */ import_react11.default.createElement(import_hi.HiChevronDown, {
|
|
2563
|
+
className: "pointer-events-none absolute top-1/2 -translate-y-1/2 text-gray-500",
|
|
2564
|
+
style: {
|
|
2565
|
+
right: "".concat(scaled(8), "px"),
|
|
2566
|
+
fontSize: "".concat(scaled(18), "px")
|
|
2567
|
+
}
|
|
2568
|
+
}))), /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2569
|
+
className: "flex-1"
|
|
2570
|
+
}, /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2571
|
+
className: "relative",
|
|
2572
|
+
style: {
|
|
2573
|
+
width: "".concat(scaled(106), "px")
|
|
2574
|
+
}
|
|
2575
|
+
}, /* @__PURE__ */ import_react11.default.createElement("select", {
|
|
2576
|
+
value: selectedMinute,
|
|
2577
|
+
onChange: function(e) {
|
|
2578
|
+
return setSelectedMinute(Number(e.target.value));
|
|
2579
|
+
},
|
|
2580
|
+
className: "block w-full bg-white border border-[rgba(77,175,131,0.25)] text-gray-900 font-semibold rounded-[6px] transition-all duration-200 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 appearance-none",
|
|
2581
|
+
style: {
|
|
2582
|
+
height: "".concat(scaled(40), "px"),
|
|
2583
|
+
fontSize: "".concat(scaled(12), "px"),
|
|
2584
|
+
paddingLeft: "".concat(scaled(16), "px"),
|
|
2585
|
+
paddingRight: "".concat(scaled(32), "px")
|
|
2586
|
+
}
|
|
2587
|
+
}, minutes.map(function(minute) {
|
|
2588
|
+
return /* @__PURE__ */ import_react11.default.createElement("option", {
|
|
2589
|
+
key: minute,
|
|
2590
|
+
value: minute
|
|
2591
|
+
}, String(minute).padStart(2, "0"));
|
|
2592
|
+
})), /* @__PURE__ */ import_react11.default.createElement(import_hi.HiChevronDown, {
|
|
2593
|
+
className: "pointer-events-none absolute top-1/2 -translate-y-1/2 text-gray-500",
|
|
2594
|
+
style: {
|
|
2595
|
+
right: "".concat(scaled(8), "px"),
|
|
2596
|
+
fontSize: "".concat(scaled(18), "px")
|
|
2597
|
+
}
|
|
2598
|
+
}))), internalTimeFormat === "12h" && /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2599
|
+
className: "flex-1"
|
|
2600
|
+
}, /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2601
|
+
className: "relative",
|
|
2602
|
+
style: {
|
|
2603
|
+
width: "".concat(scaled(106), "px")
|
|
2604
|
+
}
|
|
2605
|
+
}, /* @__PURE__ */ import_react11.default.createElement("select", {
|
|
2606
|
+
value: selectedPeriod,
|
|
2607
|
+
onChange: function(e) {
|
|
2608
|
+
return setSelectedPeriod(e.target.value);
|
|
2609
|
+
},
|
|
2610
|
+
className: "block w-full bg-white border border-[rgba(77,175,131,0.25)] text-gray-900 font-semibold rounded-[6px] transition-all duration-200 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 appearance-none",
|
|
2611
|
+
style: {
|
|
2612
|
+
height: "".concat(scaled(40), "px"),
|
|
2613
|
+
fontSize: "".concat(scaled(12), "px"),
|
|
2614
|
+
paddingLeft: "".concat(scaled(16), "px"),
|
|
2615
|
+
paddingRight: "".concat(scaled(32), "px")
|
|
2616
|
+
}
|
|
2617
|
+
}, /* @__PURE__ */ import_react11.default.createElement("option", {
|
|
2618
|
+
value: "AM"
|
|
2619
|
+
}, "AM"), /* @__PURE__ */ import_react11.default.createElement("option", {
|
|
2620
|
+
value: "PM"
|
|
2621
|
+
}, "PM")), /* @__PURE__ */ import_react11.default.createElement(import_hi.HiChevronDown, {
|
|
2622
|
+
className: "pointer-events-none absolute top-1/2 -translate-y-1/2 text-gray-500",
|
|
2623
|
+
style: {
|
|
2624
|
+
right: "".concat(scaled(8), "px"),
|
|
2625
|
+
fontSize: "".concat(scaled(18), "px")
|
|
2626
|
+
}
|
|
2627
|
+
}))))), /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2628
|
+
style: {
|
|
2629
|
+
marginTop: "".concat(scaled(12), "px")
|
|
2630
|
+
}
|
|
2631
|
+
}, /* @__PURE__ */ import_react11.default.createElement("label", {
|
|
2632
|
+
className: "block text-gray-700 font-semibold",
|
|
2633
|
+
style: {
|
|
2634
|
+
marginBottom: "".concat(scaled(8), "px"),
|
|
2635
|
+
fontSize: "".concat(scaled(12), "px")
|
|
2636
|
+
}
|
|
2637
|
+
}, "Preview"), /* @__PURE__ */ import_react11.default.createElement("p", {
|
|
2638
|
+
className: "text-left text-[#1761A3] font-semibold",
|
|
2639
|
+
style: {
|
|
2640
|
+
fontSize: "".concat(scaled(12), "px")
|
|
2641
|
+
}
|
|
2642
|
+
}, formatDateWithFormat(value !== null && value !== void 0 ? value : null, internalDateFormat), " ", formatTime({
|
|
2643
|
+
hour: selectedHour,
|
|
2644
|
+
minute: selectedMinute,
|
|
2645
|
+
period: selectedPeriod
|
|
2646
|
+
}, internalTimeFormat), internalTimeZoneFormat !== "none" ? " ".concat(internalTimeZoneFormat) : ""))), /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2647
|
+
className: "mt-auto border-t border-gray-200 flex-shrink-0",
|
|
2648
|
+
style: {
|
|
2649
|
+
paddingTop: "".concat(scaled(15), "px")
|
|
2650
|
+
}
|
|
2651
|
+
}, (showTodayButton || showClearButton) && /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2652
|
+
className: "flex",
|
|
2653
|
+
style: {
|
|
2654
|
+
gap: "".concat(scaled(12), "px"),
|
|
2655
|
+
marginBottom: "".concat(scaled(15), "px")
|
|
2656
|
+
}
|
|
2657
|
+
}, showTodayButton && /* @__PURE__ */ import_react11.default.createElement("button", {
|
|
2658
|
+
type: "button",
|
|
2659
|
+
onClick: selectToday,
|
|
2660
|
+
className: cn4("flex items-center justify-center rounded-[6px] text-[#1761A3] font-semibold bg-[rgba(23,97,163,0.15)] transition-all duration-200 hover:bg-gradient-to-b hover:from-[#1761A3] hover:to-[#4DAF83] hover:text-white", showClearButton ? "flex-1" : "w-full"),
|
|
2661
|
+
style: {
|
|
2662
|
+
height: "".concat(scaled(38), "px"),
|
|
2663
|
+
fontSize: "".concat(scaled(12), "px"),
|
|
2664
|
+
gap: "".concat(scaled(8), "px")
|
|
2665
|
+
}
|
|
2666
|
+
}, /* @__PURE__ */ import_react11.default.createElement(import_hi.HiOutlineClock, {
|
|
2667
|
+
style: {
|
|
2668
|
+
width: "".concat(scaled(14), "px"),
|
|
2669
|
+
height: "".concat(scaled(14), "px")
|
|
2670
|
+
}
|
|
2671
|
+
}), "Current Time"), showClearButton && /* @__PURE__ */ import_react11.default.createElement("button", {
|
|
2672
|
+
type: "button",
|
|
2673
|
+
onClick: clearDate,
|
|
2674
|
+
className: cn4("flex items-center justify-center rounded-[6px] text-[#EF4444] font-semibold bg-[rgba(239,68,68,0.15)] transition-all duration-200 hover:opacity-80", showTodayButton ? "flex-1" : "w-full"),
|
|
2675
|
+
style: {
|
|
2676
|
+
height: "".concat(scaled(38), "px"),
|
|
2677
|
+
fontSize: "".concat(scaled(12), "px")
|
|
2678
|
+
}
|
|
2679
|
+
}, "Clear")), /* @__PURE__ */ import_react11.default.createElement("button", {
|
|
2680
|
+
type: "button",
|
|
2681
|
+
onClick: handleTimeConfirm,
|
|
2682
|
+
className: "w-full rounded-[6px] bg-gradient-to-r from-[#1761A3] to-[#4DAF83] text-white font-semibold transition-all duration-200 hover:opacity-90",
|
|
2683
|
+
style: {
|
|
2684
|
+
height: "".concat(scaled(38), "px"),
|
|
2685
|
+
fontSize: "".concat(scaled(12), "px")
|
|
2686
|
+
}
|
|
2687
|
+
}, "Confirm Time")));
|
|
2688
|
+
};
|
|
2689
|
+
var defaultIcon = /* @__PURE__ */ import_react11.default.createElement(import_hi2.HiCalendarDays, {
|
|
2690
|
+
style: {
|
|
2691
|
+
width: "".concat(scaled(14), "px"),
|
|
2692
|
+
height: "".concat(scaled(14), "px")
|
|
2693
|
+
},
|
|
2694
|
+
className: "text-gray-700"
|
|
2695
|
+
});
|
|
2696
|
+
var _obj;
|
|
2697
|
+
var calendarContent = /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2698
|
+
ref: calendarRef,
|
|
2699
|
+
className: cn4("absolute left-0 z-50 border border-[#1761A3] bg-white shadow-xl transition-all duration-300 bg-gradient-to-b from-[rgba(23,97,163,0.08)] to-[rgba(77,175,131,0.08)]", positionAbove ? "bottom-full" : "top-full"),
|
|
2700
|
+
style: (_obj = {}, _define_property(_obj, positionAbove ? "marginBottom" : "marginTop", "".concat(scaled(8), "px")), _define_property(_obj, "width", "".concat(scaled(406), "px")), _define_property(_obj, "height", "".concat(scaled(580), "px")), _define_property(_obj, "borderRadius", "".concat(scaled(22), "px")), _define_property(_obj, "maxWidth", "95vw"), _define_property(_obj, "overflow", "hidden"), _obj)
|
|
2701
|
+
}, /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2702
|
+
className: "h-full flex flex-col",
|
|
2703
|
+
style: {
|
|
2704
|
+
padding: "".concat(scaled(24), "px"),
|
|
2705
|
+
paddingBottom: "".concat(scaled(22), "px")
|
|
2706
|
+
}
|
|
2707
|
+
}, /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2708
|
+
className: "text-left font-bold text-gray-900 flex-shrink-0",
|
|
2709
|
+
style: {
|
|
2710
|
+
marginBottom: "".concat(scaled(20), "px"),
|
|
2711
|
+
fontSize: "".concat(scaled(20), "px")
|
|
2712
|
+
}
|
|
2713
|
+
}, enableRangeSelection ? "Select Date Range" : "Select Date & Time"), enableRangeSelection ? /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2714
|
+
className: "flex flex-shrink-0",
|
|
2715
|
+
style: {
|
|
2716
|
+
marginBottom: "".concat(scaled(24), "px"),
|
|
2717
|
+
gap: "".concat(scaled(12), "px")
|
|
2718
|
+
}
|
|
2719
|
+
}, /* @__PURE__ */ import_react11.default.createElement("button", {
|
|
2720
|
+
type: "button",
|
|
2721
|
+
onClick: handleStartFieldClick,
|
|
2722
|
+
className: cn4("flex flex-1 items-center rounded-[6px] bg-white border-2 border-gray-200 shadow-sm transition-all duration-200", activeField === "start" && "ring-2 ring-blue-500"),
|
|
2723
|
+
style: {
|
|
2724
|
+
width: "".concat(scaled(160), "px"),
|
|
2725
|
+
height: "".concat(scaled(40), "px"),
|
|
2726
|
+
gap: "".concat(scaled(12), "px"),
|
|
2727
|
+
padding: "0 ".concat(scaled(16), "px")
|
|
2728
|
+
}
|
|
2729
|
+
}, defaultIcon, /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2730
|
+
className: "flex flex-col items-start"
|
|
2731
|
+
}, /* @__PURE__ */ import_react11.default.createElement("span", {
|
|
2732
|
+
className: "font-medium text-gray-500",
|
|
2733
|
+
style: {
|
|
2734
|
+
fontSize: "".concat(scaled(12), "px")
|
|
2735
|
+
}
|
|
2736
|
+
}, "From Date"), /* @__PURE__ */ import_react11.default.createElement("span", {
|
|
2737
|
+
className: "font-semibold text-gray-900",
|
|
2738
|
+
style: {
|
|
2739
|
+
fontSize: "".concat(scaled(14), "px")
|
|
2740
|
+
}
|
|
2741
|
+
}, (rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.start) ? formatDate(rangeValue.start) : "Select date"))), /* @__PURE__ */ import_react11.default.createElement("button", {
|
|
2742
|
+
type: "button",
|
|
2743
|
+
onClick: handleEndFieldClick,
|
|
2744
|
+
className: cn4("flex flex-1 items-center rounded-[6px] bg-white border-2 border-gray-200 shadow-sm transition-all duration-200", activeField === "end" && "ring-2 ring-blue-500"),
|
|
2745
|
+
style: {
|
|
2746
|
+
width: "".concat(scaled(160), "px"),
|
|
2747
|
+
height: "".concat(scaled(40), "px"),
|
|
2748
|
+
gap: "".concat(scaled(12), "px"),
|
|
2749
|
+
padding: "0 ".concat(scaled(16), "px")
|
|
2750
|
+
}
|
|
2751
|
+
}, defaultIcon, /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2752
|
+
className: "flex flex-col items-start"
|
|
2753
|
+
}, /* @__PURE__ */ import_react11.default.createElement("span", {
|
|
2754
|
+
className: "font-medium text-gray-500",
|
|
2755
|
+
style: {
|
|
2756
|
+
fontSize: "".concat(scaled(12), "px")
|
|
2757
|
+
}
|
|
2758
|
+
}, "To Date"), /* @__PURE__ */ import_react11.default.createElement("span", {
|
|
2759
|
+
className: "font-semibold text-gray-900",
|
|
2760
|
+
style: {
|
|
2761
|
+
fontSize: "".concat(scaled(14), "px")
|
|
2762
|
+
}
|
|
2763
|
+
}, (rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.end) ? formatDate(rangeValue.end) : "Select date")))) : /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2764
|
+
className: "flex flex-shrink-0",
|
|
2765
|
+
style: {
|
|
2766
|
+
marginBottom: "".concat(scaled(24), "px"),
|
|
2767
|
+
gap: "".concat(scaled(12), "px")
|
|
2768
|
+
}
|
|
2769
|
+
}, /* @__PURE__ */ import_react11.default.createElement("button", {
|
|
2770
|
+
type: "button",
|
|
2771
|
+
onClick: handleChooseDateClick,
|
|
2772
|
+
className: cn4("flex items-center rounded-[6px] shadow-sm transition-all duration-200", enableTimeSelection ? "" : "w-full", !showTimeSelector && enableTimeSelection ? "bg-gradient-to-b from-[#1761A3] to-[#4DAF83] text-white border-2 border-transparent" : "bg-white border-2 border-gray-200 text-gray-900"),
|
|
2773
|
+
style: {
|
|
2774
|
+
width: enableTimeSelection ? "".concat(scaled(160), "px") : void 0,
|
|
2775
|
+
height: "".concat(scaled(40), "px"),
|
|
2776
|
+
gap: "".concat(scaled(12), "px"),
|
|
2777
|
+
padding: "0 ".concat(scaled(16), "px")
|
|
2778
|
+
}
|
|
2779
|
+
}, /* @__PURE__ */ import_react11.default.createElement("span", {
|
|
2780
|
+
style: {
|
|
2781
|
+
color: !showTimeSelector && enableTimeSelection ? "white" : void 0,
|
|
2782
|
+
width: "".concat(scaled(14), "px"),
|
|
2783
|
+
height: "".concat(scaled(14), "px"),
|
|
2784
|
+
display: "flex",
|
|
2785
|
+
alignItems: "center",
|
|
2786
|
+
justifyContent: "center"
|
|
2787
|
+
}
|
|
2788
|
+
}, import_react11.default.cloneElement(defaultIcon, {
|
|
2789
|
+
style: {
|
|
2790
|
+
width: "".concat(scaled(14), "px"),
|
|
2791
|
+
height: "".concat(scaled(14), "px"),
|
|
2792
|
+
color: !showTimeSelector && enableTimeSelection ? "white" : void 0
|
|
2793
|
+
},
|
|
2794
|
+
className: !showTimeSelector && enableTimeSelection ? "text-white" : "text-gray-700"
|
|
2795
|
+
})), /* @__PURE__ */ import_react11.default.createElement("span", {
|
|
2796
|
+
className: "font-semibold",
|
|
2797
|
+
style: {
|
|
2798
|
+
fontSize: "".concat(scaled(14), "px"),
|
|
2799
|
+
color: !showTimeSelector && enableTimeSelection ? "white" : "#111827"
|
|
2800
|
+
}
|
|
2801
|
+
}, formatDate(value !== null && value !== void 0 ? value : null) || "Choose Date")), enableTimeSelection && /* @__PURE__ */ import_react11.default.createElement("button", {
|
|
2802
|
+
type: "button",
|
|
2803
|
+
onClick: handleChooseTimeClick,
|
|
2804
|
+
className: cn4("flex items-center rounded-[6px] shadow-sm transition-all duration-200", showTimeSelector ? "bg-gradient-to-b from-[#1761A3] to-[#4DAF83] text-white border-2 border-transparent" : "bg-white border-2 border-gray-200"),
|
|
2805
|
+
style: {
|
|
2806
|
+
width: "".concat(scaled(160), "px"),
|
|
2807
|
+
height: "".concat(scaled(40), "px"),
|
|
2808
|
+
gap: "".concat(scaled(8), "px"),
|
|
2809
|
+
padding: "0 ".concat(scaled(16), "px"),
|
|
2810
|
+
fontSize: "".concat(scaled(14), "px")
|
|
2811
|
+
}
|
|
2812
|
+
}, /* @__PURE__ */ import_react11.default.createElement(import_hi.HiOutlineClock, {
|
|
2813
|
+
style: {
|
|
2814
|
+
width: "".concat(scaled(14), "px"),
|
|
2815
|
+
height: "".concat(scaled(14), "px"),
|
|
2816
|
+
color: showTimeSelector ? "white" : void 0
|
|
2817
|
+
},
|
|
2818
|
+
className: showTimeSelector ? "text-white" : "text-gray-700"
|
|
2819
|
+
}), /* @__PURE__ */ import_react11.default.createElement("span", {
|
|
2820
|
+
className: "font-semibold",
|
|
2821
|
+
style: {
|
|
2822
|
+
color: showTimeSelector ? "white" : "#374151"
|
|
2823
|
+
}
|
|
2824
|
+
}, timeValue ? formatTime(timeValue, internalTimeFormat) : "Choose Time"))), showTimeSelector ? renderTimeSelector() : /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2825
|
+
className: "flex flex-col",
|
|
2826
|
+
style: {
|
|
2827
|
+
flex: "1 1 auto",
|
|
2828
|
+
minHeight: 0,
|
|
2829
|
+
display: "flex",
|
|
2830
|
+
flexDirection: "column"
|
|
2831
|
+
}
|
|
2832
|
+
}, /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2833
|
+
className: "flex-shrink-0"
|
|
2834
|
+
}, /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2835
|
+
className: "flex items-center justify-between",
|
|
2836
|
+
style: {
|
|
2837
|
+
marginBottom: "".concat(scaled(22), "px")
|
|
2838
|
+
}
|
|
2839
|
+
}, /* @__PURE__ */ import_react11.default.createElement("button", {
|
|
2840
|
+
type: "button",
|
|
2841
|
+
onClick: previousMonth,
|
|
2842
|
+
className: "flex items-center justify-center rounded-[6px] bg-[#1761A3] text-white transition-colors duration-200 hover:bg-gradient-to-b hover:from-[#1761A3] hover:to-[#4DAF83]",
|
|
2843
|
+
style: {
|
|
2844
|
+
width: "".concat(scaled(32), "px"),
|
|
2845
|
+
height: "".concat(scaled(30), "px")
|
|
2846
|
+
},
|
|
2847
|
+
"aria-label": "Previous month"
|
|
2848
|
+
}, /* @__PURE__ */ import_react11.default.createElement("span", {
|
|
2849
|
+
className: "inline-flex items-center justify-center"
|
|
2850
|
+
}, /* @__PURE__ */ import_react11.default.createElement(import_hi.HiChevronLeft, {
|
|
2851
|
+
style: {
|
|
2852
|
+
width: "".concat(scaled(10), "px"),
|
|
2853
|
+
height: "".concat(scaled(10), "px")
|
|
2854
|
+
}
|
|
2855
|
+
}))), /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2856
|
+
className: "relative"
|
|
2857
|
+
}, enableYearDropdown ? /* @__PURE__ */ import_react11.default.createElement("button", {
|
|
2858
|
+
type: "button",
|
|
2859
|
+
onClick: handleMonthYearClick,
|
|
2860
|
+
className: "font-bold text-[#1761A3] transition-colors duration-200 hover:opacity-80",
|
|
2861
|
+
style: {
|
|
2862
|
+
fontSize: "".concat(scaled(18), "px")
|
|
2863
|
+
}
|
|
2864
|
+
}, monthName, " ", currentYear) : /* @__PURE__ */ import_react11.default.createElement("h2", {
|
|
2865
|
+
className: "font-bold text-[#1761A3]",
|
|
2866
|
+
style: {
|
|
2867
|
+
fontSize: "".concat(scaled(18), "px")
|
|
2868
|
+
}
|
|
2869
|
+
}, monthName, " ", currentYear), enableYearDropdown && showYearDropdown && /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2870
|
+
className: "absolute left-1/2 top-full z-50 overflow-y-auto bg-white shadow-xl border border-[rgba(77,175,131,0.25)] rounded-[6px] -translate-x-1/2",
|
|
2871
|
+
style: {
|
|
2872
|
+
marginTop: "".concat(scaled(8), "px"),
|
|
2873
|
+
width: "".concat(scaled(120), "px"),
|
|
2874
|
+
maxHeight: "".concat(scaled(240), "px")
|
|
2875
|
+
}
|
|
2876
|
+
}, Array.from({
|
|
2877
|
+
length: 201
|
|
2878
|
+
}, function(_, i) {
|
|
2879
|
+
var year = today.getFullYear() - 100 + i;
|
|
2880
|
+
return /* @__PURE__ */ import_react11.default.createElement("button", {
|
|
2881
|
+
key: year,
|
|
2882
|
+
type: "button",
|
|
2883
|
+
onClick: function() {
|
|
2884
|
+
return handleYearSelect(year);
|
|
2885
|
+
},
|
|
2886
|
+
className: cn4("block w-full text-left font-semibold transition-colors duration-150", year === currentYear ? "bg-[#1761A3] text-white" : "text-gray-900 hover:bg-blue-50"),
|
|
2887
|
+
style: {
|
|
2888
|
+
fontSize: "".concat(scaled(14), "px"),
|
|
2889
|
+
padding: "".concat(scaled(8), "px ").concat(scaled(12), "px")
|
|
2890
|
+
}
|
|
2891
|
+
}, year);
|
|
2892
|
+
}))), /* @__PURE__ */ import_react11.default.createElement("button", {
|
|
2893
|
+
type: "button",
|
|
2894
|
+
onClick: nextMonth,
|
|
2895
|
+
className: "flex items-center justify-center rounded-[6px] bg-[#1761A3] text-white transition-colors duration-200 hover:bg-gradient-to-b hover:from-[#1761A3] hover:to-[#4DAF83]",
|
|
2896
|
+
style: {
|
|
2897
|
+
width: "".concat(scaled(32), "px"),
|
|
2898
|
+
height: "".concat(scaled(30), "px")
|
|
2899
|
+
},
|
|
2900
|
+
"aria-label": "Next month"
|
|
2901
|
+
}, /* @__PURE__ */ import_react11.default.createElement("span", {
|
|
2902
|
+
className: "inline-flex items-center justify-center"
|
|
2903
|
+
}, /* @__PURE__ */ import_react11.default.createElement(import_hi.HiChevronRight, {
|
|
2904
|
+
style: {
|
|
2905
|
+
width: "".concat(scaled(10), "px"),
|
|
2906
|
+
height: "".concat(scaled(10), "px")
|
|
2907
|
+
}
|
|
2908
|
+
})))), /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2909
|
+
style: {
|
|
2910
|
+
marginBottom: "".concat(scaled(6), "px")
|
|
2911
|
+
}
|
|
2912
|
+
}, /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2913
|
+
className: "grid grid-cols-7",
|
|
2914
|
+
style: {
|
|
2915
|
+
gap: "".concat(scaled(8), "px ").concat(scaled(8), "px")
|
|
2916
|
+
}
|
|
2917
|
+
}, DAY_NAMES.map(function(day) {
|
|
2918
|
+
return /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2919
|
+
key: day,
|
|
2920
|
+
className: "flex items-center justify-center font-bold text-gray-600",
|
|
2921
|
+
style: {
|
|
2922
|
+
width: "".concat(scaled(44), "px"),
|
|
2923
|
+
height: "".concat(scaled(28), "px"),
|
|
2924
|
+
fontSize: "".concat(scaled(12), "px")
|
|
2925
|
+
}
|
|
2926
|
+
}, day);
|
|
2927
|
+
})))), /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2928
|
+
className: "flex-shrink-0",
|
|
2929
|
+
style: {
|
|
2930
|
+
height: "".concat(scaled(228), "px"),
|
|
2931
|
+
marginBottom: "".concat(scaled(8), "px")
|
|
2932
|
+
}
|
|
2933
|
+
}, /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2934
|
+
className: "grid grid-cols-7",
|
|
2935
|
+
style: {
|
|
2936
|
+
gap: "".concat(scaled(8), "px ").concat(scaled(16), "px")
|
|
2937
|
+
}
|
|
2938
|
+
}, renderDays())), /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2939
|
+
className: "flex-shrink-0 border-t border-gray-200",
|
|
2940
|
+
style: {
|
|
2941
|
+
paddingTop: "".concat(scaled(12), "px")
|
|
2942
|
+
}
|
|
2943
|
+
}, (showTodayButton || showClearButton) && /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2944
|
+
className: "flex",
|
|
2945
|
+
style: {
|
|
2946
|
+
gap: "".concat(scaled(12), "px"),
|
|
2947
|
+
marginBottom: "".concat(scaled(8), "px")
|
|
2948
|
+
}
|
|
2949
|
+
}, showTodayButton && /* @__PURE__ */ import_react11.default.createElement("button", {
|
|
2950
|
+
type: "button",
|
|
2951
|
+
onClick: selectToday,
|
|
2952
|
+
className: cn4("flex items-center justify-center rounded-[6px] text-[#1761A3] font-semibold bg-[rgba(23,97,163,0.15)] transition-all duration-200 hover:bg-gradient-to-b hover:from-[#1761A3] hover:to-[#4DAF83] hover:text-white", showClearButton ? "flex-1" : "w-full"),
|
|
2953
|
+
style: {
|
|
2954
|
+
height: "".concat(scaled(38), "px"),
|
|
2955
|
+
fontSize: "".concat(scaled(12), "px"),
|
|
2956
|
+
gap: "".concat(scaled(8), "px")
|
|
2957
|
+
}
|
|
2958
|
+
}, /* @__PURE__ */ import_react11.default.createElement(import_hi2.HiCalendarDays, {
|
|
2959
|
+
style: {
|
|
2960
|
+
width: "".concat(scaled(14), "px"),
|
|
2961
|
+
height: "".concat(scaled(14), "px")
|
|
2962
|
+
}
|
|
2963
|
+
}), "Today"), showClearButton && /* @__PURE__ */ import_react11.default.createElement("button", {
|
|
2964
|
+
type: "button",
|
|
2965
|
+
onClick: clearDate,
|
|
2966
|
+
className: cn4("flex items-center justify-center rounded-[6px] text-[#EF4444] font-semibold bg-[rgba(239,68,68,0.15)] transition-all duration-200 hover:opacity-80", showTodayButton ? "flex-1" : "w-full"),
|
|
2967
|
+
style: {
|
|
2968
|
+
height: "".concat(scaled(38), "px"),
|
|
2969
|
+
fontSize: "".concat(scaled(12), "px")
|
|
2970
|
+
}
|
|
2971
|
+
}, "Clear")), /* @__PURE__ */ import_react11.default.createElement("button", {
|
|
2972
|
+
type: "button",
|
|
2973
|
+
onClick: handleDateConfirm,
|
|
2974
|
+
className: "w-full rounded-[6px] bg-gradient-to-r from-[#1761A3] to-[#4DAF83] text-white font-semibold transition-all duration-200 hover:opacity-90",
|
|
2975
|
+
style: {
|
|
2976
|
+
height: "".concat(scaled(38), "px"),
|
|
2977
|
+
fontSize: "".concat(scaled(12), "px")
|
|
2978
|
+
}
|
|
2979
|
+
}, "Confirm Date")))));
|
|
2980
|
+
return /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2981
|
+
ref: containerRef,
|
|
2982
|
+
className: cn4("relative", className)
|
|
2983
|
+
}, /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2984
|
+
className: "relative"
|
|
2985
|
+
}, showIcon && /* @__PURE__ */ import_react11.default.createElement("div", {
|
|
2986
|
+
className: "pointer-events-none absolute inset-y-0 left-0 flex items-center",
|
|
2987
|
+
style: {
|
|
2988
|
+
paddingLeft: "".concat(scaled(12), "px")
|
|
2989
|
+
}
|
|
2990
|
+
}, icon || defaultIcon), /* @__PURE__ */ import_react11.default.createElement("input", {
|
|
2991
|
+
type: "text",
|
|
2992
|
+
value: enableRangeSelection && rangeValue ? rangeValue.start && rangeValue.end ? "".concat(formatDate(rangeValue.start), " - ").concat(formatDate(rangeValue.end)) : rangeValue.start ? "".concat(formatDate(rangeValue.start), " - ...") : "" : enableTimeSelection && value && timeValue ? "".concat(formatDate(value), " ").concat(formatTime(timeValue, internalTimeFormat)) : formatDate(value !== null && value !== void 0 ? value : null),
|
|
2993
|
+
onClick: toggleCalendar,
|
|
2994
|
+
readOnly: true,
|
|
2995
|
+
disabled: disabled,
|
|
2996
|
+
placeholder: placeholder,
|
|
2997
|
+
className: cn4("block w-full rounded-full border border-gray-300 bg-gray-50 font-semibold shadow-sm text-gray-900 placeholder-gray-500 transition-colors duration-200 focus:border-blue-500 focus:ring-blue-500", disabled && "cursor-not-allowed opacity-50"),
|
|
2998
|
+
style: {
|
|
2999
|
+
paddingTop: "".concat(scaled(10), "px"),
|
|
3000
|
+
paddingBottom: "".concat(scaled(10), "px"),
|
|
3001
|
+
paddingLeft: showIcon ? "".concat(scaled(40), "px") : "".concat(scaled(12), "px"),
|
|
3002
|
+
paddingRight: "".concat(scaled(12), "px"),
|
|
3003
|
+
fontSize: "".concat(scaled(12), "px")
|
|
3004
|
+
}
|
|
3005
|
+
})), isOpen && calendarContent);
|
|
3006
|
+
};
|
|
3007
|
+
Calendar.displayName = "Calendar";
|
|
3008
|
+
// src/components/Dropdown.tsx
|
|
3009
|
+
var import_react12 = __toESM(require("react"));
|
|
3010
|
+
var variantStyles = {
|
|
3011
|
+
basic: "bg-blue-600 text-white hover:bg-blue-700",
|
|
3012
|
+
outline: "border border-black-600 text-blue-600 hover:bg-blue-50",
|
|
3013
|
+
pill: "bg-blue-600 text-white rounded-full hover:bg-blue-700",
|
|
3014
|
+
dark: "bg-gray-800 text-white hover:bg-gray-700",
|
|
3015
|
+
underline: "border-b-2 border-blue-500 bg-transparent text-blue-700 hover:bg-blue-50",
|
|
3016
|
+
shadow: "bg-white text-gray-700 shadow-md hover:shadow-lg border border-gray-200",
|
|
3017
|
+
glass: "bg-white/20 backdrop-blur-md text-white border border-white/40 hover:bg-white/30",
|
|
3018
|
+
gradient: "bg-gradient-to-r from-blue-500 to-purple-500 text-white hover:opacity-90"
|
|
3019
|
+
};
|
|
3020
|
+
var Dropdown = function(param) {
|
|
3021
|
+
var options = param.options, value = param.value, onSelect = param.onSelect, _param_variant = param.variant, variant = _param_variant === void 0 ? "basic" : _param_variant, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "Select an option" : _param_placeholder;
|
|
3022
|
+
var _ref = _sliced_to_array((0, import_react12.useState)(false), 2), open = _ref[0], setOpen = _ref[1];
|
|
3023
|
+
var _ref1 = _sliced_to_array((0, import_react12.useState)(null), 2), internalSelected = _ref1[0], setInternalSelected = _ref1[1];
|
|
3024
|
+
var dropdownRef = (0, import_react12.useRef)(null);
|
|
3025
|
+
var selectedOption = value !== void 0 ? options.find(function(opt) {
|
|
3026
|
+
return opt.value === value;
|
|
3027
|
+
}) : internalSelected;
|
|
3028
|
+
(0, import_react12.useEffect)(function() {
|
|
3029
|
+
var handleClickOutside = function handleClickOutside(event) {
|
|
3030
|
+
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
|
3031
|
+
setOpen(false);
|
|
3032
|
+
}
|
|
3033
|
+
};
|
|
3034
|
+
if (open) {
|
|
3035
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
3036
|
+
}
|
|
3037
|
+
return function() {
|
|
3038
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
3039
|
+
};
|
|
3040
|
+
}, [
|
|
3041
|
+
open
|
|
3042
|
+
]);
|
|
3043
|
+
var handleSelect = function(option) {
|
|
3044
|
+
console.log(option);
|
|
3045
|
+
if (value === void 0) setInternalSelected(option);
|
|
3046
|
+
onSelect(option.value);
|
|
3047
|
+
setOpen(false);
|
|
3048
|
+
};
|
|
3049
|
+
return /* @__PURE__ */ import_react12.default.createElement("div", {
|
|
3050
|
+
ref: dropdownRef,
|
|
3051
|
+
className: "relative w-56 ".concat(className)
|
|
3052
|
+
}, /* @__PURE__ */ import_react12.default.createElement("button", {
|
|
3053
|
+
onClick: function() {
|
|
3054
|
+
return setOpen(!open);
|
|
3055
|
+
},
|
|
3056
|
+
className: "w-full text-left px-4 py-2 rounded-md transition-all duration-200 ".concat(variantStyles[variant])
|
|
3057
|
+
}, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.key) || placeholder), open && /* @__PURE__ */ import_react12.default.createElement("div", {
|
|
3058
|
+
className: "absolute mt-2 w-full bg-white border border-gray-200 rounded-md shadow-lg z-20"
|
|
3059
|
+
}, options.map(function(opt) {
|
|
3060
|
+
return /* @__PURE__ */ import_react12.default.createElement("div", {
|
|
3061
|
+
key: opt.value,
|
|
3062
|
+
onClick: function() {
|
|
3063
|
+
return handleSelect(opt);
|
|
3064
|
+
},
|
|
3065
|
+
className: "px-4 py-2 cursor-pointer hover:bg-gray-100 text-gray-700"
|
|
3066
|
+
}, opt.key);
|
|
3067
|
+
})));
|
|
3068
|
+
};
|
|
3069
|
+
Dropdown.displayName = "Dropdown";
|
|
3070
|
+
// src/components/Filter.tsx
|
|
3071
|
+
var import_react13 = __toESM(require("react"));
|
|
3072
|
+
var import_lucide_react3 = require("lucide-react");
|
|
3073
|
+
var Filter = function() {
|
|
3074
|
+
var _ref = _sliced_to_array((0, import_react13.useState)(false), 2), open = _ref[0], setOpen = _ref[1];
|
|
3075
|
+
var _ref1 = _sliced_to_array((0, import_react13.useState)({
|
|
3076
|
+
date: {
|
|
3077
|
+
start: null,
|
|
3078
|
+
end: null
|
|
3079
|
+
},
|
|
3080
|
+
activity: "",
|
|
3081
|
+
status: "",
|
|
3082
|
+
keyword: ""
|
|
3083
|
+
}), 2), values = _ref1[0], setValues = _ref1[1];
|
|
3084
|
+
var handleChange = function(name, value) {
|
|
3085
|
+
setValues(function(prev) {
|
|
3086
|
+
return _object_spread_props(_object_spread({}, prev), _define_property({}, name, value));
|
|
3087
|
+
});
|
|
3088
|
+
};
|
|
3089
|
+
var resetField = function(name) {
|
|
3090
|
+
if (name === "date") {
|
|
3091
|
+
setValues(function(prev) {
|
|
3092
|
+
return _object_spread_props(_object_spread({}, prev), {
|
|
3093
|
+
date: {
|
|
3094
|
+
start: null,
|
|
3095
|
+
end: null
|
|
3096
|
+
}
|
|
3097
|
+
});
|
|
3098
|
+
});
|
|
3099
|
+
} else {
|
|
3100
|
+
setValues(function(prev) {
|
|
3101
|
+
return _object_spread_props(_object_spread({}, prev), _define_property({}, name, ""));
|
|
3102
|
+
});
|
|
3103
|
+
}
|
|
3104
|
+
};
|
|
3105
|
+
var resetAll = function() {
|
|
3106
|
+
setValues({
|
|
3107
|
+
date: {
|
|
3108
|
+
start: null,
|
|
3109
|
+
end: null
|
|
3110
|
+
},
|
|
3111
|
+
activity: "",
|
|
3112
|
+
status: "",
|
|
3113
|
+
keyword: ""
|
|
3114
|
+
});
|
|
3115
|
+
};
|
|
3116
|
+
var applyFilters = function() {
|
|
3117
|
+
console.log("Applied Filters:", values);
|
|
3118
|
+
setOpen(false);
|
|
3119
|
+
};
|
|
3120
|
+
return /* @__PURE__ */ import_react13.default.createElement("div", {
|
|
3121
|
+
className: "relative"
|
|
3122
|
+
}, /* @__PURE__ */ import_react13.default.createElement(Button, {
|
|
3123
|
+
variant: "outline",
|
|
3124
|
+
className: "flex items-center gap-2 px-5 py-3 rounded-lg\r\n border border-[rgba(23,97,163,0.35)]\r\n bg-gradient-to-r from-[#f2fbf8] to-[#eef6fb]\r\n text-[#0f172a] font-semibold shadow-sm",
|
|
3125
|
+
onClick: function() {
|
|
3126
|
+
return setOpen(function(p) {
|
|
3127
|
+
return !p;
|
|
3128
|
+
});
|
|
3129
|
+
}
|
|
3130
|
+
}, "Filter"), open && /* @__PURE__ */ import_react13.default.createElement("div", {
|
|
3131
|
+
className: "absolute right-0 mt-3 z-50"
|
|
3132
|
+
}, /* @__PURE__ */ import_react13.default.createElement(Card, {
|
|
3133
|
+
variant: "figma",
|
|
3134
|
+
className: "w-[360px] p-0 overflow-hidden bg-white"
|
|
3135
|
+
}, /* @__PURE__ */ import_react13.default.createElement("div", {
|
|
3136
|
+
className: "flex justify-between items-center px-5 py-3 border-b border-[rgba(23,97,163,0.35)]"
|
|
3137
|
+
}, /* @__PURE__ */ import_react13.default.createElement("h3", {
|
|
3138
|
+
className: "text-md font-semibold"
|
|
3139
|
+
}, "Add Filter"), /* @__PURE__ */ import_react13.default.createElement("button", {
|
|
3140
|
+
onClick: function() {
|
|
3141
|
+
return setOpen(false);
|
|
3142
|
+
},
|
|
3143
|
+
className: "w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center"
|
|
3144
|
+
}, /* @__PURE__ */ import_react13.default.createElement(import_lucide_react3.X, {
|
|
3145
|
+
className: "w-4 h-4 text-slate-600"
|
|
3146
|
+
}))), /* @__PURE__ */ import_react13.default.createElement(Section, {
|
|
3147
|
+
title: "Date Range",
|
|
3148
|
+
onReset: function() {
|
|
3149
|
+
return resetField("date");
|
|
3150
|
+
}
|
|
3151
|
+
}, /* @__PURE__ */ import_react13.default.createElement(Calendar, {
|
|
3152
|
+
enableRangeSelection: true,
|
|
3153
|
+
rangeValue: values.date,
|
|
3154
|
+
onRangeChange: function(range) {
|
|
3155
|
+
return handleChange("date", range);
|
|
3156
|
+
},
|
|
3157
|
+
size: "small"
|
|
3158
|
+
})), /* @__PURE__ */ import_react13.default.createElement(Section, {
|
|
3159
|
+
title: "Activity Type",
|
|
3160
|
+
onReset: function() {
|
|
3161
|
+
return resetField("activity");
|
|
3162
|
+
}
|
|
3163
|
+
}, /* @__PURE__ */ import_react13.default.createElement(MahatiActivity, {
|
|
3164
|
+
value: values.activity,
|
|
3165
|
+
onChange: function(v) {
|
|
3166
|
+
return handleChange("activity", v);
|
|
3167
|
+
}
|
|
3168
|
+
})), /* @__PURE__ */ import_react13.default.createElement(Section, {
|
|
3169
|
+
title: "Status",
|
|
3170
|
+
onReset: function() {
|
|
3171
|
+
return resetField("status");
|
|
3172
|
+
}
|
|
3173
|
+
}, /* @__PURE__ */ import_react13.default.createElement(MahatiStatus, {
|
|
3174
|
+
value: values.status,
|
|
3175
|
+
onChange: function(v) {
|
|
3176
|
+
return handleChange("status", v);
|
|
3177
|
+
}
|
|
3178
|
+
})), /* @__PURE__ */ import_react13.default.createElement(Section, {
|
|
3179
|
+
title: "Keyword search",
|
|
3180
|
+
onReset: function() {
|
|
3181
|
+
return resetField("keyword");
|
|
3182
|
+
}
|
|
3183
|
+
}, /* @__PURE__ */ import_react13.default.createElement(MahatiSearch, {
|
|
3184
|
+
value: values.keyword,
|
|
3185
|
+
onChange: function(v) {
|
|
3186
|
+
return handleChange("keyword", v);
|
|
3187
|
+
}
|
|
3188
|
+
})), /* @__PURE__ */ import_react13.default.createElement("div", {
|
|
3189
|
+
className: "flex justify-between items-center px-5 py-4 bg-gradient-to-r from-[#f3fbf8] to-[#eef6fb]"
|
|
3190
|
+
}, /* @__PURE__ */ import_react13.default.createElement(Button, {
|
|
3191
|
+
variant: "outline",
|
|
3192
|
+
className: "border-[#1761A3] bg-[#F0F8FF]",
|
|
3193
|
+
onClick: resetAll
|
|
3194
|
+
}, "Reset all"), /* @__PURE__ */ import_react13.default.createElement(Button, {
|
|
3195
|
+
className: "text-white bg-gradient-to-r from-[#1761a3] to-[#4daf83]",
|
|
3196
|
+
onClick: applyFilters
|
|
3197
|
+
}, "Apply Now")))));
|
|
3198
|
+
};
|
|
3199
|
+
var Section = function(param) {
|
|
3200
|
+
var title = param.title, onReset = param.onReset, children = param.children;
|
|
3201
|
+
return /* @__PURE__ */ import_react13.default.createElement("div", {
|
|
3202
|
+
className: "px-5 py-4 bg-gradient-to-r from-[#f3fbf8] to-[#eef6fb]\r\n border-b border-[rgba(23,97,163,0.35)]"
|
|
3203
|
+
}, /* @__PURE__ */ import_react13.default.createElement("div", {
|
|
3204
|
+
className: "flex justify-between items-center mb-3"
|
|
3205
|
+
}, /* @__PURE__ */ import_react13.default.createElement("h6", {
|
|
3206
|
+
className: "font-semibold text-sm"
|
|
3207
|
+
}, title), /* @__PURE__ */ import_react13.default.createElement("button", {
|
|
3208
|
+
onClick: onReset,
|
|
3209
|
+
className: "text-[#1761a3] font-semibold text-sm"
|
|
3210
|
+
}, "Reset")), children);
|
|
3211
|
+
};
|
|
3212
|
+
var activityOptions = [
|
|
3213
|
+
"Activity List",
|
|
3214
|
+
"Login",
|
|
3215
|
+
"Update",
|
|
3216
|
+
"Delete"
|
|
3217
|
+
];
|
|
3218
|
+
var statusOptions = [
|
|
3219
|
+
"Active",
|
|
3220
|
+
"Inactive",
|
|
3221
|
+
"Pending"
|
|
3222
|
+
];
|
|
3223
|
+
var MahatiActivity = function(param) {
|
|
3224
|
+
var value = param.value, onChange = param.onChange;
|
|
3225
|
+
return /* @__PURE__ */ import_react13.default.createElement(Select, {
|
|
3226
|
+
value: value,
|
|
3227
|
+
onChange: onChange,
|
|
3228
|
+
placeholder: "Select Activity",
|
|
3229
|
+
options: activityOptions
|
|
3230
|
+
});
|
|
3231
|
+
};
|
|
3232
|
+
var MahatiStatus = function(param) {
|
|
3233
|
+
var value = param.value, onChange = param.onChange;
|
|
3234
|
+
return /* @__PURE__ */ import_react13.default.createElement(Select, {
|
|
3235
|
+
value: value,
|
|
3236
|
+
onChange: onChange,
|
|
3237
|
+
placeholder: "Select Status",
|
|
3238
|
+
options: statusOptions
|
|
3239
|
+
});
|
|
3240
|
+
};
|
|
3241
|
+
var MahatiSearch = function(param) {
|
|
3242
|
+
var value = param.value, onChange = param.onChange;
|
|
3243
|
+
return /* @__PURE__ */ import_react13.default.createElement("input", {
|
|
3244
|
+
type: "text",
|
|
3245
|
+
value: value,
|
|
3246
|
+
placeholder: "Search...",
|
|
3247
|
+
onChange: function(e) {
|
|
3248
|
+
return onChange(e.target.value);
|
|
3249
|
+
},
|
|
3250
|
+
className: "w-full px-4 py-3 rounded-[6px]\r\n border border-slate-300 bg-white\r\n focus:outline-none focus:ring-2 focus:ring-[#1761a3]"
|
|
3251
|
+
});
|
|
3252
|
+
};
|
|
3253
|
+
var Select = function(param) {
|
|
3254
|
+
var value = param.value, options = param.options, placeholder = param.placeholder, onChange = param.onChange;
|
|
3255
|
+
return /* @__PURE__ */ import_react13.default.createElement("div", {
|
|
3256
|
+
className: "relative"
|
|
3257
|
+
}, /* @__PURE__ */ import_react13.default.createElement("select", {
|
|
3258
|
+
value: value,
|
|
3259
|
+
onChange: function(e) {
|
|
3260
|
+
return onChange(e.target.value);
|
|
3261
|
+
},
|
|
3262
|
+
className: "w-full appearance-none px-4 py-3 pr-10\r\n rounded-[6px] border border-slate-300 bg-white\r\n focus:outline-none focus:ring-2 focus:ring-[#1761a3]"
|
|
3263
|
+
}, /* @__PURE__ */ import_react13.default.createElement("option", {
|
|
3264
|
+
value: ""
|
|
3265
|
+
}, placeholder), options.map(function(opt) {
|
|
3266
|
+
return /* @__PURE__ */ import_react13.default.createElement("option", {
|
|
3267
|
+
key: opt
|
|
3268
|
+
}, opt);
|
|
3269
|
+
})), /* @__PURE__ */ import_react13.default.createElement(import_lucide_react3.ChevronDown, {
|
|
3270
|
+
className: "absolute right-3 top-1/2 -translate-y-1/2\r\n w-4 h-4 text-slate-500 pointer-events-none"
|
|
3271
|
+
}));
|
|
3272
|
+
};
|
|
3273
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
3274
|
+
0 && (module.exports = {
|
|
3275
|
+
MahatiActivity: MahatiActivity,
|
|
3276
|
+
MahatiButton: MahatiButton,
|
|
3277
|
+
MahatiCalendar: MahatiCalendar,
|
|
3278
|
+
MahatiCard: MahatiCard,
|
|
3279
|
+
MahatiChart: MahatiChart,
|
|
3280
|
+
MahatiDropdown: MahatiDropdown,
|
|
3281
|
+
MahatiFilter: MahatiFilter,
|
|
3282
|
+
MahatiFormContainer: MahatiFormContainer,
|
|
3283
|
+
MahatiInput: MahatiInput,
|
|
3284
|
+
MahatiModal: MahatiModal,
|
|
3285
|
+
MahatiSearch: MahatiSearch,
|
|
3286
|
+
MahatiStatus: MahatiStatus,
|
|
3287
|
+
MahatiTabbedInterface: MahatiTabbedInterface,
|
|
3288
|
+
MahatiTabbedInterfaceTailwind: MahatiTabbedInterfaceTailwind,
|
|
3289
|
+
MahatiTable: MahatiTable,
|
|
3290
|
+
MahatiTableTailwind: MahatiTableTailwind,
|
|
3291
|
+
MahatiTooltip: MahatiTooltip
|
|
3292
|
+
});
|
|
244
3293
|
//# sourceMappingURL=index.js.map
|