@tipp/ui 1.0.26 → 1.0.28
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/atoms/field-error-wrapper.js +2 -2
- package/dist/atoms/index.js +52 -52
- package/dist/atoms/pagination.js +3 -3
- package/dist/charts/index.js +1 -0
- package/dist/chunk-OL2I33HW.js +119 -0
- package/dist/chunk-OL2I33HW.js.map +1 -0
- package/dist/chunk-PSINRHYW.js +1 -0
- package/dist/chunk-PSINRHYW.js.map +1 -0
- package/dist/chunk-XG4N7OQF.js +104 -0
- package/dist/chunk-XG4N7OQF.js.map +1 -0
- package/dist/index.cjs +200 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -5
- package/dist/index.d.ts +1 -5
- package/dist/index.js +70 -59
- package/dist/molecules/date-picker/index.js +2 -2
- package/dist/molecules/expand-table/index.cjs +46 -397
- package/dist/molecules/expand-table/index.cjs.map +1 -1
- package/dist/molecules/expand-table/index.js +23 -23
- package/dist/molecules/expand-table/row.cjs +15 -433
- package/dist/molecules/expand-table/row.cjs.map +1 -1
- package/dist/molecules/expand-table/row.js +21 -21
- package/dist/molecules/index.cjs +80 -395
- package/dist/molecules/index.cjs.map +1 -1
- package/dist/molecules/index.js +25 -25
- package/dist/molecules/navigation.cjs +18 -359
- package/dist/molecules/navigation.cjs.map +1 -1
- package/dist/molecules/navigation.js +22 -22
- package/package.json +2 -31
- package/src/index.ts +1 -0
package/dist/molecules/index.cjs
CHANGED
|
@@ -68,89 +68,16 @@ module.exports = __toCommonJS(molecules_exports);
|
|
|
68
68
|
|
|
69
69
|
// src/molecules/expand-table/index.tsx
|
|
70
70
|
var import_react_table2 = require("@tanstack/react-table");
|
|
71
|
-
var
|
|
71
|
+
var import_react6 = require("react");
|
|
72
72
|
|
|
73
|
-
// src/atoms/
|
|
73
|
+
// src/atoms/button.tsx
|
|
74
74
|
var import_themes = require("@radix-ui/themes");
|
|
75
|
-
|
|
76
|
-
// src/atoms/aspect-ratio.tsx
|
|
77
|
-
var import_themes2 = require("@radix-ui/themes");
|
|
78
|
-
|
|
79
|
-
// src/atoms/avatar.tsx
|
|
80
|
-
var import_themes3 = require("@radix-ui/themes");
|
|
81
75
|
var import_react = require("react");
|
|
82
76
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
83
|
-
var
|
|
84
|
-
(props, ref) => {
|
|
85
|
-
const _a = props, { children, size, variant = "soft" } = _a, rest = __objRest(_a, ["children", "size", "variant"]);
|
|
86
|
-
const radixSize = (0, import_react.useMemo)(() => {
|
|
87
|
-
switch (size) {
|
|
88
|
-
case "small":
|
|
89
|
-
return "1";
|
|
90
|
-
case "medium":
|
|
91
|
-
return "2";
|
|
92
|
-
case "large":
|
|
93
|
-
return "3";
|
|
94
|
-
case "full":
|
|
95
|
-
return "4";
|
|
96
|
-
default:
|
|
97
|
-
return size;
|
|
98
|
-
}
|
|
99
|
-
}, [size]);
|
|
100
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes3.Avatar, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, variant, children }));
|
|
101
|
-
}
|
|
102
|
-
);
|
|
103
|
-
Avatar.displayName = "Avatar";
|
|
104
|
-
|
|
105
|
-
// src/atoms/badge.tsx
|
|
106
|
-
var import_themes4 = require("@radix-ui/themes");
|
|
107
|
-
var import_react2 = require("react");
|
|
108
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
109
|
-
var Badge = (0, import_react2.forwardRef)(
|
|
110
|
-
(props, ref) => {
|
|
111
|
-
const _a = props, { size, color } = _a, rest = __objRest(_a, ["size", "color"]);
|
|
112
|
-
const radixSize = (0, import_react2.useMemo)(() => {
|
|
113
|
-
switch (size) {
|
|
114
|
-
case "small":
|
|
115
|
-
return "1";
|
|
116
|
-
case "large":
|
|
117
|
-
return "3";
|
|
118
|
-
default:
|
|
119
|
-
return "1";
|
|
120
|
-
}
|
|
121
|
-
}, [size]);
|
|
122
|
-
const radixColor = (0, import_react2.useMemo)(() => {
|
|
123
|
-
switch (color) {
|
|
124
|
-
case "error":
|
|
125
|
-
return "red";
|
|
126
|
-
case "neutral":
|
|
127
|
-
return "gray";
|
|
128
|
-
case "success":
|
|
129
|
-
return "green";
|
|
130
|
-
case "accent":
|
|
131
|
-
default:
|
|
132
|
-
return void 0;
|
|
133
|
-
}
|
|
134
|
-
}, [color]);
|
|
135
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes4.Badge, __spreadProps(__spreadValues({}, rest), { color: radixColor, ref, size: radixSize }));
|
|
136
|
-
}
|
|
137
|
-
);
|
|
138
|
-
Badge.displayName = "Badge";
|
|
139
|
-
|
|
140
|
-
// src/atoms/blockquote.tsx
|
|
141
|
-
var import_themes5 = require("@radix-ui/themes");
|
|
142
|
-
|
|
143
|
-
// src/atoms/box.tsx
|
|
144
|
-
var import_themes6 = require("@radix-ui/themes");
|
|
145
|
-
|
|
146
|
-
// src/atoms/button.tsx
|
|
147
|
-
var import_themes7 = require("@radix-ui/themes");
|
|
148
|
-
var import_react3 = require("react");
|
|
149
|
-
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
150
|
-
var Button = (0, import_react3.forwardRef)(
|
|
77
|
+
var Button = (0, import_react.forwardRef)(
|
|
151
78
|
(props, ref) => {
|
|
152
79
|
const _a = props, { size } = _a, restProps = __objRest(_a, ["size"]);
|
|
153
|
-
const radixSize = (0,
|
|
80
|
+
const radixSize = (0, import_react.useMemo)(() => {
|
|
154
81
|
switch (size) {
|
|
155
82
|
case "small":
|
|
156
83
|
return "1";
|
|
@@ -162,99 +89,22 @@ var Button = (0, import_react3.forwardRef)(
|
|
|
162
89
|
return "2";
|
|
163
90
|
}
|
|
164
91
|
}, [size]);
|
|
165
|
-
return /* @__PURE__ */ (0,
|
|
92
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Button, __spreadProps(__spreadValues({}, restProps), { ref, size: radixSize }));
|
|
166
93
|
}
|
|
167
94
|
);
|
|
168
95
|
Button.displayName = "Button";
|
|
169
96
|
|
|
170
|
-
// src/atoms/call-out.tsx
|
|
171
|
-
var import_themes8 = require("@radix-ui/themes");
|
|
172
|
-
|
|
173
|
-
// src/atoms/card.tsx
|
|
174
|
-
var import_themes9 = require("@radix-ui/themes");
|
|
175
|
-
|
|
176
|
-
// src/atoms/check-box.tsx
|
|
177
|
-
var import_themes10 = require("@radix-ui/themes");
|
|
178
|
-
var import_react4 = require("react");
|
|
179
|
-
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
180
|
-
var Checkbox = (0, import_react4.forwardRef)(
|
|
181
|
-
(props, ref) => {
|
|
182
|
-
const _a = props, { size = "medium" } = _a, rest = __objRest(_a, ["size"]);
|
|
183
|
-
const radixSize = (0, import_react4.useMemo)(() => {
|
|
184
|
-
switch (size) {
|
|
185
|
-
case "small":
|
|
186
|
-
return "1";
|
|
187
|
-
case "medium":
|
|
188
|
-
return "2";
|
|
189
|
-
case "large":
|
|
190
|
-
return "3";
|
|
191
|
-
}
|
|
192
|
-
}, [size]);
|
|
193
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes10.Checkbox, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize }));
|
|
194
|
-
}
|
|
195
|
-
);
|
|
196
|
-
Checkbox.displayName = "Checkbox";
|
|
197
|
-
|
|
198
|
-
// src/atoms/check-box-card.tsx
|
|
199
|
-
var import_themes11 = require("@radix-ui/themes");
|
|
200
|
-
|
|
201
|
-
// src/atoms/check-box-group.tsx
|
|
202
|
-
var import_themes12 = require("@radix-ui/themes");
|
|
203
|
-
var import_react5 = require("react");
|
|
204
|
-
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
205
|
-
var Root = (0, import_react5.forwardRef)((props, ref) => {
|
|
206
|
-
const _a = props, { children, size } = _a, rest = __objRest(_a, ["children", "size"]);
|
|
207
|
-
const groupSize = (0, import_react5.useMemo)(() => {
|
|
208
|
-
switch (size) {
|
|
209
|
-
case "small":
|
|
210
|
-
return "1";
|
|
211
|
-
case "large":
|
|
212
|
-
return "3";
|
|
213
|
-
case "medium":
|
|
214
|
-
default:
|
|
215
|
-
return "2";
|
|
216
|
-
}
|
|
217
|
-
}, [size]);
|
|
218
|
-
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_themes12.CheckboxGroup.Root, __spreadProps(__spreadValues({}, rest), { ref, size: groupSize, children }));
|
|
219
|
-
});
|
|
220
|
-
Root.displayName = "CheckboxGroup.Root";
|
|
221
|
-
var CheckboxGroup = {
|
|
222
|
-
Root,
|
|
223
|
-
Item: import_themes12.CheckboxGroup.Item
|
|
224
|
-
};
|
|
225
|
-
|
|
226
|
-
// src/atoms/code.tsx
|
|
227
|
-
var import_themes13 = require("@radix-ui/themes");
|
|
228
|
-
|
|
229
|
-
// src/atoms/container.tsx
|
|
230
|
-
var import_themes14 = require("@radix-ui/themes");
|
|
231
|
-
|
|
232
|
-
// src/atoms/data-list.tsx
|
|
233
|
-
var import_themes15 = require("@radix-ui/themes");
|
|
234
|
-
|
|
235
|
-
// src/atoms/dialog.tsx
|
|
236
|
-
var import_themes16 = require("@radix-ui/themes");
|
|
237
|
-
|
|
238
|
-
// src/atoms/dropdown-menu.tsx
|
|
239
|
-
var import_themes17 = require("@radix-ui/themes");
|
|
240
|
-
|
|
241
|
-
// src/atoms/em.tsx
|
|
242
|
-
var import_themes18 = require("@radix-ui/themes");
|
|
243
|
-
|
|
244
97
|
// src/atoms/flex.tsx
|
|
245
|
-
var
|
|
246
|
-
|
|
247
|
-
// src/atoms/grid.tsx
|
|
248
|
-
var import_themes20 = require("@radix-ui/themes");
|
|
98
|
+
var import_themes2 = require("@radix-ui/themes");
|
|
249
99
|
|
|
250
100
|
// src/atoms/heading.tsx
|
|
251
|
-
var
|
|
252
|
-
var
|
|
253
|
-
var
|
|
254
|
-
var
|
|
101
|
+
var import_themes3 = require("@radix-ui/themes");
|
|
102
|
+
var import_react2 = require("react");
|
|
103
|
+
var import_themes4 = require("@radix-ui/themes");
|
|
104
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
255
105
|
function Heading2(props) {
|
|
256
106
|
const _a = props, { size, children, variant } = _a, rest = __objRest(_a, ["size", "children", "variant"]);
|
|
257
|
-
const radixSize = (0,
|
|
107
|
+
const radixSize = (0, import_react2.useMemo)(() => {
|
|
258
108
|
switch (variant) {
|
|
259
109
|
case "subtitle1":
|
|
260
110
|
return "4";
|
|
@@ -268,86 +118,20 @@ function Heading2(props) {
|
|
|
268
118
|
return size;
|
|
269
119
|
}
|
|
270
120
|
}, [size, variant]);
|
|
271
|
-
return /* @__PURE__ */ (0,
|
|
121
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes3.Heading, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
|
|
272
122
|
}
|
|
273
123
|
|
|
274
|
-
// src/atoms/hover-card.tsx
|
|
275
|
-
var import_themes23 = require("@radix-ui/themes");
|
|
276
|
-
|
|
277
124
|
// src/atoms/icon-button.tsx
|
|
278
|
-
var
|
|
279
|
-
|
|
280
|
-
// src/atoms/inset.tsx
|
|
281
|
-
var import_themes25 = require("@radix-ui/themes");
|
|
282
|
-
|
|
283
|
-
// src/atoms/kbd.tsx
|
|
284
|
-
var import_themes26 = require("@radix-ui/themes");
|
|
285
|
-
|
|
286
|
-
// src/atoms/link.tsx
|
|
287
|
-
var import_themes27 = require("@radix-ui/themes");
|
|
288
|
-
var import_react7 = require("react");
|
|
289
|
-
var import_themes28 = require("@radix-ui/themes");
|
|
290
|
-
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
291
|
-
|
|
292
|
-
// src/atoms/popover.tsx
|
|
293
|
-
var import_themes29 = require("@radix-ui/themes");
|
|
294
|
-
|
|
295
|
-
// src/atoms/progress.tsx
|
|
296
|
-
var import_themes30 = require("@radix-ui/themes");
|
|
297
|
-
|
|
298
|
-
// src/atoms/quote.tsx
|
|
299
|
-
var import_themes31 = require("@radix-ui/themes");
|
|
300
|
-
|
|
301
|
-
// src/atoms/radio.tsx
|
|
302
|
-
var import_themes32 = require("@radix-ui/themes");
|
|
303
|
-
|
|
304
|
-
// src/atoms/radio-cards.tsx
|
|
305
|
-
var import_themes33 = require("@radix-ui/themes");
|
|
306
|
-
|
|
307
|
-
// src/atoms/radio-group.tsx
|
|
308
|
-
var import_themes34 = require("@radix-ui/themes");
|
|
309
|
-
|
|
310
|
-
// src/atoms/scroll-area.tsx
|
|
311
|
-
var import_themes35 = require("@radix-ui/themes");
|
|
312
|
-
|
|
313
|
-
// src/atoms/section.tsx
|
|
314
|
-
var import_themes36 = require("@radix-ui/themes");
|
|
315
|
-
|
|
316
|
-
// src/atoms/segmented-control.tsx
|
|
317
|
-
var import_themes37 = require("@radix-ui/themes");
|
|
318
|
-
|
|
319
|
-
// src/atoms/select.tsx
|
|
320
|
-
var import_themes38 = require("@radix-ui/themes");
|
|
321
|
-
|
|
322
|
-
// src/atoms/separator.tsx
|
|
323
|
-
var import_themes39 = require("@radix-ui/themes");
|
|
324
|
-
|
|
325
|
-
// src/atoms/skeleton.tsx
|
|
326
|
-
var import_themes40 = require("@radix-ui/themes");
|
|
327
|
-
|
|
328
|
-
// src/atoms/strong.tsx
|
|
329
|
-
var import_themes41 = require("@radix-ui/themes");
|
|
330
|
-
|
|
331
|
-
// src/atoms/switch.tsx
|
|
332
|
-
var import_themes42 = require("@radix-ui/themes");
|
|
333
|
-
|
|
334
|
-
// src/atoms/tab-nav.tsx
|
|
335
|
-
var import_themes43 = require("@radix-ui/themes");
|
|
336
|
-
|
|
337
|
-
// src/atoms/tabs.tsx
|
|
338
|
-
var import_themes44 = require("@radix-ui/themes");
|
|
339
|
-
|
|
340
|
-
// src/atoms/text-area.tsx
|
|
341
|
-
var import_themes45 = require("@radix-ui/themes");
|
|
125
|
+
var import_themes5 = require("@radix-ui/themes");
|
|
342
126
|
|
|
343
127
|
// src/atoms/typo.tsx
|
|
344
|
-
var
|
|
345
|
-
var
|
|
346
|
-
var
|
|
347
|
-
var Typo = (0,
|
|
128
|
+
var import_themes6 = require("@radix-ui/themes");
|
|
129
|
+
var import_react3 = require("react");
|
|
130
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
131
|
+
var Typo = (0, import_react3.forwardRef)(
|
|
348
132
|
(props, ref) => {
|
|
349
133
|
const _a = props, { size, variant, children } = _a, rest = __objRest(_a, ["size", "variant", "children"]);
|
|
350
|
-
const radixSize = (0,
|
|
134
|
+
const radixSize = (0, import_react3.useMemo)(() => {
|
|
351
135
|
if (size !== void 0)
|
|
352
136
|
return size;
|
|
353
137
|
switch (variant) {
|
|
@@ -360,142 +144,43 @@ var Typo = (0, import_react8.forwardRef)(
|
|
|
360
144
|
return "2";
|
|
361
145
|
}
|
|
362
146
|
}, [size, variant]);
|
|
363
|
-
return /* @__PURE__ */ (0,
|
|
147
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes6.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
|
|
364
148
|
}
|
|
365
149
|
);
|
|
366
150
|
Typo.displayName = "Typo";
|
|
367
151
|
|
|
368
|
-
// src/atoms/text-field.tsx
|
|
369
|
-
var import_themes47 = require("@radix-ui/themes");
|
|
370
|
-
|
|
371
|
-
// src/atoms/tooltip.tsx
|
|
372
|
-
var import_themes48 = require("@radix-ui/themes");
|
|
373
|
-
|
|
374
152
|
// src/atoms/collapse.tsx
|
|
375
|
-
var
|
|
376
|
-
var
|
|
153
|
+
var import_react4 = require("react");
|
|
154
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
377
155
|
function Collapse(props) {
|
|
378
156
|
const { children, closedHeight = "0" } = props;
|
|
379
|
-
const [open, setOpen] = (0,
|
|
157
|
+
const [open, setOpen] = (0, import_react4.useState)(() => {
|
|
380
158
|
return props.open || props.defaultOpen || false;
|
|
381
159
|
});
|
|
382
|
-
(0,
|
|
160
|
+
(0, import_react4.useEffect)(() => {
|
|
383
161
|
if (props.open === void 0)
|
|
384
162
|
return;
|
|
385
163
|
setOpen(props.open);
|
|
386
164
|
}, [props.open]);
|
|
387
|
-
const ref = (0,
|
|
388
|
-
(0,
|
|
165
|
+
const ref = (0, import_react4.useRef)(null);
|
|
166
|
+
(0, import_react4.useEffect)(() => {
|
|
389
167
|
if (!ref.current)
|
|
390
168
|
return;
|
|
391
169
|
ref.current.style.maxHeight = open ? `${ref.current.scrollHeight}px` : closedHeight;
|
|
392
170
|
}, [closedHeight, open]);
|
|
393
|
-
return /* @__PURE__ */ (0,
|
|
171
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "collapse", ref, children });
|
|
394
172
|
}
|
|
395
173
|
|
|
396
|
-
// src/atoms/spinner.tsx
|
|
397
|
-
var import_themes49 = require("@radix-ui/themes");
|
|
398
|
-
|
|
399
|
-
// src/atoms/pagination.tsx
|
|
400
|
-
var import_react10 = require("react");
|
|
401
|
-
|
|
402
174
|
// src/icon.ts
|
|
403
175
|
var import_react_icons = require("@radix-ui/react-icons");
|
|
404
176
|
|
|
405
|
-
// src/atoms/pagination.tsx
|
|
406
|
-
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
407
|
-
|
|
408
|
-
// src/atoms/field-error-wrapper.tsx
|
|
409
|
-
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
410
|
-
|
|
411
|
-
// src/atoms/ellipsis-tooltip.tsx
|
|
412
|
-
var import_react11 = require("react");
|
|
413
|
-
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
414
|
-
|
|
415
|
-
// src/atoms/drawer.tsx
|
|
416
|
-
var Dialog2 = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
417
|
-
|
|
418
|
-
// src/theme/theme-provider.tsx
|
|
419
|
-
var import_themes50 = require("@radix-ui/themes");
|
|
420
|
-
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
421
|
-
|
|
422
|
-
// src/atoms/toast.tsx
|
|
423
|
-
var import_react_icons2 = require("@radix-ui/react-icons");
|
|
424
|
-
var import_react_toastify = require("react-toastify");
|
|
425
|
-
var import_react_toastify2 = require("react-toastify");
|
|
426
|
-
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
427
|
-
|
|
428
|
-
// src/atoms/drawer.tsx
|
|
429
|
-
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
430
|
-
|
|
431
|
-
// src/atoms/form.tsx
|
|
432
|
-
var RadixForm = __toESM(require("@radix-ui/react-form"), 1);
|
|
433
|
-
var import_react12 = require("react");
|
|
434
|
-
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
435
|
-
var Root4 = (0, import_react12.forwardRef)(
|
|
436
|
-
(_a, ref) => {
|
|
437
|
-
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
438
|
-
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
439
|
-
RadixForm.Root,
|
|
440
|
-
__spreadProps(__spreadValues({}, rest), {
|
|
441
|
-
className: `FormRoot ${className || ""}`,
|
|
442
|
-
ref,
|
|
443
|
-
children
|
|
444
|
-
})
|
|
445
|
-
);
|
|
446
|
-
}
|
|
447
|
-
);
|
|
448
|
-
Root4.displayName = "FORM_ROOT";
|
|
449
|
-
var Field2 = (0, import_react12.forwardRef)(
|
|
450
|
-
(_a, ref) => {
|
|
451
|
-
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
452
|
-
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
453
|
-
RadixForm.Field,
|
|
454
|
-
__spreadProps(__spreadValues({}, rest), {
|
|
455
|
-
className: `FormField ${className || ""}`,
|
|
456
|
-
ref,
|
|
457
|
-
children
|
|
458
|
-
})
|
|
459
|
-
);
|
|
460
|
-
}
|
|
461
|
-
);
|
|
462
|
-
Field2.displayName = "FORM_FIELD";
|
|
463
|
-
var Label2 = (0, import_react12.forwardRef)(
|
|
464
|
-
(_a, ref) => {
|
|
465
|
-
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
466
|
-
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
467
|
-
RadixForm.Label,
|
|
468
|
-
__spreadProps(__spreadValues({}, rest), {
|
|
469
|
-
className: `FormLabel ${className || ""}`,
|
|
470
|
-
ref,
|
|
471
|
-
children
|
|
472
|
-
})
|
|
473
|
-
);
|
|
474
|
-
}
|
|
475
|
-
);
|
|
476
|
-
Label2.displayName = "FORM_Label";
|
|
477
|
-
var Message2 = (0, import_react12.forwardRef)(
|
|
478
|
-
(_a, ref) => {
|
|
479
|
-
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
480
|
-
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
481
|
-
RadixForm.Message,
|
|
482
|
-
__spreadProps(__spreadValues({}, rest), {
|
|
483
|
-
className: `FormMessage ${className || ""}`,
|
|
484
|
-
ref,
|
|
485
|
-
children
|
|
486
|
-
})
|
|
487
|
-
);
|
|
488
|
-
}
|
|
489
|
-
);
|
|
490
|
-
Message2.displayName = "FORM_Message";
|
|
491
|
-
|
|
492
177
|
// src/icons/down.tsx
|
|
493
|
-
var
|
|
494
|
-
var
|
|
495
|
-
var TriangleArrowDownIcon =
|
|
178
|
+
var React4 = __toESM(require("react"), 1);
|
|
179
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
180
|
+
var TriangleArrowDownIcon = React4.forwardRef(
|
|
496
181
|
(_a, forwardedRef) => {
|
|
497
182
|
var _b = _a, { color = "currentColor" } = _b, props = __objRest(_b, ["color"]);
|
|
498
|
-
return /* @__PURE__ */ (0,
|
|
183
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
499
184
|
"svg",
|
|
500
185
|
__spreadProps(__spreadValues({
|
|
501
186
|
fill: "none",
|
|
@@ -505,7 +190,7 @@ var TriangleArrowDownIcon = React7.forwardRef(
|
|
|
505
190
|
xmlns: "http://www.w3.org/2000/svg"
|
|
506
191
|
}, props), {
|
|
507
192
|
ref: forwardedRef,
|
|
508
|
-
children: /* @__PURE__ */ (0,
|
|
193
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
509
194
|
"path",
|
|
510
195
|
{
|
|
511
196
|
d: "M7.10844 0.8125H0.891554C0.197392 0.8125 -0.177096 1.62672 0.274659 2.15377L3.3831 5.78029C3.70737 6.1586 4.29263 6.1586 4.6169 5.78029L7.72534 2.15377C8.1771 1.62672 7.80261 0.8125 7.10844 0.8125Z",
|
|
@@ -519,12 +204,12 @@ var TriangleArrowDownIcon = React7.forwardRef(
|
|
|
519
204
|
TriangleArrowDownIcon.displayName = "ArrowDownIcon";
|
|
520
205
|
|
|
521
206
|
// src/icons/up.tsx
|
|
522
|
-
var
|
|
523
|
-
var
|
|
524
|
-
var TriangleArrowUpIcon =
|
|
207
|
+
var React5 = __toESM(require("react"), 1);
|
|
208
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
209
|
+
var TriangleArrowUpIcon = React5.forwardRef(
|
|
525
210
|
(_a, forwardedRef) => {
|
|
526
211
|
var _b = _a, { color = "currentColor" } = _b, props = __objRest(_b, ["color"]);
|
|
527
|
-
return /* @__PURE__ */ (0,
|
|
212
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
528
213
|
"svg",
|
|
529
214
|
__spreadProps(__spreadValues({
|
|
530
215
|
fill: "none",
|
|
@@ -534,7 +219,7 @@ var TriangleArrowUpIcon = React8.forwardRef(
|
|
|
534
219
|
xmlns: "http://www.w3.org/2000/svg"
|
|
535
220
|
}, props), {
|
|
536
221
|
ref: forwardedRef,
|
|
537
|
-
children: /* @__PURE__ */ (0,
|
|
222
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
538
223
|
"path",
|
|
539
224
|
{
|
|
540
225
|
d: "M0.891555 6.1875L7.10845 6.1875C7.80261 6.1875 8.1771 5.37328 7.72534 4.84623L4.6169 1.21971C4.29263 0.841403 3.70737 0.841403 3.3831 1.21971L0.274659 4.84623C-0.177095 5.37328 0.197393 6.1875 0.891555 6.1875Z",
|
|
@@ -549,22 +234,22 @@ TriangleArrowUpIcon.displayName = "ArrowUpIcon";
|
|
|
549
234
|
|
|
550
235
|
// src/molecules/expand-table/row.tsx
|
|
551
236
|
var import_react_table = require("@tanstack/react-table");
|
|
552
|
-
var
|
|
553
|
-
var
|
|
237
|
+
var import_react5 = require("react");
|
|
238
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
554
239
|
function Row(props) {
|
|
555
240
|
const { row, ExpandComp, gridColTemp } = props;
|
|
556
|
-
const [open, setOpen] = (0,
|
|
557
|
-
const onClickRow = (0,
|
|
241
|
+
const [open, setOpen] = (0, import_react5.useState)(false);
|
|
242
|
+
const onClickRow = (0, import_react5.useCallback)(() => {
|
|
558
243
|
var _a;
|
|
559
244
|
(_a = props.onRowClick) == null ? void 0 : _a.call(props, row.original);
|
|
560
245
|
setOpen((prev) => !prev);
|
|
561
246
|
}, [props, row.original]);
|
|
562
|
-
return /* @__PURE__ */ (0,
|
|
247
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
563
248
|
"div",
|
|
564
249
|
{
|
|
565
250
|
className: `tr-wrapper ${ExpandComp ? "expandable" : ""}`,
|
|
566
251
|
children: [
|
|
567
|
-
/* @__PURE__ */ (0,
|
|
252
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
568
253
|
"button",
|
|
569
254
|
{
|
|
570
255
|
className: "tr",
|
|
@@ -574,7 +259,7 @@ function Row(props) {
|
|
|
574
259
|
children: row.getVisibleCells().map((cell) => {
|
|
575
260
|
var _a, _b;
|
|
576
261
|
const autoSize = (_a = cell.column.columnDef.meta) == null ? void 0 : _a.autoSize;
|
|
577
|
-
return /* @__PURE__ */ (0,
|
|
262
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
578
263
|
"div",
|
|
579
264
|
{
|
|
580
265
|
className: "td",
|
|
@@ -584,7 +269,7 @@ function Row(props) {
|
|
|
584
269
|
},
|
|
585
270
|
children: [
|
|
586
271
|
(0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()),
|
|
587
|
-
((_b = cell.column.columnDef.meta) == null ? void 0 : _b.OpenBtn) ? /* @__PURE__ */ (0,
|
|
272
|
+
((_b = cell.column.columnDef.meta) == null ? void 0 : _b.OpenBtn) ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
588
273
|
cell.column.columnDef.meta.OpenBtn,
|
|
589
274
|
{
|
|
590
275
|
data: row.original,
|
|
@@ -600,7 +285,7 @@ function Row(props) {
|
|
|
600
285
|
},
|
|
601
286
|
`tr_${row.id}`
|
|
602
287
|
),
|
|
603
|
-
ExpandComp ? /* @__PURE__ */ (0,
|
|
288
|
+
ExpandComp ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Collapse, { open, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "expand-comp-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ExpandComp, { row }) }) }) : null
|
|
604
289
|
]
|
|
605
290
|
},
|
|
606
291
|
`tr-wrapper_${row.id}`
|
|
@@ -608,10 +293,10 @@ function Row(props) {
|
|
|
608
293
|
}
|
|
609
294
|
|
|
610
295
|
// src/molecules/expand-table/index.tsx
|
|
611
|
-
var
|
|
296
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
612
297
|
function ExpandTable(props) {
|
|
613
298
|
const { data, columns, ExpandComp, placeholder, onRowClick } = props;
|
|
614
|
-
const [sorting, setSorting] = (0,
|
|
299
|
+
const [sorting, setSorting] = (0, import_react6.useState)([]);
|
|
615
300
|
const { getRowModel, getHeaderGroups } = (0, import_react_table2.useReactTable)({
|
|
616
301
|
data: data || [],
|
|
617
302
|
columns,
|
|
@@ -622,7 +307,7 @@ function ExpandTable(props) {
|
|
|
622
307
|
},
|
|
623
308
|
onSortingChange: setSorting
|
|
624
309
|
});
|
|
625
|
-
const gridColTemp = (0,
|
|
310
|
+
const gridColTemp = (0, import_react6.useMemo)(() => {
|
|
626
311
|
return columns.map((col) => {
|
|
627
312
|
var _a;
|
|
628
313
|
if ((_a = col.meta) == null ? void 0 : _a.autoSize)
|
|
@@ -631,8 +316,8 @@ function ExpandTable(props) {
|
|
|
631
316
|
}).join(" ");
|
|
632
317
|
}, [columns]);
|
|
633
318
|
const rowModels = getRowModel();
|
|
634
|
-
return /* @__PURE__ */ (0,
|
|
635
|
-
/* @__PURE__ */ (0,
|
|
319
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "expand-table", children: [
|
|
320
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
636
321
|
"div",
|
|
637
322
|
{
|
|
638
323
|
className: "tr",
|
|
@@ -640,30 +325,30 @@ function ExpandTable(props) {
|
|
|
640
325
|
children: headerGroup.headers.map((header) => {
|
|
641
326
|
const sortable = header.column.getCanSort();
|
|
642
327
|
const sortedState = header.column.getIsSorted();
|
|
643
|
-
return /* @__PURE__ */ (0,
|
|
328
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "th", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
644
329
|
"button",
|
|
645
330
|
{
|
|
646
331
|
onClick: header.column.getToggleSortingHandler(),
|
|
647
332
|
style: sortable ? { cursor: "pointer" } : void 0,
|
|
648
333
|
type: "button",
|
|
649
334
|
children: [
|
|
650
|
-
/* @__PURE__ */ (0,
|
|
335
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Typo, { variant: "body", children: (0, import_react_table2.flexRender)(
|
|
651
336
|
header.column.columnDef.header,
|
|
652
337
|
header.getContext()
|
|
653
338
|
) }),
|
|
654
|
-
sortable ? /* @__PURE__ */ (0,
|
|
655
|
-
|
|
339
|
+
sortable ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
340
|
+
import_themes2.Flex,
|
|
656
341
|
{
|
|
657
342
|
direction: "column",
|
|
658
343
|
style: { marginLeft: "var(--space-2)" },
|
|
659
344
|
children: [
|
|
660
|
-
/* @__PURE__ */ (0,
|
|
345
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
661
346
|
TriangleArrowUpIcon,
|
|
662
347
|
{
|
|
663
348
|
color: sortedState === "asc" ? "var(--iris-10)" : "var(--iris-6)"
|
|
664
349
|
}
|
|
665
350
|
),
|
|
666
|
-
/* @__PURE__ */ (0,
|
|
351
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
667
352
|
TriangleArrowDownIcon,
|
|
668
353
|
{
|
|
669
354
|
color: sortedState === "desc" ? "var(--iris-10)" : "var(--iris-6)"
|
|
@@ -679,10 +364,10 @@ function ExpandTable(props) {
|
|
|
679
364
|
},
|
|
680
365
|
headerGroup.id
|
|
681
366
|
)) }),
|
|
682
|
-
/* @__PURE__ */ (0,
|
|
683
|
-
rowModels.rows.length === 0 && /* @__PURE__ */ (0,
|
|
367
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "tbody", children: [
|
|
368
|
+
rowModels.rows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "tr", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes2.Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Typo, { color: "gray", mb: "6", mt: "6", variant: "body", children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder"),
|
|
684
369
|
rowModels.rows.map((row) => {
|
|
685
|
-
return /* @__PURE__ */ (0,
|
|
370
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
686
371
|
Row,
|
|
687
372
|
{
|
|
688
373
|
ExpandComp,
|
|
@@ -698,15 +383,15 @@ function ExpandTable(props) {
|
|
|
698
383
|
}
|
|
699
384
|
|
|
700
385
|
// src/molecules/navigation.tsx
|
|
701
|
-
var
|
|
386
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
702
387
|
function Navigation({
|
|
703
388
|
items,
|
|
704
389
|
fontColor,
|
|
705
390
|
backgroundColor,
|
|
706
391
|
activeKey
|
|
707
392
|
}) {
|
|
708
|
-
return /* @__PURE__ */ (0,
|
|
709
|
-
|
|
393
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
394
|
+
import_themes2.Flex,
|
|
710
395
|
{
|
|
711
396
|
direction: "column",
|
|
712
397
|
gap: "4",
|
|
@@ -717,13 +402,13 @@ function Navigation({
|
|
|
717
402
|
},
|
|
718
403
|
children: items == null ? void 0 : items.map((item) => {
|
|
719
404
|
const { key, title, icon, itemRender, onClick, children } = item;
|
|
720
|
-
return /* @__PURE__ */ (0,
|
|
721
|
-
itemRender ? itemRender(item) : /* @__PURE__ */ (0,
|
|
405
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_themes2.Flex, { direction: "column", onClick, children: [
|
|
406
|
+
itemRender ? itemRender(item) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_themes2.Flex, { align: "center", gap: "3", height: "36px", pl: "4", pr: "4", children: [
|
|
722
407
|
icon,
|
|
723
|
-
/* @__PURE__ */ (0,
|
|
408
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Typo, { variant: "subtitle", children: title })
|
|
724
409
|
] }),
|
|
725
410
|
children == null ? void 0 : children.map((menu) => {
|
|
726
|
-
return menu.itemRender ? menu.itemRender(menu) : /* @__PURE__ */ (0,
|
|
411
|
+
return menu.itemRender ? menu.itemRender(menu) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
727
412
|
Button,
|
|
728
413
|
{
|
|
729
414
|
className: `tipp-navigation-button ${activeKey === menu.key ? "active" : ""}`,
|
|
@@ -743,14 +428,14 @@ function Navigation({
|
|
|
743
428
|
}
|
|
744
429
|
|
|
745
430
|
// src/molecules/date-picker/index.tsx
|
|
746
|
-
var
|
|
431
|
+
var import_react7 = require("react");
|
|
747
432
|
var RDP = __toESM(require("react-datepicker"), 1);
|
|
748
|
-
var
|
|
433
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
749
434
|
var ReactDatePicker = RDP.default.default || RDP.default || RDP;
|
|
750
|
-
var DatePicker = (0,
|
|
435
|
+
var DatePicker = (0, import_react7.forwardRef)(
|
|
751
436
|
(props, ref) => {
|
|
752
437
|
const _a = props, { size = "medium" } = _a, rest = __objRest(_a, ["size"]);
|
|
753
|
-
return /* @__PURE__ */ (0,
|
|
438
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
754
439
|
ReactDatePicker,
|
|
755
440
|
__spreadProps(__spreadValues({
|
|
756
441
|
dateFormat: "yyyy/MM/dd",
|
|
@@ -778,33 +463,33 @@ var renderCustomHeader = (props) => {
|
|
|
778
463
|
} = props;
|
|
779
464
|
const year = date.getFullYear();
|
|
780
465
|
const month = date.getMonth();
|
|
781
|
-
return /* @__PURE__ */ (0,
|
|
782
|
-
/* @__PURE__ */ (0,
|
|
783
|
-
|
|
466
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_themes2.Flex, { align: "center", justify: "between", pb: "2", pl: "2", pr: "2", children: [
|
|
467
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
468
|
+
import_themes5.IconButton,
|
|
784
469
|
{
|
|
785
470
|
disabled: prevMonthButtonDisabled,
|
|
786
471
|
onClick: decreaseMonth,
|
|
787
472
|
variant: "ghost",
|
|
788
|
-
children: /* @__PURE__ */ (0,
|
|
473
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_icons.ChevronLeftIcon, {})
|
|
789
474
|
}
|
|
790
475
|
),
|
|
791
|
-
/* @__PURE__ */ (0,
|
|
792
|
-
/* @__PURE__ */ (0,
|
|
476
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_themes2.Flex, { gap: "3", children: [
|
|
477
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Heading2, { variant: "subtitle1", weight: "regular", children: [
|
|
793
478
|
year,
|
|
794
479
|
"\uB144"
|
|
795
480
|
] }),
|
|
796
|
-
/* @__PURE__ */ (0,
|
|
481
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Heading2, { variant: "subtitle1", weight: "regular", children: [
|
|
797
482
|
month + 1,
|
|
798
483
|
"\uC6D4"
|
|
799
484
|
] })
|
|
800
485
|
] }),
|
|
801
|
-
/* @__PURE__ */ (0,
|
|
802
|
-
|
|
486
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
487
|
+
import_themes5.IconButton,
|
|
803
488
|
{
|
|
804
489
|
disabled: nextMonthButtonDisabled,
|
|
805
490
|
onClick: increaseMonth,
|
|
806
491
|
variant: "ghost",
|
|
807
|
-
children: /* @__PURE__ */ (0,
|
|
492
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_icons.ChevronRightIcon, {})
|
|
808
493
|
}
|
|
809
494
|
)
|
|
810
495
|
] });
|