@tipp/ui 1.0.21 → 1.0.23
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/collapse.cjs +3 -3
- package/dist/atoms/collapse.cjs.map +1 -1
- package/dist/atoms/collapse.d.cts +2 -0
- package/dist/atoms/collapse.d.ts +2 -0
- package/dist/atoms/collapse.js +1 -1
- package/dist/atoms/drawer.js +2 -2
- package/dist/atoms/index.cjs +87 -157
- package/dist/atoms/index.cjs.map +1 -1
- package/dist/atoms/index.d.cts +0 -2
- package/dist/atoms/index.d.ts +0 -2
- package/dist/atoms/index.js +6 -10
- package/dist/atoms/pagination.cjs.map +1 -1
- package/dist/atoms/pagination.js +2 -2
- package/dist/chunk-5CFPIB7Q.js +53 -0
- package/dist/chunk-5CFPIB7Q.js.map +1 -0
- package/dist/chunk-AGMMAML3.js +1 -0
- package/dist/chunk-AGMMAML3.js.map +1 -0
- package/dist/chunk-GGCFVE6F.js +91 -0
- package/dist/chunk-GGCFVE6F.js.map +1 -0
- package/dist/chunk-HHEG6S3Q.js +91 -0
- package/dist/chunk-HHEG6S3Q.js.map +1 -0
- package/dist/chunk-HI6IQ6QL.js +104 -0
- package/dist/chunk-HI6IQ6QL.js.map +1 -0
- package/dist/chunk-KGLIAFTI.js +26 -0
- package/dist/chunk-KGLIAFTI.js.map +1 -0
- package/dist/chunk-KHHXN3CH.js +1 -0
- package/dist/chunk-KHHXN3CH.js.map +1 -0
- package/dist/chunk-KO2GTLZU.js +119 -0
- package/dist/chunk-KO2GTLZU.js.map +1 -0
- package/dist/chunk-KSCEKSVS.js +91 -0
- package/dist/chunk-KSCEKSVS.js.map +1 -0
- package/dist/chunk-KT7IAGCF.js +119 -0
- package/dist/chunk-KT7IAGCF.js.map +1 -0
- package/dist/chunk-OCDOKW5S.js +119 -0
- package/dist/chunk-OCDOKW5S.js.map +1 -0
- package/dist/chunk-PKVWFUW5.js +104 -0
- package/dist/chunk-PKVWFUW5.js.map +1 -0
- package/dist/chunk-SOXSHT2H.js +91 -0
- package/dist/chunk-SOXSHT2H.js.map +1 -0
- package/dist/chunk-XHNYNSZZ.js +70 -0
- package/dist/chunk-XHNYNSZZ.js.map +1 -0
- package/dist/chunk-ZUAJNIBO.js +104 -0
- package/dist/chunk-ZUAJNIBO.js.map +1 -0
- package/dist/icon.cjs +2 -0
- package/dist/icon.cjs.map +1 -1
- package/dist/icon.d.cts +1 -1
- package/dist/icon.d.ts +1 -1
- package/dist/icon.js +3 -1
- package/dist/index.cjs +198 -196
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +20 -18
- package/dist/molecules/date-picker/index.cjs +170 -0
- package/dist/molecules/date-picker/index.cjs.map +1 -0
- package/dist/molecules/date-picker/index.d.cts +10 -0
- package/dist/molecules/date-picker/index.d.ts +10 -0
- package/dist/molecules/date-picker/index.js +12 -0
- package/dist/molecules/date-picker/index.js.map +1 -0
- package/dist/molecules/expand-table/index.cjs +75 -161
- package/dist/molecules/expand-table/index.cjs.map +1 -1
- package/dist/molecules/expand-table/index.js +8 -9
- package/dist/molecules/expand-table/row.cjs +50 -136
- package/dist/molecules/expand-table/row.cjs.map +1 -1
- package/dist/molecules/expand-table/row.js +7 -8
- package/dist/molecules/index.cjs +156 -154
- package/dist/molecules/index.cjs.map +1 -1
- package/dist/molecules/index.d.cts +2 -0
- package/dist/molecules/index.d.ts +2 -0
- package/dist/molecules/index.js +15 -12
- package/dist/molecules/navigation.cjs +40 -126
- package/dist/molecules/navigation.cjs.map +1 -1
- package/dist/molecules/navigation.js +6 -7
- package/package.json +1 -1
- package/src/atoms/collapse.tsx +7 -3
- package/src/atoms/index.ts +1 -2
- package/src/icon.ts +1 -0
- package/src/{atoms → molecules}/date-picker/index.tsx +3 -3
- package/src/molecules/index.ts +1 -0
package/dist/atoms/collapse.cjs
CHANGED
|
@@ -26,7 +26,7 @@ module.exports = __toCommonJS(collapse_exports);
|
|
|
26
26
|
var import_react = require("react");
|
|
27
27
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
28
28
|
function Collapse(props) {
|
|
29
|
-
const { children } = props;
|
|
29
|
+
const { children, closedHeight = "0" } = props;
|
|
30
30
|
const [open, setOpen] = (0, import_react.useState)(() => {
|
|
31
31
|
return props.open || props.defaultOpen || false;
|
|
32
32
|
});
|
|
@@ -39,8 +39,8 @@ function Collapse(props) {
|
|
|
39
39
|
(0, import_react.useEffect)(() => {
|
|
40
40
|
if (!ref.current)
|
|
41
41
|
return;
|
|
42
|
-
ref.current.style.maxHeight = open ? `${ref.current.scrollHeight}px` :
|
|
43
|
-
}, [open]);
|
|
42
|
+
ref.current.style.maxHeight = open ? `${ref.current.scrollHeight}px` : closedHeight;
|
|
43
|
+
}, [closedHeight, open]);
|
|
44
44
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "collapse", ref, children });
|
|
45
45
|
}
|
|
46
46
|
// Annotate the CommonJS export names for ESM import in node:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/atoms/collapse.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nexport interface CollapseProps {\n children: React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n}\n\nexport function Collapse(props: CollapseProps): React.ReactNode {\n const { children } = props;\n const [open, setOpen] = useState(() => {\n return props.open || props.defaultOpen || false;\n });\n\n useEffect(() => {\n if (props.open === undefined) return;\n setOpen(props.open);\n }, [props.open]);\n\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (!ref.current) return;\n ref.current.style.maxHeight = open
|
|
1
|
+
{"version":3,"sources":["../../src/atoms/collapse.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nexport interface CollapseProps {\n children: React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n /** 닫힘 상태일 때 높이 값이 필요할 시 사용 */\n closedHeight?: string;\n}\n\nexport function Collapse(props: CollapseProps): React.ReactNode {\n const { children, closedHeight = '0' } = props;\n const [open, setOpen] = useState(() => {\n return props.open || props.defaultOpen || false;\n });\n\n useEffect(() => {\n if (props.open === undefined) return;\n setOpen(props.open);\n }, [props.open]);\n\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (!ref.current) return;\n ref.current.style.maxHeight = open\n ? `${ref.current.scrollHeight}px`\n : closedHeight;\n }, [closedHeight, open]);\n\n return (\n <div className=\"collapse\" ref={ref}>\n {children}\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmD;AA+B/C;AArBG,SAAS,SAAS,OAAuC;AAC9D,QAAM,EAAE,UAAU,eAAe,IAAI,IAAI;AACzC,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,MAAM;AACrC,WAAO,MAAM,QAAQ,MAAM,eAAe;AAAA,EAC5C,CAAC;AAED,8BAAU,MAAM;AACd,QAAI,MAAM,SAAS;AAAW;AAC9B,YAAQ,MAAM,IAAI;AAAA,EACpB,GAAG,CAAC,MAAM,IAAI,CAAC;AAEf,QAAM,UAAM,qBAAuB,IAAI;AAEvC,8BAAU,MAAM;AACd,QAAI,CAAC,IAAI;AAAS;AAClB,QAAI,QAAQ,MAAM,YAAY,OAC1B,GAAG,IAAI,QAAQ,YAAY,OAC3B;AAAA,EACN,GAAG,CAAC,cAAc,IAAI,CAAC;AAEvB,SACE,4CAAC,SAAI,WAAU,YAAW,KACvB,UACH;AAEJ;","names":[]}
|
package/dist/atoms/collapse.d.ts
CHANGED
package/dist/atoms/collapse.js
CHANGED
package/dist/atoms/drawer.js
CHANGED
|
@@ -3,9 +3,9 @@ import {
|
|
|
3
3
|
Drawer,
|
|
4
4
|
Root,
|
|
5
5
|
Trigger
|
|
6
|
-
} from "../chunk-
|
|
7
|
-
import "../chunk-5XILGULJ.js";
|
|
6
|
+
} from "../chunk-3ANMLRG4.js";
|
|
8
7
|
import "../chunk-PL3Q4UVY.js";
|
|
8
|
+
import "../chunk-5XILGULJ.js";
|
|
9
9
|
import "../chunk-O3DNDMV3.js";
|
|
10
10
|
import "../chunk-N552FDTV.js";
|
|
11
11
|
export {
|
package/dist/atoms/index.cjs
CHANGED
|
@@ -76,18 +76,17 @@ __export(atoms_exports, {
|
|
|
76
76
|
Container: () => import_themes14.Container,
|
|
77
77
|
Content: () => Content2,
|
|
78
78
|
DataList: () => import_themes15.DataList,
|
|
79
|
-
|
|
80
|
-
Dialog: () => import_themes20.Dialog,
|
|
79
|
+
Dialog: () => import_themes16.Dialog,
|
|
81
80
|
Drawer: () => Drawer,
|
|
82
|
-
DropdownMenu: () =>
|
|
81
|
+
DropdownMenu: () => import_themes17.DropdownMenu,
|
|
83
82
|
EllipsisTooltip: () => EllipsisTooltip,
|
|
84
|
-
Em: () =>
|
|
83
|
+
Em: () => import_themes18.Em,
|
|
85
84
|
FieldErrorWrapper: () => FieldErrorWrapper,
|
|
86
|
-
Flex: () =>
|
|
87
|
-
Grid: () =>
|
|
85
|
+
Flex: () => import_themes19.Flex,
|
|
86
|
+
Grid: () => import_themes20.Grid,
|
|
88
87
|
Heading: () => Heading2,
|
|
89
|
-
HoverCard: () =>
|
|
90
|
-
IconButton: () =>
|
|
88
|
+
HoverCard: () => import_themes23.HoverCard,
|
|
89
|
+
IconButton: () => import_themes24.IconButton,
|
|
91
90
|
Inset: () => import_themes25.Inset,
|
|
92
91
|
Kbd: () => import_themes26.Kbd,
|
|
93
92
|
Link: () => Link,
|
|
@@ -282,23 +281,25 @@ var import_themes14 = require("@radix-ui/themes");
|
|
|
282
281
|
// src/atoms/data-list.tsx
|
|
283
282
|
var import_themes15 = require("@radix-ui/themes");
|
|
284
283
|
|
|
285
|
-
// src/atoms/
|
|
286
|
-
var import_react7 = require("react");
|
|
287
|
-
var RDP = __toESM(require("react-datepicker"), 1);
|
|
288
|
-
|
|
289
|
-
// src/atoms/icon-button.tsx
|
|
284
|
+
// src/atoms/dialog.tsx
|
|
290
285
|
var import_themes16 = require("@radix-ui/themes");
|
|
291
286
|
|
|
292
|
-
// src/atoms/
|
|
287
|
+
// src/atoms/dropdown-menu.tsx
|
|
293
288
|
var import_themes17 = require("@radix-ui/themes");
|
|
294
289
|
|
|
295
|
-
// src/
|
|
296
|
-
var
|
|
290
|
+
// src/atoms/em.tsx
|
|
291
|
+
var import_themes18 = require("@radix-ui/themes");
|
|
292
|
+
|
|
293
|
+
// src/atoms/flex.tsx
|
|
294
|
+
var import_themes19 = require("@radix-ui/themes");
|
|
295
|
+
|
|
296
|
+
// src/atoms/grid.tsx
|
|
297
|
+
var import_themes20 = require("@radix-ui/themes");
|
|
297
298
|
|
|
298
299
|
// src/atoms/heading.tsx
|
|
299
|
-
var
|
|
300
|
+
var import_themes21 = require("@radix-ui/themes");
|
|
300
301
|
var import_react6 = require("react");
|
|
301
|
-
var
|
|
302
|
+
var import_themes22 = require("@radix-ui/themes");
|
|
302
303
|
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
303
304
|
function Heading2(props) {
|
|
304
305
|
const _a = props, { size, children, variant } = _a, rest = __objRest(_a, ["size", "children", "variant"]);
|
|
@@ -316,88 +317,13 @@ function Heading2(props) {
|
|
|
316
317
|
return size;
|
|
317
318
|
}
|
|
318
319
|
}, [size, variant]);
|
|
319
|
-
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
320
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_themes21.Heading, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
|
|
320
321
|
}
|
|
321
322
|
|
|
322
|
-
// src/atoms/
|
|
323
|
-
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
324
|
-
var ReactDatePicker = RDP.default.default || RDP.default || RDP;
|
|
325
|
-
var DatePicker = (0, import_react7.forwardRef)(
|
|
326
|
-
(props, ref) => {
|
|
327
|
-
const _a = props, { size = "medium" } = _a, rest = __objRest(_a, ["size"]);
|
|
328
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
329
|
-
ReactDatePicker,
|
|
330
|
-
__spreadProps(__spreadValues({
|
|
331
|
-
dateFormat: "yyyy/MM/dd",
|
|
332
|
-
nextMonthButtonLabel: "\uB2E4\uC74C \uB2EC",
|
|
333
|
-
placeholderText: "yyyy/mm/dd",
|
|
334
|
-
previousMonthButtonLabel: "\uC774\uC804 \uB2EC",
|
|
335
|
-
ref,
|
|
336
|
-
renderCustomHeader,
|
|
337
|
-
showPopperArrow: false
|
|
338
|
-
}, rest), {
|
|
339
|
-
calendarClassName: `tipp_datePicker_calendar ${rest.calendarClassName || ""}`,
|
|
340
|
-
wrapperClassName: `tipp_datePicker ${size} ${rest.wrapperClassName || ""}`
|
|
341
|
-
})
|
|
342
|
-
);
|
|
343
|
-
}
|
|
344
|
-
);
|
|
345
|
-
DatePicker.displayName = "DatePicker";
|
|
346
|
-
var renderCustomHeader = (props) => {
|
|
347
|
-
const {
|
|
348
|
-
date,
|
|
349
|
-
decreaseMonth,
|
|
350
|
-
increaseMonth,
|
|
351
|
-
prevMonthButtonDisabled,
|
|
352
|
-
nextMonthButtonDisabled
|
|
353
|
-
} = props;
|
|
354
|
-
const year = date.getFullYear();
|
|
355
|
-
const month = date.getMonth();
|
|
356
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_themes17.Flex, { align: "center", justify: "between", pb: "2", pl: "2", pr: "2", children: [
|
|
357
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
358
|
-
import_themes16.IconButton,
|
|
359
|
-
{
|
|
360
|
-
disabled: prevMonthButtonDisabled,
|
|
361
|
-
onClick: decreaseMonth,
|
|
362
|
-
variant: "ghost",
|
|
363
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_icons.ChevronLeftIcon, {})
|
|
364
|
-
}
|
|
365
|
-
),
|
|
366
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_themes17.Flex, { gap: "3", children: [
|
|
367
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Heading2, { variant: "subtitle1", weight: "regular", children: [
|
|
368
|
-
year,
|
|
369
|
-
"\uB144"
|
|
370
|
-
] }),
|
|
371
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Heading2, { variant: "subtitle1", weight: "regular", children: [
|
|
372
|
-
month + 1,
|
|
373
|
-
"\uC6D4"
|
|
374
|
-
] })
|
|
375
|
-
] }),
|
|
376
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
377
|
-
import_themes16.IconButton,
|
|
378
|
-
{
|
|
379
|
-
disabled: nextMonthButtonDisabled,
|
|
380
|
-
onClick: increaseMonth,
|
|
381
|
-
variant: "ghost",
|
|
382
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_icons.ChevronRightIcon, {})
|
|
383
|
-
}
|
|
384
|
-
)
|
|
385
|
-
] });
|
|
386
|
-
};
|
|
387
|
-
|
|
388
|
-
// src/atoms/dialog.tsx
|
|
389
|
-
var import_themes20 = require("@radix-ui/themes");
|
|
390
|
-
|
|
391
|
-
// src/atoms/dropdown-menu.tsx
|
|
392
|
-
var import_themes21 = require("@radix-ui/themes");
|
|
393
|
-
|
|
394
|
-
// src/atoms/em.tsx
|
|
395
|
-
var import_themes22 = require("@radix-ui/themes");
|
|
396
|
-
|
|
397
|
-
// src/atoms/grid.tsx
|
|
323
|
+
// src/atoms/hover-card.tsx
|
|
398
324
|
var import_themes23 = require("@radix-ui/themes");
|
|
399
325
|
|
|
400
|
-
// src/atoms/
|
|
326
|
+
// src/atoms/icon-button.tsx
|
|
401
327
|
var import_themes24 = require("@radix-ui/themes");
|
|
402
328
|
|
|
403
329
|
// src/atoms/inset.tsx
|
|
@@ -408,12 +334,12 @@ var import_themes26 = require("@radix-ui/themes");
|
|
|
408
334
|
|
|
409
335
|
// src/atoms/link.tsx
|
|
410
336
|
var import_themes27 = require("@radix-ui/themes");
|
|
411
|
-
var
|
|
337
|
+
var import_react7 = require("react");
|
|
412
338
|
var import_themes28 = require("@radix-ui/themes");
|
|
413
|
-
var
|
|
339
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
414
340
|
function Link(props) {
|
|
415
341
|
const _a = props, { size, children, variant } = _a, rest = __objRest(_a, ["size", "children", "variant"]);
|
|
416
|
-
const radixSize = (0,
|
|
342
|
+
const radixSize = (0, import_react7.useMemo)(() => {
|
|
417
343
|
switch (variant) {
|
|
418
344
|
case "caption":
|
|
419
345
|
return "1";
|
|
@@ -425,7 +351,7 @@ function Link(props) {
|
|
|
425
351
|
return size;
|
|
426
352
|
}
|
|
427
353
|
}, [size, variant]);
|
|
428
|
-
return /* @__PURE__ */ (0,
|
|
354
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_themes27.Link, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
|
|
429
355
|
}
|
|
430
356
|
|
|
431
357
|
// src/atoms/popover.tsx
|
|
@@ -481,12 +407,12 @@ var import_themes45 = require("@radix-ui/themes");
|
|
|
481
407
|
|
|
482
408
|
// src/atoms/typo.tsx
|
|
483
409
|
var import_themes46 = require("@radix-ui/themes");
|
|
484
|
-
var
|
|
485
|
-
var
|
|
486
|
-
var Typo = (0,
|
|
410
|
+
var import_react8 = require("react");
|
|
411
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
412
|
+
var Typo = (0, import_react8.forwardRef)(
|
|
487
413
|
(props, ref) => {
|
|
488
414
|
const _a = props, { size, variant, children } = _a, rest = __objRest(_a, ["size", "variant", "children"]);
|
|
489
|
-
const radixSize = (0,
|
|
415
|
+
const radixSize = (0, import_react8.useMemo)(() => {
|
|
490
416
|
if (size !== void 0)
|
|
491
417
|
return size;
|
|
492
418
|
switch (variant) {
|
|
@@ -499,7 +425,7 @@ var Typo = (0, import_react9.forwardRef)(
|
|
|
499
425
|
return "2";
|
|
500
426
|
}
|
|
501
427
|
}, [size, variant]);
|
|
502
|
-
return /* @__PURE__ */ (0,
|
|
428
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes46.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
|
|
503
429
|
}
|
|
504
430
|
);
|
|
505
431
|
Typo.displayName = "Typo";
|
|
@@ -511,38 +437,43 @@ var import_themes47 = require("@radix-ui/themes");
|
|
|
511
437
|
var import_themes48 = require("@radix-ui/themes");
|
|
512
438
|
|
|
513
439
|
// src/atoms/collapse.tsx
|
|
514
|
-
var
|
|
515
|
-
var
|
|
440
|
+
var import_react9 = require("react");
|
|
441
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
516
442
|
function Collapse(props) {
|
|
517
|
-
const { children } = props;
|
|
518
|
-
const [open, setOpen] = (0,
|
|
443
|
+
const { children, closedHeight = "0" } = props;
|
|
444
|
+
const [open, setOpen] = (0, import_react9.useState)(() => {
|
|
519
445
|
return props.open || props.defaultOpen || false;
|
|
520
446
|
});
|
|
521
|
-
(0,
|
|
447
|
+
(0, import_react9.useEffect)(() => {
|
|
522
448
|
if (props.open === void 0)
|
|
523
449
|
return;
|
|
524
450
|
setOpen(props.open);
|
|
525
451
|
}, [props.open]);
|
|
526
|
-
const ref = (0,
|
|
527
|
-
(0,
|
|
452
|
+
const ref = (0, import_react9.useRef)(null);
|
|
453
|
+
(0, import_react9.useEffect)(() => {
|
|
528
454
|
if (!ref.current)
|
|
529
455
|
return;
|
|
530
|
-
ref.current.style.maxHeight = open ? `${ref.current.scrollHeight}px` :
|
|
531
|
-
}, [open]);
|
|
532
|
-
return /* @__PURE__ */ (0,
|
|
456
|
+
ref.current.style.maxHeight = open ? `${ref.current.scrollHeight}px` : closedHeight;
|
|
457
|
+
}, [closedHeight, open]);
|
|
458
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "collapse", ref, children });
|
|
533
459
|
}
|
|
534
460
|
|
|
535
461
|
// src/atoms/spinner.tsx
|
|
536
462
|
var import_themes49 = require("@radix-ui/themes");
|
|
537
463
|
|
|
538
464
|
// src/atoms/pagination.tsx
|
|
539
|
-
var
|
|
540
|
-
|
|
465
|
+
var import_react10 = require("react");
|
|
466
|
+
|
|
467
|
+
// src/icon.ts
|
|
468
|
+
var import_react_icons = require("@radix-ui/react-icons");
|
|
469
|
+
|
|
470
|
+
// src/atoms/pagination.tsx
|
|
471
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
541
472
|
function Pagination(props) {
|
|
542
473
|
const { onChange, count = 0 } = props;
|
|
543
474
|
const siblingCount = 2;
|
|
544
|
-
const [page, setPage] = (0,
|
|
545
|
-
const visibleItems = (0,
|
|
475
|
+
const [page, setPage] = (0, import_react10.useState)(() => props.page || props.defaultPage || 1);
|
|
476
|
+
const visibleItems = (0, import_react10.useMemo)(() => {
|
|
546
477
|
let start = Math.max(1, page - siblingCount);
|
|
547
478
|
let end = Math.min(count, page + siblingCount);
|
|
548
479
|
if (page - siblingCount <= 0 && end < count) {
|
|
@@ -552,18 +483,18 @@ function Pagination(props) {
|
|
|
552
483
|
}
|
|
553
484
|
return Array.from({ length: end - start + 1 }, (_, i) => i + start);
|
|
554
485
|
}, [count, page]);
|
|
555
|
-
(0,
|
|
486
|
+
(0, import_react10.useEffect)(() => {
|
|
556
487
|
onChange == null ? void 0 : onChange(page);
|
|
557
488
|
}, [onChange, page]);
|
|
558
|
-
(0,
|
|
489
|
+
(0, import_react10.useEffect)(() => {
|
|
559
490
|
if (props.page) {
|
|
560
491
|
setPage(props.page);
|
|
561
492
|
}
|
|
562
493
|
}, [props.page]);
|
|
563
|
-
const onClickPrev = (0,
|
|
494
|
+
const onClickPrev = (0, import_react10.useCallback)(() => {
|
|
564
495
|
setPage((prev) => Math.max(1, prev - 1));
|
|
565
496
|
}, []);
|
|
566
|
-
const onClickNext = (0,
|
|
497
|
+
const onClickNext = (0, import_react10.useCallback)(() => {
|
|
567
498
|
setPage((prev) => Math.min(count, prev + 1));
|
|
568
499
|
}, [count]);
|
|
569
500
|
const moveButtonProps = {
|
|
@@ -575,24 +506,24 @@ function Pagination(props) {
|
|
|
575
506
|
height: 24,
|
|
576
507
|
width: 24
|
|
577
508
|
};
|
|
578
|
-
const prevDisabled = (0,
|
|
509
|
+
const prevDisabled = (0, import_react10.useMemo)(() => {
|
|
579
510
|
return page - siblingCount <= 1;
|
|
580
511
|
}, [page]);
|
|
581
|
-
const nextDisabled = (0,
|
|
512
|
+
const nextDisabled = (0, import_react10.useMemo)(() => {
|
|
582
513
|
return page + siblingCount >= count;
|
|
583
514
|
}, [count, page]);
|
|
584
|
-
return /* @__PURE__ */ (0,
|
|
585
|
-
/* @__PURE__ */ (0,
|
|
586
|
-
|
|
515
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_themes19.Flex, { align: "center", className: "tipp-pagination", gap: "4", children: [
|
|
516
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
517
|
+
import_themes24.IconButton,
|
|
587
518
|
__spreadProps(__spreadValues({
|
|
588
519
|
disabled: prevDisabled,
|
|
589
520
|
onClick: onClickPrev
|
|
590
521
|
}, moveButtonProps), {
|
|
591
|
-
children: /* @__PURE__ */ (0,
|
|
522
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_icons.ChevronLeftIcon, __spreadValues({}, iconSize))
|
|
592
523
|
})
|
|
593
524
|
),
|
|
594
|
-
/* @__PURE__ */ (0,
|
|
595
|
-
return /* @__PURE__ */ (0,
|
|
525
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes19.Flex, { gap: "1", children: visibleItems.map((item) => {
|
|
526
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
596
527
|
"button",
|
|
597
528
|
{
|
|
598
529
|
className: `page-button ${item === page ? "active" : ""}`,
|
|
@@ -600,45 +531,45 @@ function Pagination(props) {
|
|
|
600
531
|
setPage(item);
|
|
601
532
|
},
|
|
602
533
|
type: "button",
|
|
603
|
-
children: /* @__PURE__ */ (0,
|
|
534
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Typo, { variant: "body", children: item })
|
|
604
535
|
},
|
|
605
536
|
item
|
|
606
537
|
);
|
|
607
538
|
}) }),
|
|
608
|
-
/* @__PURE__ */ (0,
|
|
609
|
-
|
|
539
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
540
|
+
import_themes24.IconButton,
|
|
610
541
|
__spreadProps(__spreadValues({
|
|
611
542
|
disabled: nextDisabled,
|
|
612
543
|
onClick: onClickNext
|
|
613
544
|
}, moveButtonProps), {
|
|
614
|
-
children: /* @__PURE__ */ (0,
|
|
545
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_icons.ChevronRightIcon, __spreadValues({}, iconSize))
|
|
615
546
|
})
|
|
616
547
|
)
|
|
617
548
|
] });
|
|
618
549
|
}
|
|
619
550
|
|
|
620
551
|
// src/atoms/field-error-wrapper.tsx
|
|
621
|
-
var
|
|
552
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
622
553
|
function FieldErrorWrapper({
|
|
623
554
|
children,
|
|
624
555
|
error
|
|
625
556
|
}) {
|
|
626
|
-
return /* @__PURE__ */ (0,
|
|
557
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_themes19.Flex, { direction: "column", gap: "1", children: [
|
|
627
558
|
children,
|
|
628
|
-
error ? /* @__PURE__ */ (0,
|
|
559
|
+
error ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Typo, { color: "red", variant: "caption", children: error }) : null
|
|
629
560
|
] });
|
|
630
561
|
}
|
|
631
562
|
|
|
632
563
|
// src/atoms/ellipsis-tooltip.tsx
|
|
633
|
-
var
|
|
634
|
-
var
|
|
564
|
+
var import_react11 = require("react");
|
|
565
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
635
566
|
function EllipsisTooltip(props) {
|
|
636
567
|
const _a = props, { children, style, lineClamp = 2 } = _a, rest = __objRest(_a, ["children", "style", "lineClamp"]);
|
|
637
|
-
const ref = (0,
|
|
638
|
-
const [tooltipDisplay, setTooltipDisplay] = (0,
|
|
568
|
+
const ref = (0, import_react11.useRef)(null);
|
|
569
|
+
const [tooltipDisplay, setTooltipDisplay] = (0, import_react11.useState)(
|
|
639
570
|
"none"
|
|
640
571
|
);
|
|
641
|
-
(0,
|
|
572
|
+
(0, import_react11.useEffect)(() => {
|
|
642
573
|
if (ref.current) {
|
|
643
574
|
const typo = ref.current;
|
|
644
575
|
const mouseOver = () => {
|
|
@@ -653,7 +584,7 @@ function EllipsisTooltip(props) {
|
|
|
653
584
|
ref.current.addEventListener("mouseleave", mouseOut);
|
|
654
585
|
}
|
|
655
586
|
}, [children]);
|
|
656
|
-
return /* @__PURE__ */ (0,
|
|
587
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_themes48.Tooltip, { content: children, style: { display: tooltipDisplay }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
657
588
|
Typo,
|
|
658
589
|
__spreadProps(__spreadValues({}, rest), {
|
|
659
590
|
ref,
|
|
@@ -676,21 +607,21 @@ var Dialog2 = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
|
676
607
|
|
|
677
608
|
// src/theme/theme-provider.tsx
|
|
678
609
|
var import_themes50 = require("@radix-ui/themes");
|
|
679
|
-
var
|
|
610
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
680
611
|
function ThemeProvider(props) {
|
|
681
|
-
return /* @__PURE__ */ (0,
|
|
612
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_themes50.Theme, __spreadValues({ accentColor: "iris", radius: "large" }, props));
|
|
682
613
|
}
|
|
683
614
|
|
|
684
615
|
// src/atoms/toast.tsx
|
|
685
616
|
var import_react_icons2 = require("@radix-ui/react-icons");
|
|
686
617
|
var import_react_toastify = require("react-toastify");
|
|
687
618
|
var import_react_toastify2 = require("react-toastify");
|
|
688
|
-
var
|
|
619
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
689
620
|
function CloseButton({ closeToast }) {
|
|
690
|
-
return /* @__PURE__ */ (0,
|
|
621
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes24.IconButton, { color: "gray", onClick: closeToast, variant: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_icons2.Cross1Icon, {}) });
|
|
691
622
|
}
|
|
692
623
|
function ToastContainer(props) {
|
|
693
|
-
return /* @__PURE__ */ (0,
|
|
624
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
694
625
|
import_react_toastify.ToastContainer,
|
|
695
626
|
__spreadValues({
|
|
696
627
|
autoClose: 5e3,
|
|
@@ -708,25 +639,25 @@ function ToastContainer(props) {
|
|
|
708
639
|
}
|
|
709
640
|
|
|
710
641
|
// src/atoms/drawer.tsx
|
|
711
|
-
var
|
|
642
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
712
643
|
function Root3(props) {
|
|
713
|
-
return /* @__PURE__ */ (0,
|
|
644
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog2.Root, __spreadValues({}, props));
|
|
714
645
|
}
|
|
715
646
|
function Content2(props) {
|
|
716
647
|
const _a = props, { position = "right", className } = _a, rest = __objRest(_a, ["position", "className"]);
|
|
717
|
-
return /* @__PURE__ */ (0,
|
|
718
|
-
/* @__PURE__ */ (0,
|
|
719
|
-
/* @__PURE__ */ (0,
|
|
648
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ThemeProvider, { children: [
|
|
649
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog2.Overlay, { className: "DrawerOverlay" }),
|
|
650
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
720
651
|
Dialog2.Content,
|
|
721
652
|
__spreadValues({
|
|
722
653
|
className: `DrawerContent ${position} ${className || ""}`
|
|
723
654
|
}, rest)
|
|
724
655
|
),
|
|
725
|
-
/* @__PURE__ */ (0,
|
|
656
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ToastContainer, {})
|
|
726
657
|
] }) });
|
|
727
658
|
}
|
|
728
659
|
function Trigger2(props) {
|
|
729
|
-
return /* @__PURE__ */ (0,
|
|
660
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog2.Trigger, __spreadValues({ asChild: true }, props));
|
|
730
661
|
}
|
|
731
662
|
var Drawer = {
|
|
732
663
|
Root: Dialog2.Root,
|
|
@@ -755,7 +686,6 @@ var Drawer = {
|
|
|
755
686
|
Container,
|
|
756
687
|
Content,
|
|
757
688
|
DataList,
|
|
758
|
-
DatePicker,
|
|
759
689
|
Dialog,
|
|
760
690
|
Drawer,
|
|
761
691
|
DropdownMenu,
|