@tipp/ui 1.2.13 → 1.2.15
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/badge.cjs +2 -0
- package/dist/atoms/badge.cjs.map +1 -1
- package/dist/atoms/badge.d.cts +2 -2
- package/dist/atoms/badge.d.ts +2 -2
- package/dist/atoms/badge.js +1 -1
- package/dist/atoms/dialog.cjs +24 -58
- package/dist/atoms/dialog.cjs.map +1 -1
- package/dist/atoms/dialog.js +1 -3
- package/dist/atoms/drawer.cjs +7 -50
- package/dist/atoms/drawer.cjs.map +1 -1
- package/dist/atoms/drawer.d.cts +1 -1
- package/dist/atoms/drawer.d.ts +1 -1
- package/dist/atoms/drawer.js +1 -4
- package/dist/atoms/field-error-wrapper.js +2 -2
- package/dist/atoms/index.cjs +116 -131
- package/dist/atoms/index.cjs.map +1 -1
- package/dist/atoms/index.js +46 -47
- package/dist/atoms/pagination.js +2 -2
- package/dist/atoms/toast.cjs +7 -10
- package/dist/atoms/toast.cjs.map +1 -1
- package/dist/atoms/toast.js +1 -2
- package/dist/chunk-2FIAJ3FS.js +59 -0
- package/dist/chunk-2FIAJ3FS.js.map +1 -0
- package/dist/chunk-2QDLO3YM.js +97 -0
- package/dist/chunk-2QDLO3YM.js.map +1 -0
- package/dist/chunk-33YXJNZC.js +39 -0
- package/dist/chunk-33YXJNZC.js.map +1 -0
- package/dist/chunk-3PKH6B5Q.js +90 -0
- package/dist/chunk-3PKH6B5Q.js.map +1 -0
- package/dist/chunk-3QK6FAST.js +88 -0
- package/dist/chunk-3QK6FAST.js.map +1 -0
- package/dist/chunk-4BPB2XGG.js +94 -0
- package/dist/chunk-4BPB2XGG.js.map +1 -0
- package/dist/chunk-4LU6NFEH.js +59 -0
- package/dist/chunk-4LU6NFEH.js.map +1 -0
- package/dist/chunk-4SMYMKD7.js +59 -0
- package/dist/chunk-4SMYMKD7.js.map +1 -0
- package/dist/chunk-5T5OBKU6.js +38 -0
- package/dist/chunk-5T5OBKU6.js.map +1 -0
- package/dist/chunk-6IUPU7DC.js +44 -0
- package/dist/chunk-6IUPU7DC.js.map +1 -0
- package/dist/chunk-6MWBFGPV.js +44 -0
- package/dist/chunk-6MWBFGPV.js.map +1 -0
- package/dist/chunk-7JIZ5JRE.js +97 -0
- package/dist/chunk-7JIZ5JRE.js.map +1 -0
- package/dist/chunk-7MGIYERY.js +340 -0
- package/dist/chunk-7MGIYERY.js.map +1 -0
- package/dist/chunk-7MGKSZWD.js +59 -0
- package/dist/chunk-7MGKSZWD.js.map +1 -0
- package/dist/chunk-7NEEBOE5.js +59 -0
- package/dist/chunk-7NEEBOE5.js.map +1 -0
- package/dist/chunk-7TLF23E7.js +50 -0
- package/dist/chunk-7TLF23E7.js.map +1 -0
- package/dist/chunk-AAAQKCFX.js +39 -0
- package/dist/chunk-AAAQKCFX.js.map +1 -0
- package/dist/chunk-AOUTNRVR.js +94 -0
- package/dist/chunk-AOUTNRVR.js.map +1 -0
- package/dist/chunk-AOY2722L.js +43 -0
- package/dist/chunk-AOY2722L.js.map +1 -0
- package/dist/chunk-CA3KCVF3.js +44 -0
- package/dist/chunk-CA3KCVF3.js.map +1 -0
- package/dist/chunk-DWRAPSVA.js +94 -0
- package/dist/chunk-DWRAPSVA.js.map +1 -0
- package/dist/chunk-E2EF6AJK.js +340 -0
- package/dist/chunk-E2EF6AJK.js.map +1 -0
- package/dist/chunk-EBIISCYP.js +59 -0
- package/dist/chunk-EBIISCYP.js.map +1 -0
- package/dist/chunk-EWD4AO5N.js +49 -0
- package/dist/chunk-EWD4AO5N.js.map +1 -0
- package/dist/chunk-EYP37NAX.js +39 -0
- package/dist/chunk-EYP37NAX.js.map +1 -0
- package/dist/chunk-FLPWMNPQ.js +340 -0
- package/dist/chunk-FLPWMNPQ.js.map +1 -0
- package/dist/chunk-FYQHXVVC.js +39 -0
- package/dist/chunk-FYQHXVVC.js.map +1 -0
- package/dist/chunk-G653JNTD.js +59 -0
- package/dist/chunk-G653JNTD.js.map +1 -0
- package/dist/chunk-G7BR6KSX.js +130 -0
- package/dist/chunk-G7BR6KSX.js.map +1 -0
- package/dist/chunk-GXID5CO5.js +92 -0
- package/dist/chunk-GXID5CO5.js.map +1 -0
- package/dist/chunk-HDIMW26M.js +40 -0
- package/dist/chunk-HDIMW26M.js.map +1 -0
- package/dist/chunk-HJQQMAUB.js +50 -0
- package/dist/chunk-HJQQMAUB.js.map +1 -0
- package/dist/chunk-HMLPXWJ6.js +94 -0
- package/dist/chunk-HMLPXWJ6.js.map +1 -0
- package/dist/chunk-HWJLK6WM.js +39 -0
- package/dist/chunk-HWJLK6WM.js.map +1 -0
- package/dist/chunk-I2PIGNYP.js +97 -0
- package/dist/chunk-I2PIGNYP.js.map +1 -0
- package/dist/chunk-IX7WVKHI.js +59 -0
- package/dist/chunk-IX7WVKHI.js.map +1 -0
- package/dist/chunk-J4DYXLNJ.js +88 -0
- package/dist/chunk-J4DYXLNJ.js.map +1 -0
- package/dist/chunk-JGEN42KT.js +35 -0
- package/dist/chunk-JGEN42KT.js.map +1 -0
- package/dist/chunk-KK5BCWBR.js +42 -0
- package/dist/chunk-KK5BCWBR.js.map +1 -0
- package/dist/chunk-KLOQQGZ3.js +42 -0
- package/dist/chunk-KLOQQGZ3.js.map +1 -0
- package/dist/chunk-KVGCDBJ4.js +42 -0
- package/dist/chunk-KVGCDBJ4.js.map +1 -0
- package/dist/chunk-L3UVJ67X.js +340 -0
- package/dist/chunk-L3UVJ67X.js.map +1 -0
- package/dist/chunk-LS64FVRE.js +59 -0
- package/dist/chunk-LS64FVRE.js.map +1 -0
- package/dist/chunk-LVXTFKVJ.js +49 -0
- package/dist/chunk-LVXTFKVJ.js.map +1 -0
- package/dist/chunk-MFVWAA4Y.js +56 -0
- package/dist/chunk-MFVWAA4Y.js.map +1 -0
- package/dist/chunk-MKYNSWMI.js +340 -0
- package/dist/chunk-MKYNSWMI.js.map +1 -0
- package/dist/chunk-NJTNP47L.js +340 -0
- package/dist/chunk-NJTNP47L.js.map +1 -0
- package/dist/chunk-NUEMI3QO.js +340 -0
- package/dist/chunk-NUEMI3QO.js.map +1 -0
- package/dist/chunk-NY6E6TKU.js +94 -0
- package/dist/chunk-NY6E6TKU.js.map +1 -0
- package/dist/chunk-OJQJLBBK.js +39 -0
- package/dist/chunk-OJQJLBBK.js.map +1 -0
- package/dist/chunk-P7633BEQ.js +340 -0
- package/dist/chunk-P7633BEQ.js.map +1 -0
- package/dist/chunk-P7NBEL7J.js +88 -0
- package/dist/chunk-P7NBEL7J.js.map +1 -0
- package/dist/chunk-PLXOVGG4.js +39 -0
- package/dist/chunk-PLXOVGG4.js.map +1 -0
- package/dist/chunk-PT5CZAR3.js +94 -0
- package/dist/chunk-PT5CZAR3.js.map +1 -0
- package/dist/chunk-PXABCUAT.js +44 -0
- package/dist/chunk-PXABCUAT.js.map +1 -0
- package/dist/chunk-QNYKTW7L.js +45 -0
- package/dist/chunk-QNYKTW7L.js.map +1 -0
- package/dist/chunk-QVQCTPDU.js +130 -0
- package/dist/chunk-QVQCTPDU.js.map +1 -0
- package/dist/chunk-RXCENPRG.js +38 -0
- package/dist/chunk-RXCENPRG.js.map +1 -0
- package/dist/chunk-SSI6JRBA.js +92 -0
- package/dist/chunk-SSI6JRBA.js.map +1 -0
- package/dist/chunk-T2DBM2OA.js +59 -0
- package/dist/chunk-T2DBM2OA.js.map +1 -0
- package/dist/chunk-TAU5LFOR.js +39 -0
- package/dist/chunk-TAU5LFOR.js.map +1 -0
- package/dist/chunk-UFW4DFY5.js +39 -0
- package/dist/chunk-UFW4DFY5.js.map +1 -0
- package/dist/chunk-US7J5XUZ.js +36 -0
- package/dist/chunk-US7J5XUZ.js.map +1 -0
- package/dist/chunk-VPHZV3J2.js +340 -0
- package/dist/chunk-VPHZV3J2.js.map +1 -0
- package/dist/chunk-WZJWP4AC.js +59 -0
- package/dist/chunk-WZJWP4AC.js.map +1 -0
- package/dist/chunk-X2VREBVY.js +39 -0
- package/dist/chunk-X2VREBVY.js.map +1 -0
- package/dist/chunk-X55DKUZS.js +39 -0
- package/dist/chunk-X55DKUZS.js.map +1 -0
- package/dist/chunk-XFPO6ULS.js +39 -0
- package/dist/chunk-XFPO6ULS.js.map +1 -0
- package/dist/chunk-XKOYSFH4.js +43 -0
- package/dist/chunk-XKOYSFH4.js.map +1 -0
- package/dist/chunk-XXKNNYIJ.js +59 -0
- package/dist/chunk-XXKNNYIJ.js.map +1 -0
- package/dist/chunk-Y3L7BYDF.js +169 -0
- package/dist/chunk-Y3L7BYDF.js.map +1 -0
- package/dist/chunk-YA3PXLPU.js +53 -0
- package/dist/chunk-YA3PXLPU.js.map +1 -0
- package/dist/chunk-YAAL4JEU.js +59 -0
- package/dist/chunk-YAAL4JEU.js.map +1 -0
- package/dist/chunk-YESWEUM2.js +1 -0
- package/dist/chunk-YESWEUM2.js.map +1 -0
- package/dist/chunk-YILB2DTL.js +39 -0
- package/dist/chunk-YILB2DTL.js.map +1 -0
- package/dist/chunk-YNVFLDKB.js +92 -0
- package/dist/chunk-YNVFLDKB.js.map +1 -0
- package/dist/chunk-YSBOFKXT.js +39 -0
- package/dist/chunk-YSBOFKXT.js.map +1 -0
- package/dist/chunk-YTYGMU6L.js +169 -0
- package/dist/chunk-YTYGMU6L.js.map +1 -0
- package/dist/chunk-ZC7IMWRE.js +38 -0
- package/dist/chunk-ZC7IMWRE.js.map +1 -0
- package/dist/chunk-ZUUS4QZE.js +59 -0
- package/dist/chunk-ZUUS4QZE.js.map +1 -0
- package/dist/chunk-ZYNW3VYG.js +53 -0
- package/dist/chunk-ZYNW3VYG.js.map +1 -0
- package/dist/index.cjs +244 -252
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +67 -38
- package/dist/index.css.map +1 -1
- package/dist/index.js +72 -72
- package/dist/molecules/date-picker/index.js +2 -2
- package/dist/molecules/expand-table/index.js +24 -25
- package/dist/molecules/expand-table/row.js +21 -22
- package/dist/molecules/index.cjs +26 -24
- package/dist/molecules/index.cjs.map +1 -1
- package/dist/molecules/index.js +28 -29
- package/dist/molecules/navigation.js +22 -23
- package/dist/molecules/stepper.js +3 -3
- package/dist/molecules/tag-selector.cjs +2 -0
- package/dist/molecules/tag-selector.cjs.map +1 -1
- package/dist/molecules/tag-selector.js +22 -23
- package/package.json +1 -1
- package/src/atoms/badge.tsx +3 -1
- package/src/atoms/dialog.tsx +0 -2
- package/src/atoms/drawer.tsx +8 -14
- package/src/atoms/toast.tsx +12 -19
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import {
|
|
2
|
+
ThemeProvider
|
|
3
|
+
} from "./chunk-BVBX6IJ3.js";
|
|
4
|
+
import {
|
|
5
|
+
ToastContainer
|
|
6
|
+
} from "./chunk-X2VREBVY.js";
|
|
7
|
+
import {
|
|
8
|
+
__objRest,
|
|
9
|
+
__spreadProps,
|
|
10
|
+
__spreadValues
|
|
11
|
+
} from "./chunk-N552FDTV.js";
|
|
12
|
+
|
|
13
|
+
// src/atoms/drawer.tsx
|
|
14
|
+
import { useEffect, useRef } from "react";
|
|
15
|
+
import * as Dialog from "@radix-ui/react-dialog";
|
|
16
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
17
|
+
function Root2(props) {
|
|
18
|
+
return /* @__PURE__ */ jsx(Dialog.Root, __spreadValues({}, props));
|
|
19
|
+
}
|
|
20
|
+
function Content2(props) {
|
|
21
|
+
const _a = props, { position = "right", className, children } = _a, rest = __objRest(_a, ["position", "className", "children"]);
|
|
22
|
+
const containerRef = useRef(null);
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
containerRef.current = document.getElementsByClassName("radix-themes")[0];
|
|
25
|
+
}, []);
|
|
26
|
+
return /* @__PURE__ */ jsx(Dialog.Portal, { container: containerRef.current, children: /* @__PURE__ */ jsxs(ThemeProvider, { children: [
|
|
27
|
+
/* @__PURE__ */ jsx(Dialog.Overlay, { className: "DrawerOverlay" }),
|
|
28
|
+
/* @__PURE__ */ jsxs(
|
|
29
|
+
Dialog.Content,
|
|
30
|
+
__spreadProps(__spreadValues({
|
|
31
|
+
className: `DrawerContent ${position} ${className || ""}`
|
|
32
|
+
}, rest), {
|
|
33
|
+
children: [
|
|
34
|
+
/* @__PURE__ */ jsx(ToastContainer, {}),
|
|
35
|
+
children
|
|
36
|
+
]
|
|
37
|
+
})
|
|
38
|
+
)
|
|
39
|
+
] }) });
|
|
40
|
+
}
|
|
41
|
+
function Trigger2(props) {
|
|
42
|
+
return /* @__PURE__ */ jsx(Dialog.Trigger, __spreadValues({ asChild: true }, props));
|
|
43
|
+
}
|
|
44
|
+
var Drawer = {
|
|
45
|
+
Root: Dialog.Root,
|
|
46
|
+
Trigger: Trigger2,
|
|
47
|
+
Content: Content2,
|
|
48
|
+
Close: Dialog.Close,
|
|
49
|
+
Title: Dialog.Title,
|
|
50
|
+
Description: Dialog.Description
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
export {
|
|
54
|
+
Root2 as Root,
|
|
55
|
+
Content2 as Content,
|
|
56
|
+
Trigger2 as Trigger,
|
|
57
|
+
Drawer
|
|
58
|
+
};
|
|
59
|
+
//# sourceMappingURL=chunk-XXKNNYIJ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/atoms/drawer.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { ThemeProvider } from '../theme/theme-provider';\nimport { ToastContainer } from './toast';\n\nexport function Root(props: Dialog.DialogProps): React.ReactNode {\n return <Dialog.Root {...props} />;\n}\n\ntype ContentProps = Dialog.DialogContentProps & {\n /** Drawer가 붙는 위치, 기본값 right */\n position?: 'left' | 'right' | 'bottom' | 'top';\n};\n\nexport function Content(props: ContentProps): React.ReactNode {\n const { position = 'right', className, children, ...rest } = props;\n\n const containerRef = useRef<Element | null>(null);\n\n useEffect(() => {\n containerRef.current = document.getElementsByClassName('radix-themes')[0];\n }, []);\n\n return (\n <Dialog.Portal container={containerRef.current}>\n <ThemeProvider>\n <Dialog.Overlay className=\"DrawerOverlay\" />\n <Dialog.Content\n className={`DrawerContent ${position} ${className || ''}`}\n {...rest}\n >\n <ToastContainer />\n {children}\n </Dialog.Content>\n </ThemeProvider>\n </Dialog.Portal>\n );\n}\n\nexport function Trigger(props: Dialog.DialogTriggerProps): React.ReactNode {\n return <Dialog.Trigger asChild {...props} />;\n}\n\nexport const Drawer = {\n Root: Dialog.Root,\n Trigger,\n Content,\n Close: Dialog.Close,\n Title: Dialog.Title,\n Description: Dialog.Description,\n};\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAgB,WAAW,cAAc;AACzC,YAAY,YAAY;AAKf,cAqBD,YArBC;AADF,SAASA,MAAK,OAA4C;AAC/D,SAAO,oBAAQ,aAAP,mBAAgB,MAAO;AACjC;AAOO,SAASC,SAAQ,OAAsC;AAC5D,QAA6D,YAArD,aAAW,SAAS,WAAW,SAfzC,IAe+D,IAAT,iBAAS,IAAT,CAA5C,YAAoB,aAAW;AAEvC,QAAM,eAAe,OAAuB,IAAI;AAEhD,YAAU,MAAM;AACd,iBAAa,UAAU,SAAS,uBAAuB,cAAc,EAAE,CAAC;AAAA,EAC1E,GAAG,CAAC,CAAC;AAEL,SACE,oBAAQ,eAAP,EAAc,WAAW,aAAa,SACrC,+BAAC,iBACC;AAAA,wBAAQ,gBAAP,EAAe,WAAU,iBAAgB;AAAA,IAC1C;AAAA,MAAQ;AAAA,MAAP;AAAA,QACC,WAAW,iBAAiB,QAAQ,IAAI,aAAa,EAAE;AAAA,SACnD,OAFL;AAAA,QAIC;AAAA,8BAAC,kBAAe;AAAA,UACf;AAAA;AAAA;AAAA,IACH;AAAA,KACF,GACF;AAEJ;AAEO,SAASC,SAAQ,OAAmD;AACzE,SAAO,oBAAQ,gBAAP,iBAAe,SAAO,QAAK,MAAO;AAC5C;AAEO,IAAM,SAAS;AAAA,EACpB,MAAa;AAAA,EACb,SAAAA;AAAA,EACA,SAAAD;AAAA,EACA,OAAc;AAAA,EACd,OAAc;AAAA,EACd,aAAoB;AACtB;","names":["Root","Content","Trigger"]}
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Flex
|
|
3
|
+
} from "./chunk-25HMMI7R.js";
|
|
4
|
+
import {
|
|
5
|
+
Typo
|
|
6
|
+
} from "./chunk-52MVZ6AN.js";
|
|
7
|
+
import {
|
|
8
|
+
CheckIcon
|
|
9
|
+
} from "./chunk-66C4U3BG.js";
|
|
10
|
+
import {
|
|
11
|
+
Avatar
|
|
12
|
+
} from "./chunk-3SSSCLJ5.js";
|
|
13
|
+
|
|
14
|
+
// src/molecules/stepper.tsx
|
|
15
|
+
import { createContext, Children, useContext, useMemo } from "react";
|
|
16
|
+
import { Separator } from "@radix-ui/themes";
|
|
17
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
18
|
+
var StepContext = createContext({
|
|
19
|
+
active: false,
|
|
20
|
+
completed: false,
|
|
21
|
+
index: 0
|
|
22
|
+
});
|
|
23
|
+
function Root(props) {
|
|
24
|
+
const {
|
|
25
|
+
activeStep = 0,
|
|
26
|
+
children,
|
|
27
|
+
width,
|
|
28
|
+
minWidth,
|
|
29
|
+
maxWidth,
|
|
30
|
+
direction = "vertical"
|
|
31
|
+
} = props;
|
|
32
|
+
return /* @__PURE__ */ jsx(
|
|
33
|
+
Flex,
|
|
34
|
+
{
|
|
35
|
+
gap: "3",
|
|
36
|
+
style: {
|
|
37
|
+
width,
|
|
38
|
+
minWidth,
|
|
39
|
+
maxWidth
|
|
40
|
+
},
|
|
41
|
+
children: Children.map(children, (child, index) => {
|
|
42
|
+
return /* @__PURE__ */ jsx(
|
|
43
|
+
StepContext.Provider,
|
|
44
|
+
{
|
|
45
|
+
value: {
|
|
46
|
+
active: index === activeStep,
|
|
47
|
+
completed: index < activeStep,
|
|
48
|
+
index,
|
|
49
|
+
direction
|
|
50
|
+
},
|
|
51
|
+
children: child
|
|
52
|
+
}
|
|
53
|
+
);
|
|
54
|
+
})
|
|
55
|
+
}
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
function Step(props) {
|
|
59
|
+
const { Icon, children } = props;
|
|
60
|
+
const {
|
|
61
|
+
active,
|
|
62
|
+
completed,
|
|
63
|
+
index,
|
|
64
|
+
direction = "vertical"
|
|
65
|
+
} = useContext(StepContext);
|
|
66
|
+
const connector = index > 0 ? /* @__PURE__ */ jsx(
|
|
67
|
+
Separator,
|
|
68
|
+
{
|
|
69
|
+
style: {
|
|
70
|
+
width: `calc(100% - 40px)`,
|
|
71
|
+
position: "absolute",
|
|
72
|
+
top: 16,
|
|
73
|
+
right: `calc(50% + 26px)`
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
) : null;
|
|
77
|
+
const InnerStep = useMemo(() => {
|
|
78
|
+
if (active) {
|
|
79
|
+
return ActiveStep;
|
|
80
|
+
}
|
|
81
|
+
if (completed) {
|
|
82
|
+
return CompleteStep;
|
|
83
|
+
}
|
|
84
|
+
return IncompleteStep;
|
|
85
|
+
}, [completed, active]);
|
|
86
|
+
return /* @__PURE__ */ jsxs(
|
|
87
|
+
Flex,
|
|
88
|
+
{
|
|
89
|
+
align: "center",
|
|
90
|
+
direction: direction === "horizontal" ? "row" : "column",
|
|
91
|
+
gap: "4",
|
|
92
|
+
position: "relative",
|
|
93
|
+
style: { flex: 1 },
|
|
94
|
+
children: [
|
|
95
|
+
connector,
|
|
96
|
+
/* @__PURE__ */ jsx(InnerStep, { Icon, children })
|
|
97
|
+
]
|
|
98
|
+
}
|
|
99
|
+
);
|
|
100
|
+
}
|
|
101
|
+
function CompleteStep(props) {
|
|
102
|
+
const { Icon, children } = props;
|
|
103
|
+
const { completed, active } = useContext(StepContext);
|
|
104
|
+
const background = "var(--accent-a4)";
|
|
105
|
+
const border = "1px solid var(--accent-7)";
|
|
106
|
+
const color = "var(--accent-contrast)";
|
|
107
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
108
|
+
Icon ? /* @__PURE__ */ jsx(Icon, { active, completed }) : /* @__PURE__ */ jsx(
|
|
109
|
+
Avatar,
|
|
110
|
+
{
|
|
111
|
+
fallback: /* @__PURE__ */ jsx(CheckIcon, { fill: color, height: 16, width: 16 }),
|
|
112
|
+
radius: "full",
|
|
113
|
+
size: "medium",
|
|
114
|
+
style: {
|
|
115
|
+
border,
|
|
116
|
+
background
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
),
|
|
120
|
+
/* @__PURE__ */ jsx(Typo, { align: "center", variant: "caption", children })
|
|
121
|
+
] });
|
|
122
|
+
}
|
|
123
|
+
function IncompleteStep(props) {
|
|
124
|
+
const { Icon, children } = props;
|
|
125
|
+
const { completed, active, index } = useContext(StepContext);
|
|
126
|
+
const background = "var(--gray-5)";
|
|
127
|
+
const color = "var(--gray-a11)";
|
|
128
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
129
|
+
Icon ? /* @__PURE__ */ jsx(Icon, { active, completed }) : /* @__PURE__ */ jsx(
|
|
130
|
+
Avatar,
|
|
131
|
+
{
|
|
132
|
+
fallback: /* @__PURE__ */ jsx(Typo, { style: { color }, children: index + 1 }),
|
|
133
|
+
radius: "full",
|
|
134
|
+
size: "medium",
|
|
135
|
+
style: {
|
|
136
|
+
background
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
),
|
|
140
|
+
/* @__PURE__ */ jsx(Typo, { align: "center", style: { color }, variant: "caption", children })
|
|
141
|
+
] });
|
|
142
|
+
}
|
|
143
|
+
function ActiveStep(props) {
|
|
144
|
+
const { Icon, children } = props;
|
|
145
|
+
const { completed, active, index } = useContext(StepContext);
|
|
146
|
+
const background = "var(--accent-10)";
|
|
147
|
+
const color = "var(--accent-contrast)";
|
|
148
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
149
|
+
Icon ? /* @__PURE__ */ jsx(Icon, { active, completed }) : /* @__PURE__ */ jsx(
|
|
150
|
+
Avatar,
|
|
151
|
+
{
|
|
152
|
+
fallback: /* @__PURE__ */ jsx(Typo, { style: { color }, weight: "bold", children: index + 1 }),
|
|
153
|
+
radius: "full",
|
|
154
|
+
size: "medium",
|
|
155
|
+
style: { background }
|
|
156
|
+
}
|
|
157
|
+
),
|
|
158
|
+
/* @__PURE__ */ jsx(Typo, { align: "center", variant: "caption", weight: "bold", children })
|
|
159
|
+
] });
|
|
160
|
+
}
|
|
161
|
+
var Stepper = {
|
|
162
|
+
Root,
|
|
163
|
+
Step
|
|
164
|
+
};
|
|
165
|
+
|
|
166
|
+
export {
|
|
167
|
+
Stepper
|
|
168
|
+
};
|
|
169
|
+
//# sourceMappingURL=chunk-Y3L7BYDF.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/stepper.tsx"],"sourcesContent":["import React, { createContext, Children, useContext, useMemo } from 'react';\nimport { Separator } from '@radix-ui/themes';\nimport { Flex } from '../atoms/flex';\nimport { Avatar } from '../atoms/avatar';\nimport { CheckIcon } from '../icon';\nimport { Typo } from '../atoms/typo';\n\ninterface StepState extends Pick<StepperProps, 'direction'> {\n active: boolean;\n completed: boolean;\n index: number;\n}\n\nconst StepContext = createContext<StepState>({\n active: false,\n completed: false,\n index: 0,\n});\n\ninterface StepperProps {\n // 활성화된 스텝 인덱스. 0부터 시작\n activeStep?: number;\n children?: React.ReactElement | React.ReactElement[];\n width?: string;\n maxWidth?: string;\n minWidth?: string;\n /** icon과 children의 배치 방향. 기본 값 vertical */\n direction?: 'horizontal' | 'vertical';\n}\n\nfunction Root(props: StepperProps): React.ReactElement {\n const {\n activeStep = 0,\n children,\n width,\n minWidth,\n maxWidth,\n direction = 'vertical',\n } = props;\n\n return (\n <Flex\n gap=\"3\"\n style={{\n width,\n minWidth,\n maxWidth,\n }}\n >\n {Children.map(children, (child, index) => {\n return (\n <StepContext.Provider\n value={{\n active: index === activeStep,\n completed: index < activeStep,\n index,\n direction,\n }}\n >\n {child}\n </StepContext.Provider>\n );\n })}\n </Flex>\n );\n}\n\ninterface StepProps {\n children?: React.ReactNode;\n /** 아이콘 커스텀 필요시 사용 */\n Icon?: (args: { completed: boolean; active: boolean }) => React.ReactElement;\n}\n\nfunction Step(props: StepProps): React.ReactElement {\n const { Icon, children } = props;\n const {\n active,\n completed,\n index,\n direction = 'vertical',\n } = useContext(StepContext);\n\n const connector =\n index > 0 ? (\n <Separator\n style={{\n width: `calc(100% - 40px)`,\n position: 'absolute',\n top: 16,\n right: `calc(50% + 26px)`,\n }}\n />\n ) : null;\n\n const InnerStep = useMemo<(props: StepProps) => React.ReactElement>(() => {\n if (active) {\n return ActiveStep;\n }\n if (completed) {\n return CompleteStep;\n }\n return IncompleteStep;\n }, [completed, active]);\n\n return (\n <Flex\n align=\"center\"\n direction={direction === 'horizontal' ? 'row' : 'column'}\n gap=\"4\"\n position=\"relative\"\n style={{ flex: 1 }}\n >\n {connector}\n <InnerStep Icon={Icon}>{children}</InnerStep>\n </Flex>\n );\n}\n\nfunction CompleteStep(props: StepProps): React.ReactElement {\n const { Icon, children } = props;\n const { completed, active } = useContext(StepContext);\n const background = 'var(--accent-a4)';\n const border = '1px solid var(--accent-7)';\n const color = 'var(--accent-contrast)';\n\n return (\n <>\n {Icon ? (\n <Icon active={active} completed={completed} />\n ) : (\n <Avatar\n fallback={<CheckIcon fill={color} height={16} width={16} />}\n radius=\"full\"\n size=\"medium\"\n style={{\n border,\n background,\n }}\n />\n )}\n <Typo align=\"center\" variant=\"caption\">\n {children}\n </Typo>\n </>\n );\n}\n\nfunction IncompleteStep(props: StepProps): React.ReactElement {\n const { Icon, children } = props;\n const { completed, active, index } = useContext(StepContext);\n const background = 'var(--gray-5)';\n const color = 'var(--gray-a11)';\n return (\n <>\n {Icon ? (\n <Icon active={active} completed={completed} />\n ) : (\n <Avatar\n fallback={<Typo style={{ color }}>{index + 1}</Typo>}\n radius=\"full\"\n size=\"medium\"\n style={{\n background,\n }}\n />\n )}\n <Typo align=\"center\" style={{ color }} variant=\"caption\">\n {children}\n </Typo>\n </>\n );\n}\n\nfunction ActiveStep(props: StepProps): React.ReactElement {\n const { Icon, children } = props;\n const { completed, active, index } = useContext(StepContext);\n const background = 'var(--accent-10)';\n const color = 'var(--accent-contrast)';\n\n return (\n <>\n {Icon ? (\n <Icon active={active} completed={completed} />\n ) : (\n <Avatar\n fallback={\n <Typo style={{ color }} weight=\"bold\">\n {index + 1}\n </Typo>\n }\n radius=\"full\"\n size=\"medium\"\n style={{ background }}\n />\n )}\n <Typo align=\"center\" variant=\"caption\" weight=\"bold\">\n {children}\n </Typo>\n </>\n );\n}\n\nexport const Stepper = {\n Root,\n Step,\n};\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import {
|
|
2
|
+
ThemeProvider
|
|
3
|
+
} from "./chunk-BVBX6IJ3.js";
|
|
4
|
+
import {
|
|
5
|
+
__objRest,
|
|
6
|
+
__spreadProps,
|
|
7
|
+
__spreadValues
|
|
8
|
+
} from "./chunk-N552FDTV.js";
|
|
9
|
+
|
|
10
|
+
// src/atoms/drawer.tsx
|
|
11
|
+
import { useEffect, useRef } from "react";
|
|
12
|
+
import * as Dialog from "@radix-ui/react-dialog";
|
|
13
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
14
|
+
function Root2(props) {
|
|
15
|
+
return /* @__PURE__ */ jsx(Dialog.Root, __spreadValues({}, props));
|
|
16
|
+
}
|
|
17
|
+
function Content2(props) {
|
|
18
|
+
const _a = props, { position = "right", className, children } = _a, rest = __objRest(_a, ["position", "className", "children"]);
|
|
19
|
+
const containerRef = useRef(null);
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
containerRef.current = document.getElementsByClassName("radix-themes")[0];
|
|
22
|
+
}, []);
|
|
23
|
+
return /* @__PURE__ */ jsx(Dialog.Portal, { container: containerRef.current, children: /* @__PURE__ */ jsxs(ThemeProvider, { children: [
|
|
24
|
+
/* @__PURE__ */ jsx(Dialog.Overlay, { className: "DrawerOverlay" }),
|
|
25
|
+
/* @__PURE__ */ jsx(
|
|
26
|
+
Dialog.Content,
|
|
27
|
+
__spreadProps(__spreadValues({
|
|
28
|
+
className: `DrawerContent ${position} ${className || ""}`
|
|
29
|
+
}, rest), {
|
|
30
|
+
children
|
|
31
|
+
})
|
|
32
|
+
)
|
|
33
|
+
] }) });
|
|
34
|
+
}
|
|
35
|
+
function Trigger2(props) {
|
|
36
|
+
return /* @__PURE__ */ jsx(Dialog.Trigger, __spreadValues({ asChild: true }, props));
|
|
37
|
+
}
|
|
38
|
+
var Drawer = {
|
|
39
|
+
Root: Dialog.Root,
|
|
40
|
+
Trigger: Trigger2,
|
|
41
|
+
Content: Content2,
|
|
42
|
+
Close: Dialog.Close,
|
|
43
|
+
Title: Dialog.Title,
|
|
44
|
+
Description: Dialog.Description
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
export {
|
|
48
|
+
Root2 as Root,
|
|
49
|
+
Content2 as Content,
|
|
50
|
+
Trigger2 as Trigger,
|
|
51
|
+
Drawer
|
|
52
|
+
};
|
|
53
|
+
//# sourceMappingURL=chunk-YA3PXLPU.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/atoms/drawer.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { ThemeProvider } from '../theme/theme-provider';\n\nexport function Root(props: Dialog.DialogProps): React.ReactNode {\n return <Dialog.Root {...props} />;\n}\n\ntype ContentProps = Dialog.DialogContentProps & {\n /** Drawer가 붙는 위치, 기본값 right */\n position?: 'left' | 'right' | 'bottom' | 'top';\n};\n\nexport function Content(props: ContentProps): React.ReactNode {\n const { position = 'right', className, children, ...rest } = props;\n\n const containerRef = useRef<Element | null>(null);\n\n useEffect(() => {\n containerRef.current = document.getElementsByClassName('radix-themes')[0];\n }, []);\n\n return (\n <Dialog.Portal container={containerRef.current}>\n <ThemeProvider>\n <Dialog.Overlay className=\"DrawerOverlay\" />\n <Dialog.Content\n className={`DrawerContent ${position} ${className || ''}`}\n {...rest}\n >\n {children}\n </Dialog.Content>\n </ThemeProvider>\n </Dialog.Portal>\n );\n}\n\nexport function Trigger(props: Dialog.DialogTriggerProps): React.ReactNode {\n return <Dialog.Trigger asChild {...props} />;\n}\n\nexport const Drawer = {\n Root: Dialog.Root,\n Trigger,\n Content,\n Close: Dialog.Close,\n Title: Dialog.Title,\n Description: Dialog.Description,\n};\n"],"mappings":";;;;;;;;;;AAAA,SAAgB,WAAW,cAAc;AACzC,YAAY,YAAY;AAIf,cAmBH,YAnBG;AADF,SAASA,MAAK,OAA4C;AAC/D,SAAO,oBAAQ,aAAP,mBAAgB,MAAO;AACjC;AAOO,SAASC,SAAQ,OAAsC;AAC5D,QAA6D,YAArD,aAAW,SAAS,WAAW,SAdzC,IAc+D,IAAT,iBAAS,IAAT,CAA5C,YAAoB,aAAW;AAEvC,QAAM,eAAe,OAAuB,IAAI;AAEhD,YAAU,MAAM;AACd,iBAAa,UAAU,SAAS,uBAAuB,cAAc,EAAE,CAAC;AAAA,EAC1E,GAAG,CAAC,CAAC;AAEL,SACE,oBAAQ,eAAP,EAAc,WAAW,aAAa,SACrC,+BAAC,iBACC;AAAA,wBAAQ,gBAAP,EAAe,WAAU,iBAAgB;AAAA,IAC1C;AAAA,MAAQ;AAAA,MAAP;AAAA,QACC,WAAW,iBAAiB,QAAQ,IAAI,aAAa,EAAE;AAAA,SACnD,OAFL;AAAA,QAIE;AAAA;AAAA,IACH;AAAA,KACF,GACF;AAEJ;AAEO,SAASC,SAAQ,OAAmD;AACzE,SAAO,oBAAQ,gBAAP,iBAAe,SAAO,QAAK,MAAO;AAC5C;AAEO,IAAM,SAAS;AAAA,EACpB,MAAa;AAAA,EACb,SAAAA;AAAA,EACA,SAAAD;AAAA,EACA,OAAc;AAAA,EACd,OAAc;AAAA,EACd,aAAoB;AACtB;","names":["Root","Content","Trigger"]}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import {
|
|
2
|
+
ThemeProvider
|
|
3
|
+
} from "./chunk-BVBX6IJ3.js";
|
|
4
|
+
import {
|
|
5
|
+
ToastContainer
|
|
6
|
+
} from "./chunk-RXCENPRG.js";
|
|
7
|
+
import {
|
|
8
|
+
__objRest,
|
|
9
|
+
__spreadProps,
|
|
10
|
+
__spreadValues
|
|
11
|
+
} from "./chunk-N552FDTV.js";
|
|
12
|
+
|
|
13
|
+
// src/atoms/drawer.tsx
|
|
14
|
+
import { useEffect, useRef } from "react";
|
|
15
|
+
import * as Dialog from "@radix-ui/react-dialog";
|
|
16
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
17
|
+
function Root2(props) {
|
|
18
|
+
return /* @__PURE__ */ jsx(Dialog.Root, __spreadValues({}, props));
|
|
19
|
+
}
|
|
20
|
+
function Content2(props) {
|
|
21
|
+
const _a = props, { position = "right", className, children } = _a, rest = __objRest(_a, ["position", "className", "children"]);
|
|
22
|
+
const containerRef = useRef(null);
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
containerRef.current = document.getElementsByClassName("radix-themes")[0];
|
|
25
|
+
}, []);
|
|
26
|
+
return /* @__PURE__ */ jsx(Dialog.Portal, { container: containerRef.current, children: /* @__PURE__ */ jsxs(ThemeProvider, { children: [
|
|
27
|
+
/* @__PURE__ */ jsx(Dialog.Overlay, { className: "DrawerOverlay" }),
|
|
28
|
+
/* @__PURE__ */ jsxs(
|
|
29
|
+
Dialog.Content,
|
|
30
|
+
__spreadProps(__spreadValues({
|
|
31
|
+
className: `DrawerContent ${position} ${className || ""}`
|
|
32
|
+
}, rest), {
|
|
33
|
+
children: [
|
|
34
|
+
/* @__PURE__ */ jsx(ToastContainer, {}),
|
|
35
|
+
children
|
|
36
|
+
]
|
|
37
|
+
})
|
|
38
|
+
)
|
|
39
|
+
] }) });
|
|
40
|
+
}
|
|
41
|
+
function Trigger2(props) {
|
|
42
|
+
return /* @__PURE__ */ jsx(Dialog.Trigger, __spreadValues({ asChild: true }, props));
|
|
43
|
+
}
|
|
44
|
+
var Drawer = {
|
|
45
|
+
Root: Dialog.Root,
|
|
46
|
+
Trigger: Trigger2,
|
|
47
|
+
Content: Content2,
|
|
48
|
+
Close: Dialog.Close,
|
|
49
|
+
Title: Dialog.Title,
|
|
50
|
+
Description: Dialog.Description
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
export {
|
|
54
|
+
Root2 as Root,
|
|
55
|
+
Content2 as Content,
|
|
56
|
+
Trigger2 as Trigger,
|
|
57
|
+
Drawer
|
|
58
|
+
};
|
|
59
|
+
//# sourceMappingURL=chunk-YAAL4JEU.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/atoms/drawer.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { ThemeProvider } from '../theme/theme-provider';\nimport { ToastContainer } from './toast';\n\nexport function Root(props: Dialog.DialogProps): React.ReactNode {\n return <Dialog.Root {...props} />;\n}\n\ntype ContentProps = Dialog.DialogContentProps & {\n /** Drawer가 붙는 위치, 기본값 right */\n position?: 'left' | 'right' | 'bottom' | 'top';\n};\n\nexport function Content(props: ContentProps): React.ReactNode {\n const { position = 'right', className, children, ...rest } = props;\n\n const containerRef = useRef<Element | null>(null);\n\n useEffect(() => {\n containerRef.current = document.getElementsByClassName('radix-themes')[0];\n }, []);\n\n return (\n <Dialog.Portal container={containerRef.current}>\n <ThemeProvider>\n <Dialog.Overlay className=\"DrawerOverlay\" />\n <Dialog.Content\n className={`DrawerContent ${position} ${className || ''}`}\n {...rest}\n >\n <ToastContainer />\n {children}\n </Dialog.Content>\n </ThemeProvider>\n </Dialog.Portal>\n );\n}\n\nexport function Trigger(props: Dialog.DialogTriggerProps): React.ReactNode {\n return <Dialog.Trigger asChild {...props} />;\n}\n\nexport const Drawer = {\n Root: Dialog.Root,\n Trigger,\n Content,\n Close: Dialog.Close,\n Title: Dialog.Title,\n Description: Dialog.Description,\n};\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAgB,WAAW,cAAc;AACzC,YAAY,YAAY;AAKf,cAqBD,YArBC;AADF,SAASA,MAAK,OAA4C;AAC/D,SAAO,oBAAQ,aAAP,mBAAgB,MAAO;AACjC;AAOO,SAASC,SAAQ,OAAsC;AAC5D,QAA6D,YAArD,aAAW,SAAS,WAAW,SAfzC,IAe+D,IAAT,iBAAS,IAAT,CAA5C,YAAoB,aAAW;AAEvC,QAAM,eAAe,OAAuB,IAAI;AAEhD,YAAU,MAAM;AACd,iBAAa,UAAU,SAAS,uBAAuB,cAAc,EAAE,CAAC;AAAA,EAC1E,GAAG,CAAC,CAAC;AAEL,SACE,oBAAQ,eAAP,EAAc,WAAW,aAAa,SACrC,+BAAC,iBACC;AAAA,wBAAQ,gBAAP,EAAe,WAAU,iBAAgB;AAAA,IAC1C;AAAA,MAAQ;AAAA,MAAP;AAAA,QACC,WAAW,iBAAiB,QAAQ,IAAI,aAAa,EAAE;AAAA,SACnD,OAFL;AAAA,QAIC;AAAA,8BAAC,kBAAe;AAAA,UACf;AAAA;AAAA;AAAA,IACH;AAAA,KACF,GACF;AAEJ;AAEO,SAASC,SAAQ,OAAmD;AACzE,SAAO,oBAAQ,gBAAP,iBAAe,SAAO,QAAK,MAAO;AAC5C;AAEO,IAAM,SAAS;AAAA,EACpB,MAAa;AAAA,EACb,SAAAA;AAAA,EACA,SAAAD;AAAA,EACA,OAAc;AAAA,EACd,OAAc;AAAA,EACd,aAAoB;AACtB;","names":["Root","Content","Trigger"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=chunk-YESWEUM2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import {
|
|
2
|
+
IconButton
|
|
3
|
+
} from "./chunk-O3DNDMV3.js";
|
|
4
|
+
import {
|
|
5
|
+
__spreadValues
|
|
6
|
+
} from "./chunk-N552FDTV.js";
|
|
7
|
+
|
|
8
|
+
// src/atoms/toast.tsx
|
|
9
|
+
import { Cross1Icon } from "@radix-ui/react-icons";
|
|
10
|
+
import { ToastContainer as ToastifyToastContainer } from "react-toastify";
|
|
11
|
+
import { toast } from "react-toastify";
|
|
12
|
+
import { jsx } from "react/jsx-runtime";
|
|
13
|
+
function CloseButton({ closeToast }) {
|
|
14
|
+
return /* @__PURE__ */ jsx(IconButton, { color: "gray", onClick: closeToast, variant: "ghost", children: /* @__PURE__ */ jsx(Cross1Icon, {}) });
|
|
15
|
+
}
|
|
16
|
+
function ToastContainer(props) {
|
|
17
|
+
return /* @__PURE__ */ jsx(
|
|
18
|
+
ToastifyToastContainer,
|
|
19
|
+
__spreadValues({
|
|
20
|
+
autoClose: 5e4,
|
|
21
|
+
closeButton: CloseButton,
|
|
22
|
+
closeOnClick: true,
|
|
23
|
+
draggable: true,
|
|
24
|
+
hideProgressBar: true,
|
|
25
|
+
newestOnTop: true,
|
|
26
|
+
pauseOnFocusLoss: true,
|
|
27
|
+
pauseOnHover: true,
|
|
28
|
+
position: "bottom-right",
|
|
29
|
+
rtl: false,
|
|
30
|
+
style: { zIndex: 999999 }
|
|
31
|
+
}, props)
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export {
|
|
36
|
+
ToastContainer,
|
|
37
|
+
toast
|
|
38
|
+
};
|
|
39
|
+
//# sourceMappingURL=chunk-YILB2DTL.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/atoms/toast.tsx"],"sourcesContent":["import { Cross1Icon, InfoCircledIcon } from '@radix-ui/react-icons';\nimport type { Theme, ToastContainerProps, TypeOptions } from 'react-toastify';\nimport { ToastContainer as ToastifyToastContainer } from 'react-toastify';\nimport { IconButton } from './icon-button';\n\nexport { toast } from 'react-toastify';\n\n// Toast.Icons.error = () => <InfoCircledIcon />;\n// Toast.Icons.warning = () => <InfoCircledIcon />;\n// Toast.Icons.success = () => <InfoCircledIcon />;\n\ninterface CloseButtonProps {\n closeToast: (e: React.MouseEvent<HTMLElement>) => void;\n type: TypeOptions;\n ariaLabel?: string;\n theme: Theme;\n}\nfunction CloseButton({ closeToast }: CloseButtonProps): React.ReactNode {\n return (\n <IconButton color=\"gray\" onClick={closeToast} variant=\"ghost\">\n <Cross1Icon />\n </IconButton>\n );\n}\n\nexport function ToastContainer(props: ToastContainerProps): React.ReactElement {\n return (\n <ToastifyToastContainer\n autoClose={50000}\n closeButton={CloseButton}\n closeOnClick\n draggable\n hideProgressBar\n newestOnTop\n pauseOnFocusLoss\n pauseOnHover\n position=\"bottom-right\"\n rtl={false}\n style={{ zIndex: 999999 }}\n {...props}\n />\n );\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,kBAAmC;AAE5C,SAAS,kBAAkB,8BAA8B;AAGzD,SAAS,aAAa;AAehB;AAHN,SAAS,YAAY,EAAE,WAAW,GAAsC;AACtE,SACE,oBAAC,cAAW,OAAM,QAAO,SAAS,YAAY,SAAQ,SACpD,8BAAC,cAAW,GACd;AAEJ;AAEO,SAAS,eAAe,OAAgD;AAC7E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,aAAa;AAAA,MACb,cAAY;AAAA,MACZ,WAAS;AAAA,MACT,iBAAe;AAAA,MACf,aAAW;AAAA,MACX,kBAAgB;AAAA,MAChB,cAAY;AAAA,MACZ,UAAS;AAAA,MACT,KAAK;AAAA,MACL,OAAO,EAAE,QAAQ,OAAO;AAAA,OACpB;AAAA,EACN;AAEJ;","names":[]}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import {
|
|
2
|
+
toast
|
|
3
|
+
} from "./chunk-PLXOVGG4.js";
|
|
4
|
+
import {
|
|
5
|
+
Button
|
|
6
|
+
} from "./chunk-P3YCIJUP.js";
|
|
7
|
+
import {
|
|
8
|
+
__objRest,
|
|
9
|
+
__spreadProps,
|
|
10
|
+
__spreadValues
|
|
11
|
+
} from "./chunk-N552FDTV.js";
|
|
12
|
+
|
|
13
|
+
// src/atoms/dialog.tsx
|
|
14
|
+
import * as RadixDialog from "@radix-ui/react-dialog";
|
|
15
|
+
import { Cross1Icon } from "@radix-ui/react-icons";
|
|
16
|
+
import { Flex } from "@radix-ui/themes";
|
|
17
|
+
import { useEffect, useRef } from "react";
|
|
18
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
19
|
+
function Content2(props) {
|
|
20
|
+
const _a = props, {
|
|
21
|
+
children,
|
|
22
|
+
style = {},
|
|
23
|
+
width,
|
|
24
|
+
maxWidth,
|
|
25
|
+
minWidth,
|
|
26
|
+
maxHeight,
|
|
27
|
+
height,
|
|
28
|
+
minHeight
|
|
29
|
+
} = _a, rest = __objRest(_a, [
|
|
30
|
+
"children",
|
|
31
|
+
"style",
|
|
32
|
+
"width",
|
|
33
|
+
"maxWidth",
|
|
34
|
+
"minWidth",
|
|
35
|
+
"maxHeight",
|
|
36
|
+
"height",
|
|
37
|
+
"minHeight"
|
|
38
|
+
]);
|
|
39
|
+
const containerRef = useRef(null);
|
|
40
|
+
useEffect(() => {
|
|
41
|
+
containerRef.current = document.getElementsByClassName("radix-themes")[0];
|
|
42
|
+
}, []);
|
|
43
|
+
toast.error("");
|
|
44
|
+
return /* @__PURE__ */ jsx(RadixDialog.Portal, { container: containerRef.current, children: /* @__PURE__ */ jsx(RadixDialog.Overlay, { className: "DialogOverlay", children: /* @__PURE__ */ jsx(
|
|
45
|
+
RadixDialog.Content,
|
|
46
|
+
__spreadProps(__spreadValues({
|
|
47
|
+
className: "DialogContent",
|
|
48
|
+
style: __spreadValues({
|
|
49
|
+
width,
|
|
50
|
+
maxWidth,
|
|
51
|
+
minWidth,
|
|
52
|
+
maxHeight,
|
|
53
|
+
height,
|
|
54
|
+
minHeight
|
|
55
|
+
}, style)
|
|
56
|
+
}, rest), {
|
|
57
|
+
children: /* @__PURE__ */ jsxs(Flex, { direction: "column", style: { position: "relative" }, children: [
|
|
58
|
+
/* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, className: "DialogClose", children: /* @__PURE__ */ jsx(Button, { color: "gray", variant: "transparent", children: /* @__PURE__ */ jsx(Cross1Icon, { height: "18px", width: "18px" }) }) }),
|
|
59
|
+
children
|
|
60
|
+
] })
|
|
61
|
+
})
|
|
62
|
+
) }) });
|
|
63
|
+
}
|
|
64
|
+
function Close2(_a) {
|
|
65
|
+
var _b = _a, {
|
|
66
|
+
children
|
|
67
|
+
} = _b, rest = __objRest(_b, [
|
|
68
|
+
"children"
|
|
69
|
+
]);
|
|
70
|
+
return /* @__PURE__ */ jsx(RadixDialog.Close, __spreadProps(__spreadValues({ asChild: true }, rest), { children }));
|
|
71
|
+
}
|
|
72
|
+
function Trigger2(_a) {
|
|
73
|
+
var _b = _a, {
|
|
74
|
+
children
|
|
75
|
+
} = _b, rest = __objRest(_b, [
|
|
76
|
+
"children"
|
|
77
|
+
]);
|
|
78
|
+
return /* @__PURE__ */ jsx(RadixDialog.Trigger, __spreadProps(__spreadValues({ asChild: true }, rest), { children }));
|
|
79
|
+
}
|
|
80
|
+
var Dialog = {
|
|
81
|
+
Root: RadixDialog.Root,
|
|
82
|
+
Trigger: Trigger2,
|
|
83
|
+
Content: Content2,
|
|
84
|
+
Close: Close2,
|
|
85
|
+
Description: RadixDialog.Description,
|
|
86
|
+
Title: RadixDialog.Title
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
export {
|
|
90
|
+
Dialog
|
|
91
|
+
};
|
|
92
|
+
//# sourceMappingURL=chunk-YNVFLDKB.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/atoms/dialog.tsx"],"sourcesContent":["import * as RadixDialog from '@radix-ui/react-dialog';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { Flex } from '@radix-ui/themes';\nimport { useEffect, useRef } from 'react';\nimport { Button } from './button';\nimport { toast, ToastContainer } from './toast';\n\ntype ContentProps = RadixDialog.DialogContentProps & {\n width?: string;\n maxWidth?: string;\n minWidth?: string;\n height?: string;\n maxHeight?: string;\n minHeight?: string;\n};\n\nfunction Content(props: ContentProps): React.ReactElement {\n const {\n children,\n style = {},\n width,\n maxWidth,\n minWidth,\n maxHeight,\n height,\n minHeight,\n ...rest\n } = props;\n const containerRef = useRef<Element | null>(null);\n\n useEffect(() => {\n containerRef.current = document.getElementsByClassName('radix-themes')[0];\n }, []);\n\n toast.error('');\n\n return (\n <RadixDialog.Portal container={containerRef.current}>\n <RadixDialog.Overlay className=\"DialogOverlay\">\n <RadixDialog.Content\n className=\"DialogContent\"\n style={{\n width,\n maxWidth,\n minWidth,\n maxHeight,\n height,\n minHeight,\n ...style,\n }}\n {...rest}\n >\n <Flex direction=\"column\" style={{ position: 'relative' }}>\n <RadixDialog.Close asChild className=\"DialogClose\">\n <Button color=\"gray\" variant=\"transparent\">\n <Cross1Icon height=\"18px\" width=\"18px\" />\n </Button>\n </RadixDialog.Close>\n {children}\n </Flex>\n </RadixDialog.Content>\n </RadixDialog.Overlay>\n </RadixDialog.Portal>\n );\n}\n\nfunction Close({\n children,\n ...rest\n}: RadixDialog.DialogCloseProps): React.ReactElement {\n return (\n <RadixDialog.Close asChild {...rest}>\n {children}\n </RadixDialog.Close>\n );\n}\n\nfunction Trigger({\n children,\n ...rest\n}: RadixDialog.DialogTriggerProps): React.ReactElement {\n return (\n <RadixDialog.Trigger asChild {...rest}>\n {children}\n </RadixDialog.Trigger>\n );\n}\n\nexport const Dialog = {\n Root: RadixDialog.Root,\n Trigger,\n Content,\n Close,\n Description: RadixDialog.Description,\n Title: RadixDialog.Title,\n};\n"],"mappings":";;;;;;;;;;;;;AAAA,YAAY,iBAAiB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,WAAW,cAAc;AAiDxB,SAGM,KAHN;AApCV,SAASA,SAAQ,OAAyC;AACxD,QAUI,YATF;AAAA;AAAA,IACA,QAAQ,CAAC;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAzBJ,IA2BM,IADC,iBACD,IADC;AAAA,IARH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGF,QAAM,eAAe,OAAuB,IAAI;AAEhD,YAAU,MAAM;AACd,iBAAa,UAAU,SAAS,uBAAuB,cAAc,EAAE,CAAC;AAAA,EAC1E,GAAG,CAAC,CAAC;AAEL,QAAM,MAAM,EAAE;AAEd,SACE,oBAAa,oBAAZ,EAAmB,WAAW,aAAa,SAC1C,8BAAa,qBAAZ,EAAoB,WAAU,iBAC7B;AAAA,IAAa;AAAA,IAAZ;AAAA,MACC,WAAU;AAAA,MACV,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,SACG;AAAA,OAED,OAXL;AAAA,MAaC,+BAAC,QAAK,WAAU,UAAS,OAAO,EAAE,UAAU,WAAW,GACrD;AAAA,4BAAa,mBAAZ,EAAkB,SAAO,MAAC,WAAU,eACnC,8BAAC,UAAO,OAAM,QAAO,SAAQ,eAC3B,8BAAC,cAAW,QAAO,QAAO,OAAM,QAAO,GACzC,GACF;AAAA,QACC;AAAA,SACH;AAAA;AAAA,EACF,GACF,GACF;AAEJ;AAEA,SAASC,OAAM,IAGsC;AAHtC,eACb;AAAA;AAAA,EAnEF,IAkEe,IAEV,iBAFU,IAEV;AAAA,IADH;AAAA;AAGA,SACE,oBAAa,mBAAZ,+BAAkB,SAAO,QAAK,OAA9B,EACE,WACH;AAEJ;AAEA,SAASC,SAAQ,IAGsC;AAHtC,eACf;AAAA;AAAA,EA9EF,IA6EiB,IAEZ,iBAFY,IAEZ;AAAA,IADH;AAAA;AAGA,SACE,oBAAa,qBAAZ,+BAAoB,SAAO,QAAK,OAAhC,EACE,WACH;AAEJ;AAEO,IAAM,SAAS;AAAA,EACpB,MAAkB;AAAA,EAClB,SAAAA;AAAA,EACA,SAAAF;AAAA,EACA,OAAAC;AAAA,EACA,aAAyB;AAAA,EACzB,OAAmB;AACrB;","names":["Content","Close","Trigger"]}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import {
|
|
2
|
+
IconButton
|
|
3
|
+
} from "./chunk-O3DNDMV3.js";
|
|
4
|
+
import {
|
|
5
|
+
__spreadValues
|
|
6
|
+
} from "./chunk-N552FDTV.js";
|
|
7
|
+
|
|
8
|
+
// src/atoms/toast.tsx
|
|
9
|
+
import { Cross1Icon } from "@radix-ui/react-icons";
|
|
10
|
+
import { ToastContainer as ToastifyToastContainer } from "react-toastify";
|
|
11
|
+
import { toast } from "react-toastify";
|
|
12
|
+
import { jsx } from "react/jsx-runtime";
|
|
13
|
+
function CloseButton({ closeToast }) {
|
|
14
|
+
return /* @__PURE__ */ jsx(IconButton, { color: "gray", onClick: closeToast, variant: "ghost", children: /* @__PURE__ */ jsx(Cross1Icon, {}) });
|
|
15
|
+
}
|
|
16
|
+
function ToastContainer(props) {
|
|
17
|
+
return /* @__PURE__ */ jsx(
|
|
18
|
+
ToastifyToastContainer,
|
|
19
|
+
__spreadValues({
|
|
20
|
+
autoClose: 5e5,
|
|
21
|
+
closeButton: CloseButton,
|
|
22
|
+
closeOnClick: true,
|
|
23
|
+
draggable: true,
|
|
24
|
+
hideProgressBar: true,
|
|
25
|
+
newestOnTop: true,
|
|
26
|
+
pauseOnFocusLoss: true,
|
|
27
|
+
pauseOnHover: true,
|
|
28
|
+
position: "bottom-right",
|
|
29
|
+
rtl: false,
|
|
30
|
+
style: { zIndex: 999999 }
|
|
31
|
+
}, props)
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export {
|
|
36
|
+
ToastContainer,
|
|
37
|
+
toast
|
|
38
|
+
};
|
|
39
|
+
//# sourceMappingURL=chunk-YSBOFKXT.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/atoms/toast.tsx"],"sourcesContent":["import { Cross1Icon } from '@radix-ui/react-icons';\nimport type { Theme, ToastContainerProps, TypeOptions } from 'react-toastify';\nimport { ToastContainer as ToastifyToastContainer } from 'react-toastify';\nimport { IconButton } from './icon-button';\n\nexport { toast } from 'react-toastify';\n\ninterface CloseButtonProps {\n closeToast: (e: React.MouseEvent<HTMLElement>) => void;\n type: TypeOptions;\n ariaLabel?: string;\n theme: Theme;\n}\nfunction CloseButton({ closeToast }: CloseButtonProps): React.ReactNode {\n return (\n <IconButton color=\"gray\" onClick={closeToast} variant=\"ghost\">\n <Cross1Icon />\n </IconButton>\n );\n}\n\nexport function ToastContainer(props: ToastContainerProps): React.ReactElement {\n return (\n <ToastifyToastContainer\n autoClose={500000}\n closeButton={CloseButton}\n closeOnClick\n draggable\n hideProgressBar\n newestOnTop\n pauseOnFocusLoss\n pauseOnHover\n position=\"bottom-right\"\n rtl={false}\n style={{ zIndex: 999999 }}\n {...props}\n />\n );\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,kBAAkB;AAE3B,SAAS,kBAAkB,8BAA8B;AAGzD,SAAS,aAAa;AAWhB;AAHN,SAAS,YAAY,EAAE,WAAW,GAAsC;AACtE,SACE,oBAAC,cAAW,OAAM,QAAO,SAAS,YAAY,SAAQ,SACpD,8BAAC,cAAW,GACd;AAEJ;AAEO,SAAS,eAAe,OAAgD;AAC7E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,aAAa;AAAA,MACb,cAAY;AAAA,MACZ,WAAS;AAAA,MACT,iBAAe;AAAA,MACf,aAAW;AAAA,MACX,kBAAgB;AAAA,MAChB,cAAY;AAAA,MACZ,UAAS;AAAA,MACT,KAAK;AAAA,MACL,OAAO,EAAE,QAAQ,OAAO;AAAA,OACpB;AAAA,EACN;AAEJ;","names":[]}
|