@exem-ui/react 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +190 -0
- package/README.en.md +142 -0
- package/README.md +156 -18
- package/dist/index.d.mts +1166 -37
- package/dist/index.d.ts +1166 -37
- package/dist/index.js +3055 -130
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +3016 -27
- package/dist/index.mjs.map +1 -1
- package/package.json +24 -143
- package/dist/Button-CMenVfb7.d.mts +0 -35
- package/dist/Button-CMenVfb7.d.ts +0 -35
- package/dist/Select-DMvWV_rF.d.mts +0 -94
- package/dist/Select-DMvWV_rF.d.ts +0 -94
- package/dist/avatar/index.d.mts +0 -37
- package/dist/avatar/index.d.ts +0 -37
- package/dist/avatar/index.js +0 -13
- package/dist/avatar/index.js.map +0 -1
- package/dist/avatar/index.mjs +0 -4
- package/dist/avatar/index.mjs.map +0 -1
- package/dist/badge/index.d.mts +0 -29
- package/dist/badge/index.d.ts +0 -29
- package/dist/badge/index.js +0 -12
- package/dist/badge/index.js.map +0 -1
- package/dist/badge/index.mjs +0 -3
- package/dist/badge/index.mjs.map +0 -1
- package/dist/breadcrumb/index.d.mts +0 -43
- package/dist/breadcrumb/index.d.ts +0 -43
- package/dist/breadcrumb/index.js +0 -13
- package/dist/breadcrumb/index.js.map +0 -1
- package/dist/breadcrumb/index.mjs +0 -4
- package/dist/breadcrumb/index.mjs.map +0 -1
- package/dist/button/index.d.mts +0 -9
- package/dist/button/index.d.ts +0 -9
- package/dist/button/index.js +0 -29
- package/dist/button/index.js.map +0 -1
- package/dist/button/index.mjs +0 -12
- package/dist/button/index.mjs.map +0 -1
- package/dist/checkbox/index.d.mts +0 -54
- package/dist/checkbox/index.d.ts +0 -54
- package/dist/checkbox/index.js +0 -13
- package/dist/checkbox/index.js.map +0 -1
- package/dist/checkbox/index.mjs +0 -4
- package/dist/checkbox/index.mjs.map +0 -1
- package/dist/chunk-34QIGWCT.mjs +0 -10
- package/dist/chunk-34QIGWCT.mjs.map +0 -1
- package/dist/chunk-3FPMWAQT.js +0 -30
- package/dist/chunk-3FPMWAQT.js.map +0 -1
- package/dist/chunk-3HMT3DQV.js +0 -104
- package/dist/chunk-3HMT3DQV.js.map +0 -1
- package/dist/chunk-4WAO7CUT.mjs +0 -95
- package/dist/chunk-4WAO7CUT.mjs.map +0 -1
- package/dist/chunk-5QX4TO4F.js +0 -61
- package/dist/chunk-5QX4TO4F.js.map +0 -1
- package/dist/chunk-5TEFN2CW.js +0 -97
- package/dist/chunk-5TEFN2CW.js.map +0 -1
- package/dist/chunk-5TES5PG6.js +0 -41
- package/dist/chunk-5TES5PG6.js.map +0 -1
- package/dist/chunk-5TVMECVF.js +0 -148
- package/dist/chunk-5TVMECVF.js.map +0 -1
- package/dist/chunk-5WGNZX7Z.mjs +0 -27
- package/dist/chunk-5WGNZX7Z.mjs.map +0 -1
- package/dist/chunk-AQ3OIM2T.js +0 -103
- package/dist/chunk-AQ3OIM2T.js.map +0 -1
- package/dist/chunk-AU5NTBK3.js +0 -361
- package/dist/chunk-AU5NTBK3.js.map +0 -1
- package/dist/chunk-DJHGCJR4.mjs +0 -224
- package/dist/chunk-DJHGCJR4.mjs.map +0 -1
- package/dist/chunk-DPUTW5KD.mjs +0 -74
- package/dist/chunk-DPUTW5KD.mjs.map +0 -1
- package/dist/chunk-E53FHDVN.mjs +0 -336
- package/dist/chunk-E53FHDVN.mjs.map +0 -1
- package/dist/chunk-ECRQD7UU.js +0 -82
- package/dist/chunk-ECRQD7UU.js.map +0 -1
- package/dist/chunk-FB4ESGOX.mjs +0 -59
- package/dist/chunk-FB4ESGOX.mjs.map +0 -1
- package/dist/chunk-FDX4IQK5.js +0 -76
- package/dist/chunk-FDX4IQK5.js.map +0 -1
- package/dist/chunk-FOMIUDRM.js +0 -96
- package/dist/chunk-FOMIUDRM.js.map +0 -1
- package/dist/chunk-FR5F3VTU.js +0 -139
- package/dist/chunk-FR5F3VTU.js.map +0 -1
- package/dist/chunk-GW53LH3I.mjs +0 -81
- package/dist/chunk-GW53LH3I.mjs.map +0 -1
- package/dist/chunk-GXMRIT5E.mjs +0 -94
- package/dist/chunk-GXMRIT5E.mjs.map +0 -1
- package/dist/chunk-IANSI7F7.mjs +0 -393
- package/dist/chunk-IANSI7F7.mjs.map +0 -1
- package/dist/chunk-IDM6MZHF.js +0 -415
- package/dist/chunk-IDM6MZHF.js.map +0 -1
- package/dist/chunk-J5ZYQ3TP.js +0 -104
- package/dist/chunk-J5ZYQ3TP.js.map +0 -1
- package/dist/chunk-KPAUBWZA.mjs +0 -39
- package/dist/chunk-KPAUBWZA.mjs.map +0 -1
- package/dist/chunk-L7P2NDST.mjs +0 -124
- package/dist/chunk-L7P2NDST.mjs.map +0 -1
- package/dist/chunk-M6OWN7QH.js +0 -118
- package/dist/chunk-M6OWN7QH.js.map +0 -1
- package/dist/chunk-MQVHREEI.js +0 -448
- package/dist/chunk-MQVHREEI.js.map +0 -1
- package/dist/chunk-MT47ECUN.js +0 -127
- package/dist/chunk-MT47ECUN.js.map +0 -1
- package/dist/chunk-N6U54JI4.mjs +0 -126
- package/dist/chunk-N6U54JI4.mjs.map +0 -1
- package/dist/chunk-NDG4LR3Q.js +0 -139
- package/dist/chunk-NDG4LR3Q.js.map +0 -1
- package/dist/chunk-PPD4BU4W.mjs +0 -80
- package/dist/chunk-PPD4BU4W.mjs.map +0 -1
- package/dist/chunk-PU5NO5EZ.js +0 -4
- package/dist/chunk-PU5NO5EZ.js.map +0 -1
- package/dist/chunk-Q442ZDTI.mjs +0 -117
- package/dist/chunk-Q442ZDTI.mjs.map +0 -1
- package/dist/chunk-QH23RO3C.mjs +0 -137
- package/dist/chunk-QH23RO3C.mjs.map +0 -1
- package/dist/chunk-REBHUF4L.js +0 -226
- package/dist/chunk-REBHUF4L.js.map +0 -1
- package/dist/chunk-RGB3QLQT.js +0 -275
- package/dist/chunk-RGB3QLQT.js.map +0 -1
- package/dist/chunk-T7U2QRLC.js +0 -94
- package/dist/chunk-T7U2QRLC.js.map +0 -1
- package/dist/chunk-TEHHJ3CS.mjs +0 -73
- package/dist/chunk-TEHHJ3CS.mjs.map +0 -1
- package/dist/chunk-TJY4MIBC.js +0 -117
- package/dist/chunk-TJY4MIBC.js.map +0 -1
- package/dist/chunk-VCMZQOQM.mjs +0 -102
- package/dist/chunk-VCMZQOQM.mjs.map +0 -1
- package/dist/chunk-VKN4H4WI.mjs +0 -3
- package/dist/chunk-VKN4H4WI.mjs.map +0 -1
- package/dist/chunk-VSB25XTY.js +0 -12
- package/dist/chunk-VSB25XTY.js.map +0 -1
- package/dist/chunk-VWTE74UT.mjs +0 -96
- package/dist/chunk-VWTE74UT.mjs.map +0 -1
- package/dist/chunk-WBTL7PBV.js +0 -105
- package/dist/chunk-WBTL7PBV.js.map +0 -1
- package/dist/chunk-WOK3EP3O.js +0 -83
- package/dist/chunk-WOK3EP3O.js.map +0 -1
- package/dist/chunk-WWT73GGM.mjs +0 -83
- package/dist/chunk-WWT73GGM.mjs.map +0 -1
- package/dist/chunk-XBDXTRK3.mjs +0 -102
- package/dist/chunk-XBDXTRK3.mjs.map +0 -1
- package/dist/chunk-YGBEKZWU.mjs +0 -81
- package/dist/chunk-YGBEKZWU.mjs.map +0 -1
- package/dist/chunk-YVFLRPFV.mjs +0 -72
- package/dist/chunk-YVFLRPFV.mjs.map +0 -1
- package/dist/chunk-ZMVBIQ2Z.mjs +0 -253
- package/dist/chunk-ZMVBIQ2Z.mjs.map +0 -1
- package/dist/chunk-ZWCMSHDP.mjs +0 -425
- package/dist/chunk-ZWCMSHDP.mjs.map +0 -1
- package/dist/flat/index.d.mts +0 -13
- package/dist/flat/index.d.ts +0 -13
- package/dist/flat/index.js +0 -31
- package/dist/flat/index.js.map +0 -1
- package/dist/flat/index.mjs +0 -10
- package/dist/flat/index.mjs.map +0 -1
- package/dist/flat/segment.d.mts +0 -39
- package/dist/flat/segment.d.ts +0 -39
- package/dist/flat/segment.js +0 -13
- package/dist/flat/segment.js.map +0 -1
- package/dist/flat/segment.mjs +0 -4
- package/dist/flat/segment.mjs.map +0 -1
- package/dist/flat/select.d.mts +0 -58
- package/dist/flat/select.d.ts +0 -58
- package/dist/flat/select.js +0 -14
- package/dist/flat/select.js.map +0 -1
- package/dist/flat/select.mjs +0 -5
- package/dist/flat/select.mjs.map +0 -1
- package/dist/flat/tooltip.d.mts +0 -98
- package/dist/flat/tooltip.d.ts +0 -98
- package/dist/flat/tooltip.js +0 -17
- package/dist/flat/tooltip.js.map +0 -1
- package/dist/flat/tooltip.mjs +0 -4
- package/dist/flat/tooltip.mjs.map +0 -1
- package/dist/index-CXip5Wb1.d.mts +0 -62
- package/dist/index-Drz3P-6Y.d.ts +0 -62
- package/dist/input/index.d.mts +0 -82
- package/dist/input/index.d.ts +0 -82
- package/dist/input/index.js +0 -22
- package/dist/input/index.js.map +0 -1
- package/dist/input/index.mjs +0 -5
- package/dist/input/index.mjs.map +0 -1
- package/dist/loading/index.d.mts +0 -54
- package/dist/loading/index.d.ts +0 -54
- package/dist/loading/index.js +0 -12
- package/dist/loading/index.js.map +0 -1
- package/dist/loading/index.mjs +0 -3
- package/dist/loading/index.mjs.map +0 -1
- package/dist/messageBox/index.d.mts +0 -33
- package/dist/messageBox/index.d.ts +0 -33
- package/dist/messageBox/index.js +0 -13
- package/dist/messageBox/index.js.map +0 -1
- package/dist/messageBox/index.mjs +0 -4
- package/dist/messageBox/index.mjs.map +0 -1
- package/dist/modal/index.d.mts +0 -97
- package/dist/modal/index.d.ts +0 -97
- package/dist/modal/index.js +0 -15
- package/dist/modal/index.js.map +0 -1
- package/dist/modal/index.mjs +0 -6
- package/dist/modal/index.mjs.map +0 -1
- package/dist/picker/index.d.mts +0 -12
- package/dist/picker/index.d.ts +0 -12
- package/dist/picker/index.js +0 -13
- package/dist/picker/index.js.map +0 -1
- package/dist/picker/index.mjs +0 -4
- package/dist/picker/index.mjs.map +0 -1
- package/dist/progress/index.d.mts +0 -36
- package/dist/progress/index.d.ts +0 -36
- package/dist/progress/index.js +0 -12
- package/dist/progress/index.js.map +0 -1
- package/dist/progress/index.mjs +0 -3
- package/dist/progress/index.mjs.map +0 -1
- package/dist/radio/index.d.mts +0 -39
- package/dist/radio/index.d.ts +0 -39
- package/dist/radio/index.js +0 -12
- package/dist/radio/index.js.map +0 -1
- package/dist/radio/index.mjs +0 -3
- package/dist/radio/index.mjs.map +0 -1
- package/dist/scrollArea/index.d.mts +0 -31
- package/dist/scrollArea/index.d.ts +0 -31
- package/dist/scrollArea/index.js +0 -16
- package/dist/scrollArea/index.js.map +0 -1
- package/dist/scrollArea/index.mjs +0 -3
- package/dist/scrollArea/index.mjs.map +0 -1
- package/dist/segment/index.d.mts +0 -46
- package/dist/segment/index.d.ts +0 -46
- package/dist/segment/index.js +0 -12
- package/dist/segment/index.js.map +0 -1
- package/dist/segment/index.mjs +0 -3
- package/dist/segment/index.mjs.map +0 -1
- package/dist/star/index.d.mts +0 -30
- package/dist/star/index.d.ts +0 -30
- package/dist/star/index.js +0 -12
- package/dist/star/index.js.map +0 -1
- package/dist/star/index.mjs +0 -3
- package/dist/star/index.mjs.map +0 -1
- package/dist/switch/index.d.mts +0 -32
- package/dist/switch/index.d.ts +0 -32
- package/dist/switch/index.js +0 -12
- package/dist/switch/index.js.map +0 -1
- package/dist/switch/index.mjs +0 -3
- package/dist/switch/index.mjs.map +0 -1
- package/dist/tabs/index.d.mts +0 -52
- package/dist/tabs/index.d.ts +0 -52
- package/dist/tabs/index.js +0 -12
- package/dist/tabs/index.js.map +0 -1
- package/dist/tabs/index.mjs +0 -3
- package/dist/tabs/index.mjs.map +0 -1
- package/dist/tag/index.d.mts +0 -68
- package/dist/tag/index.d.ts +0 -68
- package/dist/tag/index.js +0 -17
- package/dist/tag/index.js.map +0 -1
- package/dist/tag/index.mjs +0 -4
- package/dist/tag/index.mjs.map +0 -1
- package/dist/toast/index.d.mts +0 -175
- package/dist/toast/index.d.ts +0 -175
- package/dist/toast/index.js +0 -25
- package/dist/toast/index.js.map +0 -1
- package/dist/toast/index.mjs +0 -4
- package/dist/toast/index.mjs.map +0 -1
- package/dist/tooltip/index.d.mts +0 -26
- package/dist/tooltip/index.d.ts +0 -26
- package/dist/tooltip/index.js +0 -12
- package/dist/tooltip/index.js.map +0 -1
- package/dist/tooltip/index.mjs +0 -3
- package/dist/tooltip/index.mjs.map +0 -1
package/dist/chunk-AU5NTBK3.js
DELETED
|
@@ -1,361 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var chunk5M47B2XJ_js = require('./chunk-5M47B2XJ.js');
|
|
4
|
-
var utils = require('@exem-ui/core/utils');
|
|
5
|
-
var React = require('react');
|
|
6
|
-
var sonner = require('sonner');
|
|
7
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
8
|
-
|
|
9
|
-
function _interopNamespace(e) {
|
|
10
|
-
if (e && e.__esModule) return e;
|
|
11
|
-
var n = Object.create(null);
|
|
12
|
-
if (e) {
|
|
13
|
-
Object.keys(e).forEach(function (k) {
|
|
14
|
-
if (k !== 'default') {
|
|
15
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
16
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
17
|
-
enumerable: true,
|
|
18
|
-
get: function () { return e[k]; }
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
n.default = e;
|
|
24
|
-
return Object.freeze(n);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
28
|
-
|
|
29
|
-
var positionFix = `
|
|
30
|
-
[data-sonner-toaster][data-x-position='center'] [data-sonner-toast] {
|
|
31
|
-
left: calc(var(--width) / 2) !important;
|
|
32
|
-
transform: translateX(-50%) var(--y) !important;
|
|
33
|
-
width: fit-content !important;
|
|
34
|
-
max-width: calc(100% - var(--mobile-offset-left) * 2) !important;
|
|
35
|
-
}
|
|
36
|
-
@media (max-width: 600px) {
|
|
37
|
-
[data-sonner-toaster] {
|
|
38
|
-
left: 0 !important;
|
|
39
|
-
right: 0 !important;
|
|
40
|
-
}
|
|
41
|
-
[data-sonner-toaster] [data-sonner-toast] {
|
|
42
|
-
width: fit-content !important;
|
|
43
|
-
max-width: calc(100% - var(--mobile-offset-left) - var(--mobile-offset-right)) !important;
|
|
44
|
-
}
|
|
45
|
-
[data-sonner-toaster][data-x-position='center'] [data-sonner-toast] {
|
|
46
|
-
left: 50% !important;
|
|
47
|
-
}
|
|
48
|
-
[data-sonner-toaster][data-x-position='right'] [data-sonner-toast] {
|
|
49
|
-
left: auto !important;
|
|
50
|
-
right: var(--mobile-offset-right) !important;
|
|
51
|
-
}
|
|
52
|
-
[data-sonner-toaster][data-x-position='left'] [data-sonner-toast] {
|
|
53
|
-
left: var(--mobile-offset-left) !important;
|
|
54
|
-
right: auto !important;
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
`;
|
|
58
|
-
var Toaster = ({ ...props }) => {
|
|
59
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
60
|
-
/* @__PURE__ */ jsxRuntime.jsx("style", { children: positionFix }),
|
|
61
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
62
|
-
sonner.Toaster,
|
|
63
|
-
{
|
|
64
|
-
className: "toaster group [--toast-width:auto] [&_li]:!flex [&_li]:!items-center [&_li]:!justify-between [&_li]:!gap-2",
|
|
65
|
-
closeButton: false,
|
|
66
|
-
toastOptions: {
|
|
67
|
-
closeButton: false
|
|
68
|
-
},
|
|
69
|
-
...props
|
|
70
|
-
}
|
|
71
|
-
)
|
|
72
|
-
] });
|
|
73
|
-
};
|
|
74
|
-
Toaster.Container = React__namespace.forwardRef(
|
|
75
|
-
({ className, children, ...props }, ref) => {
|
|
76
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
77
|
-
"div",
|
|
78
|
-
{
|
|
79
|
-
ref,
|
|
80
|
-
className: utils.cn(
|
|
81
|
-
"flex items-center gap-3 rounded-medium border border-border-primary bg-component-toast py-[10px] pl-3 pr-4 text-mono-light shadow-strong",
|
|
82
|
-
"h-10 w-auto min-w-0 max-w-none",
|
|
83
|
-
className
|
|
84
|
-
),
|
|
85
|
-
...props,
|
|
86
|
-
children
|
|
87
|
-
}
|
|
88
|
-
);
|
|
89
|
-
}
|
|
90
|
-
);
|
|
91
|
-
Toaster.Icon = React__namespace.forwardRef(
|
|
92
|
-
({ className, children, ...props }, ref) => {
|
|
93
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
94
|
-
"div",
|
|
95
|
-
{
|
|
96
|
-
ref,
|
|
97
|
-
className: utils.cn("flex shrink-0 items-center justify-center", className),
|
|
98
|
-
...props,
|
|
99
|
-
children
|
|
100
|
-
}
|
|
101
|
-
);
|
|
102
|
-
}
|
|
103
|
-
);
|
|
104
|
-
Toaster.Title = React__namespace.forwardRef(
|
|
105
|
-
({ className, children, ...props }, ref) => {
|
|
106
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
107
|
-
"div",
|
|
108
|
-
{
|
|
109
|
-
ref,
|
|
110
|
-
className: utils.cn(
|
|
111
|
-
"flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-body-2 font-medium",
|
|
112
|
-
className
|
|
113
|
-
),
|
|
114
|
-
...props,
|
|
115
|
-
children
|
|
116
|
-
}
|
|
117
|
-
);
|
|
118
|
-
}
|
|
119
|
-
);
|
|
120
|
-
Toaster.Description = React__namespace.forwardRef(
|
|
121
|
-
({ className, children, ...props }, ref) => {
|
|
122
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
123
|
-
"div",
|
|
124
|
-
{
|
|
125
|
-
ref,
|
|
126
|
-
className: utils.cn(
|
|
127
|
-
"w-full text-body-3 font-regular text-text-static-light/80",
|
|
128
|
-
"overflow-hidden text-ellipsis",
|
|
129
|
-
className
|
|
130
|
-
),
|
|
131
|
-
...props,
|
|
132
|
-
children
|
|
133
|
-
}
|
|
134
|
-
);
|
|
135
|
-
}
|
|
136
|
-
);
|
|
137
|
-
Toaster.Action = React__namespace.forwardRef(
|
|
138
|
-
({ className, children, altText, ...props }, ref) => {
|
|
139
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
140
|
-
"button",
|
|
141
|
-
{
|
|
142
|
-
ref,
|
|
143
|
-
type: "button",
|
|
144
|
-
className: utils.cn(
|
|
145
|
-
"flex h-7 min-h-[28px] w-auto min-w-[28px] shrink-0 items-center justify-center",
|
|
146
|
-
"rounded-small bg-transparent px-0 py-0",
|
|
147
|
-
"border-0 transition-colors",
|
|
148
|
-
"hover:bg-solid-primary-hovered",
|
|
149
|
-
"whitespace-nowrap",
|
|
150
|
-
"cursor-pointer",
|
|
151
|
-
"text-body-2",
|
|
152
|
-
className
|
|
153
|
-
),
|
|
154
|
-
"aria-label": altText,
|
|
155
|
-
...props,
|
|
156
|
-
children: children || /* @__PURE__ */ jsxRuntime.jsx(chunk5M47B2XJ_js.X, { type: "regular", className: "size-4" })
|
|
157
|
-
}
|
|
158
|
-
);
|
|
159
|
-
}
|
|
160
|
-
);
|
|
161
|
-
Toaster.displayName = "Toaster";
|
|
162
|
-
Toaster.Container.displayName = "Toaster.Container";
|
|
163
|
-
Toaster.Icon.displayName = "Toaster.Icon";
|
|
164
|
-
Toaster.Title.displayName = "Toaster.Title";
|
|
165
|
-
Toaster.Description.displayName = "Toaster.Description";
|
|
166
|
-
Toaster.Action.displayName = "Toaster.Action";
|
|
167
|
-
var ToastProvider = ({
|
|
168
|
-
children,
|
|
169
|
-
expand = true,
|
|
170
|
-
richColors = false,
|
|
171
|
-
closeButton = false,
|
|
172
|
-
position = "top-center",
|
|
173
|
-
duration = 4e3,
|
|
174
|
-
visibleToasts = 10,
|
|
175
|
-
toasterProps
|
|
176
|
-
}) => {
|
|
177
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
178
|
-
children,
|
|
179
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
180
|
-
Toaster,
|
|
181
|
-
{
|
|
182
|
-
position,
|
|
183
|
-
closeButton,
|
|
184
|
-
richColors,
|
|
185
|
-
expand,
|
|
186
|
-
duration,
|
|
187
|
-
visibleToasts,
|
|
188
|
-
...toasterProps
|
|
189
|
-
}
|
|
190
|
-
)
|
|
191
|
-
] });
|
|
192
|
-
};
|
|
193
|
-
function isToastOptions(input) {
|
|
194
|
-
return typeof input === "object" && input !== null && "title" in input;
|
|
195
|
-
}
|
|
196
|
-
function extractToastParams(input, options) {
|
|
197
|
-
if (isToastOptions(input)) {
|
|
198
|
-
return {
|
|
199
|
-
title: input.title,
|
|
200
|
-
description: input.description,
|
|
201
|
-
action: input.action,
|
|
202
|
-
close: input.close
|
|
203
|
-
};
|
|
204
|
-
}
|
|
205
|
-
return {
|
|
206
|
-
title: input,
|
|
207
|
-
description: options?.description,
|
|
208
|
-
action: options?.action,
|
|
209
|
-
close: options?.close
|
|
210
|
-
};
|
|
211
|
-
}
|
|
212
|
-
function getSonnerOptions(options) {
|
|
213
|
-
if (!options) {
|
|
214
|
-
return void 0;
|
|
215
|
-
}
|
|
216
|
-
const { description: _description, action: _action, close: _close, ...sonnerOptions } = options;
|
|
217
|
-
return sonnerOptions;
|
|
218
|
-
}
|
|
219
|
-
function ToastContent({
|
|
220
|
-
id,
|
|
221
|
-
icon,
|
|
222
|
-
title,
|
|
223
|
-
description,
|
|
224
|
-
action,
|
|
225
|
-
close
|
|
226
|
-
}) {
|
|
227
|
-
const hasExtra = description || action;
|
|
228
|
-
if (hasExtra) {
|
|
229
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(Toaster.Container, { className: "h-auto min-h-12 flex-col items-start gap-1 py-3", children: [
|
|
230
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-2", children: [
|
|
231
|
-
icon && /* @__PURE__ */ jsxRuntime.jsx(Toaster.Icon, { children: icon }),
|
|
232
|
-
/* @__PURE__ */ jsxRuntime.jsx(Toaster.Title, { children: title }),
|
|
233
|
-
close && /* @__PURE__ */ jsxRuntime.jsx(Toaster.Action, { className: "rounded-medium", onClick: () => sonner.toast.dismiss(id) })
|
|
234
|
-
] }),
|
|
235
|
-
description && /* @__PURE__ */ jsxRuntime.jsx(Toaster.Description, { children: description }),
|
|
236
|
-
action && /* @__PURE__ */ jsxRuntime.jsx(
|
|
237
|
-
Toaster.Action,
|
|
238
|
-
{
|
|
239
|
-
className: "mt-1 text-text-info hover:text-text-info-hovered",
|
|
240
|
-
onClick: () => {
|
|
241
|
-
action.onClick();
|
|
242
|
-
sonner.toast.dismiss(id);
|
|
243
|
-
},
|
|
244
|
-
children: action.label
|
|
245
|
-
}
|
|
246
|
-
)
|
|
247
|
-
] });
|
|
248
|
-
}
|
|
249
|
-
if (close) {
|
|
250
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(Toaster.Container, { className: "py-1.5 pr-1.5", children: [
|
|
251
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 items-center gap-2 overflow-hidden", children: [
|
|
252
|
-
icon && /* @__PURE__ */ jsxRuntime.jsx(Toaster.Icon, { children: icon }),
|
|
253
|
-
/* @__PURE__ */ jsxRuntime.jsx(Toaster.Title, { children: title })
|
|
254
|
-
] }),
|
|
255
|
-
/* @__PURE__ */ jsxRuntime.jsx(Toaster.Action, { className: "rounded-medium", onClick: () => sonner.toast.dismiss(id) })
|
|
256
|
-
] });
|
|
257
|
-
}
|
|
258
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(Toaster.Container, { children: [
|
|
259
|
-
icon && /* @__PURE__ */ jsxRuntime.jsx(Toaster.Icon, { children: icon }),
|
|
260
|
-
/* @__PURE__ */ jsxRuntime.jsx(Toaster.Title, { children: title })
|
|
261
|
-
] });
|
|
262
|
-
}
|
|
263
|
-
function createToast(input, options, icon) {
|
|
264
|
-
const { title, description, action, close } = extractToastParams(input, options);
|
|
265
|
-
return sonner.toast.custom(
|
|
266
|
-
(id) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
267
|
-
ToastContent,
|
|
268
|
-
{
|
|
269
|
-
id,
|
|
270
|
-
icon,
|
|
271
|
-
title,
|
|
272
|
-
description,
|
|
273
|
-
action,
|
|
274
|
-
close
|
|
275
|
-
}
|
|
276
|
-
),
|
|
277
|
-
{ unstyled: true, ...getSonnerOptions(options) }
|
|
278
|
-
);
|
|
279
|
-
}
|
|
280
|
-
var toast = Object.assign(
|
|
281
|
-
(input, options) => createToast(input, options),
|
|
282
|
-
{
|
|
283
|
-
success: (input, options) => createToast(
|
|
284
|
-
input,
|
|
285
|
-
options,
|
|
286
|
-
/* @__PURE__ */ jsxRuntime.jsx(chunk5M47B2XJ_js.Check, { type: "regular", className: "size-5 text-icon-success" })
|
|
287
|
-
),
|
|
288
|
-
error: (input, options) => createToast(
|
|
289
|
-
input,
|
|
290
|
-
options,
|
|
291
|
-
/* @__PURE__ */ jsxRuntime.jsx(chunk5M47B2XJ_js.Error, { type: "regular", className: "size-5 text-icon-critical" })
|
|
292
|
-
),
|
|
293
|
-
info: (input, options) => createToast(
|
|
294
|
-
input,
|
|
295
|
-
options,
|
|
296
|
-
/* @__PURE__ */ jsxRuntime.jsx(chunk5M47B2XJ_js.Info, { type: "regular", className: "size-5 text-icon-static-light" })
|
|
297
|
-
),
|
|
298
|
-
warning: (input, options) => createToast(
|
|
299
|
-
input,
|
|
300
|
-
options,
|
|
301
|
-
/* @__PURE__ */ jsxRuntime.jsx(chunk5M47B2XJ_js.Warning, { type: "regular", className: "size-5 text-icon-warning" })
|
|
302
|
-
),
|
|
303
|
-
loading: (input, options) => createToast(input, options),
|
|
304
|
-
dismiss: sonner.toast.dismiss,
|
|
305
|
-
promise: sonner.toast.promise,
|
|
306
|
-
custom: sonner.toast.custom
|
|
307
|
-
}
|
|
308
|
-
);
|
|
309
|
-
function toExtended(options) {
|
|
310
|
-
if (!options) {
|
|
311
|
-
return void 0;
|
|
312
|
-
}
|
|
313
|
-
const { description: _desc, action: _act, ...rest } = options;
|
|
314
|
-
const converted = { ...rest };
|
|
315
|
-
if (typeof _desc === "string") {
|
|
316
|
-
converted.description = _desc;
|
|
317
|
-
}
|
|
318
|
-
return converted;
|
|
319
|
-
}
|
|
320
|
-
var DEFAULT_MESSAGES = {
|
|
321
|
-
success: "\uC131\uACF5",
|
|
322
|
-
error: "\uC624\uB958",
|
|
323
|
-
info: "\uC815\uBCF4",
|
|
324
|
-
warning: "\uACBD\uACE0",
|
|
325
|
-
loading: "\uB85C\uB529"
|
|
326
|
-
};
|
|
327
|
-
function useToast() {
|
|
328
|
-
const show = (message, options) => toast(message, toExtended(options));
|
|
329
|
-
const dismiss = (toastId) => toast.dismiss(toastId);
|
|
330
|
-
const showTypedToast = (type, message, options) => {
|
|
331
|
-
const toastMessage = message ?? DEFAULT_MESSAGES[type];
|
|
332
|
-
return toast[type](toastMessage, toExtended(options));
|
|
333
|
-
};
|
|
334
|
-
const promiseToast = (promiseTask, options, toastOptions) => sonner.toast.promise(promiseTask, {
|
|
335
|
-
loading: options.loading ?? DEFAULT_MESSAGES.loading,
|
|
336
|
-
success: options.success ?? DEFAULT_MESSAGES.success,
|
|
337
|
-
error: options.error ?? DEFAULT_MESSAGES.error,
|
|
338
|
-
finally: options.finally,
|
|
339
|
-
description: options.description,
|
|
340
|
-
...toastOptions
|
|
341
|
-
});
|
|
342
|
-
const custom = (render, options) => toast.custom(render, options);
|
|
343
|
-
return {
|
|
344
|
-
show,
|
|
345
|
-
dismiss,
|
|
346
|
-
promise: promiseToast,
|
|
347
|
-
custom,
|
|
348
|
-
success: (message, options) => showTypedToast("success", message, options),
|
|
349
|
-
error: (message, options) => showTypedToast("error", message, options),
|
|
350
|
-
info: (message, options) => showTypedToast("info", message, options),
|
|
351
|
-
warning: (message, options) => showTypedToast("warning", message, options),
|
|
352
|
-
loading: (message, options) => showTypedToast("loading", message, options)
|
|
353
|
-
};
|
|
354
|
-
}
|
|
355
|
-
|
|
356
|
-
exports.ToastProvider = ToastProvider;
|
|
357
|
-
exports.Toaster = Toaster;
|
|
358
|
-
exports.toast = toast;
|
|
359
|
-
exports.useToast = useToast;
|
|
360
|
-
//# sourceMappingURL=chunk-AU5NTBK3.js.map
|
|
361
|
-
//# sourceMappingURL=chunk-AU5NTBK3.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/toast/Toaster.tsx","../src/toast/ToastProvider.tsx","../src/toast/toast.tsx","../src/toast/useToast.tsx"],"names":["jsxs","Fragment","jsx","Sonner","React","cn","X","sonnerToast","Check","Error","Info","Warning"],"mappings":"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","file":"chunk-AU5NTBK3.js","sourcesContent":["import { cn } from '@exem-ui/core/utils';\nimport type * as ReactTypes from 'react';\nimport * as React from 'react';\nimport { Toaster as Sonner } from 'sonner';\nimport { XIcon } from '../icon';\n\n// Props 타입 정의\ntype ToasterRootProps = ReactTypes.ComponentProps<typeof Sonner>;\n\ntype ToasterContainerProps = {\n children: ReactTypes.ReactNode;\n} & ReactTypes.HTMLAttributes<HTMLDivElement>;\n\ntype ToasterIconProps = {\n children: ReactTypes.ReactNode;\n} & ReactTypes.HTMLAttributes<HTMLDivElement>;\n\ntype ToasterTitleProps = {\n children: ReactTypes.ReactNode;\n} & ReactTypes.HTMLAttributes<HTMLDivElement>;\n\ntype ToasterDescriptionProps = {\n children: ReactTypes.ReactNode;\n} & ReactTypes.HTMLAttributes<HTMLDivElement>;\n\ntype ToasterActionProps = {\n children?: ReactTypes.ReactNode;\n altText?: string;\n} & ReactTypes.ButtonHTMLAttributes<HTMLButtonElement>;\n\n// Namespace 타입 정의\ntype ToasterComponent = React.FC<ToasterRootProps> & {\n Container: React.ForwardRefExoticComponent<\n ToasterContainerProps & React.RefAttributes<HTMLDivElement>\n >;\n Icon: React.ForwardRefExoticComponent<ToasterIconProps & React.RefAttributes<HTMLDivElement>>;\n Title: React.ForwardRefExoticComponent<ToasterTitleProps & React.RefAttributes<HTMLDivElement>>;\n Description: React.ForwardRefExoticComponent<\n ToasterDescriptionProps & React.RefAttributes<HTMLDivElement>\n >;\n Action: React.ForwardRefExoticComponent<\n ToasterActionProps & React.RefAttributes<HTMLButtonElement>\n >;\n};\n\n/**\n * Sonner center 포지셔닝 보정\n *\n * Sonner는 toaster(`<ol>`)를 left:50% + translateX(-50%)로 중앙 정렬하지만,\n * 개별 toast는 toaster 내에서 left:0으로 왼쪽 정렬됩니다.\n * auto-width toast는 toaster(356px)보다 좁아 왼쪽으로 치우칩니다.\n *\n * 해결: 개별 toast에 left:calc(--width/2) + translateX(-50%) 적용\n * (참고: https://github.com/emilkowalski/sonner/issues/678)\n */\nconst positionFix = `\n[data-sonner-toaster][data-x-position='center'] [data-sonner-toast] {\n left: calc(var(--width) / 2) !important;\n transform: translateX(-50%) var(--y) !important;\n width: fit-content !important;\n max-width: calc(100% - var(--mobile-offset-left) * 2) !important;\n}\n@media (max-width: 600px) {\n [data-sonner-toaster] {\n left: 0 !important;\n right: 0 !important;\n }\n [data-sonner-toaster] [data-sonner-toast] {\n width: fit-content !important;\n max-width: calc(100% - var(--mobile-offset-left) - var(--mobile-offset-right)) !important;\n }\n [data-sonner-toaster][data-x-position='center'] [data-sonner-toast] {\n left: 50% !important;\n }\n [data-sonner-toaster][data-x-position='right'] [data-sonner-toast] {\n left: auto !important;\n right: var(--mobile-offset-right) !important;\n }\n [data-sonner-toaster][data-x-position='left'] [data-sonner-toast] {\n left: var(--mobile-offset-left) !important;\n right: auto !important;\n }\n}\n`;\n\n// Root 컴포넌트 (Provider)\nconst Toaster: ToasterComponent = ({ ...props }: ToasterRootProps) => {\n return (\n <>\n <style>{positionFix}</style>\n <Sonner\n // eslint-disable-next-line tailwindcss/no-custom-classname -- toaster는 shadcn의 클래스 구성임\n className=\"toaster group [--toast-width:auto] [&_li]:!flex [&_li]:!items-center [&_li]:!justify-between [&_li]:!gap-2\"\n closeButton={false}\n toastOptions={{\n closeButton: false,\n }}\n {...props}\n />\n </>\n );\n};\n\n// Toast Container (커스텀 토스트용)\nToaster.Container = React.forwardRef<HTMLDivElement, ToasterContainerProps>(\n ({ className, children, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={cn(\n 'flex items-center gap-3 rounded-medium border border-border-primary bg-component-toast py-[10px] pl-3 pr-4 text-mono-light shadow-strong',\n 'h-10 w-auto min-w-0 max-w-none',\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n },\n) as ToasterComponent['Container'];\n\n// Icon 컴포넌트\nToaster.Icon = React.forwardRef<HTMLDivElement, ToasterIconProps>(\n ({ className, children, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={cn('flex shrink-0 items-center justify-center', className)}\n {...props}\n >\n {children}\n </div>\n );\n },\n) as ToasterComponent['Icon'];\n\n// Title 컴포넌트\nToaster.Title = React.forwardRef<HTMLDivElement, ToasterTitleProps>(\n ({ className, children, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={cn(\n 'flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-body-2 font-medium',\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n },\n) as ToasterComponent['Title'];\n\n// Description 컴포넌트\nToaster.Description = React.forwardRef<HTMLDivElement, ToasterDescriptionProps>(\n ({ className, children, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={cn(\n 'w-full text-body-3 font-regular text-text-static-light/80',\n 'overflow-hidden text-ellipsis',\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n },\n) as ToasterComponent['Description'];\n\n// Action 컴포넌트 (닫기 버튼 등)\nToaster.Action = React.forwardRef<HTMLButtonElement, ToasterActionProps>(\n ({ className, children, altText, ...props }, ref) => {\n return (\n <button\n ref={ref}\n type=\"button\"\n className={cn(\n 'flex h-7 min-h-[28px] w-auto min-w-[28px] shrink-0 items-center justify-center',\n 'rounded-small bg-transparent px-0 py-0',\n 'border-0 transition-colors',\n 'hover:bg-solid-primary-hovered',\n 'whitespace-nowrap',\n 'cursor-pointer',\n 'text-body-2',\n className,\n )}\n aria-label={altText}\n {...props}\n >\n {children || <XIcon type=\"regular\" className=\"size-4\" />}\n </button>\n );\n },\n) as ToasterComponent['Action'];\n\n// displayName 설정\nToaster.displayName = 'Toaster';\nToaster.Container.displayName = 'Toaster.Container';\nToaster.Icon.displayName = 'Toaster.Icon';\nToaster.Title.displayName = 'Toaster.Title';\nToaster.Description.displayName = 'Toaster.Description';\nToaster.Action.displayName = 'Toaster.Action';\n\nexport { Toaster };\nexport type {\n ToasterActionProps,\n ToasterComponent,\n ToasterContainerProps,\n ToasterDescriptionProps,\n ToasterIconProps,\n ToasterRootProps,\n ToasterTitleProps,\n};\n","import type React from 'react';\n\nimport type { ToasterRootProps } from './Toaster';\nimport { Toaster } from './Toaster';\n\nexport interface ToastProviderProps {\n children?: React.ReactNode;\n /**\n * 호버 시 토스트 확장\n * @default true\n */\n expand?: boolean;\n /**\n * Rich colors 스타일 적용\n * @default false\n */\n richColors?: boolean;\n /**\n * Provider 레벨 닫기 버튼\n * @default false\n */\n closeButton?: boolean;\n /**\n * 토스트가 표시될 위치\n * @default 'top-center'\n */\n position?:\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right';\n /**\n * 토스트 표시 시간 (ms)\n * @default 4000\n */\n duration?: number;\n /**\n * 토스트 최대 개수\n * @default 10\n */\n visibleToasts?: number;\n /**\n * 추가 Toaster props\n */\n toasterProps?: Omit<ToasterRootProps, 'children' | 'expand' | 'richColors' | 'closeButton'>;\n}\n\nexport const ToastProvider: React.FC<ToastProviderProps> = ({\n children,\n expand = true,\n richColors = false,\n closeButton = false,\n position = 'top-center',\n duration = 4000,\n visibleToasts = 10,\n toasterProps,\n}) => {\n return (\n <>\n {children}\n <Toaster\n position={position}\n closeButton={closeButton}\n richColors={richColors}\n expand={expand}\n duration={duration}\n visibleToasts={visibleToasts}\n {...toasterProps}\n />\n </>\n );\n};\n","import type { ExternalToast } from 'sonner';\nimport { toast as sonnerToast } from 'sonner';\n\nimport { CheckIcon, ErrorIcon, InfoIcon, WarningIcon } from '../icon';\nimport { Toaster } from './Toaster';\n\n// ── Types ──\n\ninterface ToastAction {\n label: string;\n onClick: () => void;\n}\n\ninterface ToastOptions {\n title: string;\n description?: string;\n action?: ToastAction;\n close?: boolean;\n}\n\ninterface ExtendedExternalToast extends ExternalToast {\n description?: string;\n action?: ToastAction;\n close?: boolean;\n}\n\ntype ToastInput = string | ToastOptions;\n\n// ── Helpers ──\n\nfunction isToastOptions(input: ToastInput): input is ToastOptions {\n return typeof input === 'object' && input !== null && 'title' in input;\n}\n\nfunction extractToastParams(\n input: ToastInput,\n options?: ExtendedExternalToast,\n): { title: string; description?: string; action?: ToastAction; close?: boolean } {\n if (isToastOptions(input)) {\n return {\n title: input.title,\n description: input.description,\n action: input.action,\n close: input.close,\n };\n }\n return {\n title: input,\n description: options?.description,\n action: options?.action,\n close: options?.close,\n };\n}\n\nfunction getSonnerOptions(options?: ExtendedExternalToast): ExternalToast | undefined {\n if (!options) {\n return undefined;\n }\n const { description: _description, action: _action, close: _close, ...sonnerOptions } = options;\n return sonnerOptions;\n}\n\n// ── Toast Content ──\n\nfunction ToastContent({\n id,\n icon,\n title,\n description,\n action,\n close,\n}: {\n id: string | number;\n icon?: React.ReactNode;\n title: string;\n description?: string;\n action?: ToastAction;\n close?: boolean;\n}) {\n const hasExtra = description || action;\n\n if (hasExtra) {\n return (\n <Toaster.Container className=\"h-auto min-h-12 flex-col items-start gap-1 py-3\">\n <div className=\"flex w-full items-center gap-2\">\n {icon && <Toaster.Icon>{icon}</Toaster.Icon>}\n <Toaster.Title>{title}</Toaster.Title>\n {close && (\n <Toaster.Action className=\"rounded-medium\" onClick={() => sonnerToast.dismiss(id)} />\n )}\n </div>\n {description && <Toaster.Description>{description}</Toaster.Description>}\n {action && (\n <Toaster.Action\n className=\"mt-1 text-text-info hover:text-text-info-hovered\"\n onClick={() => {\n action.onClick();\n sonnerToast.dismiss(id);\n }}\n >\n {action.label}\n </Toaster.Action>\n )}\n </Toaster.Container>\n );\n }\n\n // Figma: close=true → pl-12 pr-6 py-6 gap-12, Content(icon+text) gap-8\n // Figma: close=false → pl-12 pr-16 py-10, Content(icon+text) gap-8\n if (close) {\n return (\n <Toaster.Container className=\"py-1.5 pr-1.5\">\n <div className=\"flex flex-1 items-center gap-2 overflow-hidden\">\n {icon && <Toaster.Icon>{icon}</Toaster.Icon>}\n <Toaster.Title>{title}</Toaster.Title>\n </div>\n <Toaster.Action className=\"rounded-medium\" onClick={() => sonnerToast.dismiss(id)} />\n </Toaster.Container>\n );\n }\n\n return (\n <Toaster.Container>\n {icon && <Toaster.Icon>{icon}</Toaster.Icon>}\n <Toaster.Title>{title}</Toaster.Title>\n </Toaster.Container>\n );\n}\n\n// ── Internal creator ──\n\nfunction createToast(\n input: ToastInput,\n options: ExtendedExternalToast | undefined,\n icon?: React.ReactNode,\n) {\n const { title, description, action, close } = extractToastParams(input, options);\n\n return sonnerToast.custom(\n (id) => (\n <ToastContent\n id={id}\n icon={icon}\n title={title}\n description={description}\n action={action}\n close={close}\n />\n ),\n { unstyled: true, ...getSonnerOptions(options) },\n );\n}\n\n// ── Public API ──\n\n/**\n * toast() — 커스텀 디자인이 적용된 toast 함수\n *\n * sonner의 toast를 래핑하여 프로젝트의 디자인 시스템을 자동으로 적용합니다.\n *\n * @example\n * ```tsx\n * import { toast } from '@exem-ui/react';\n *\n * // 간단한 메시지\n * toast('기본 메시지');\n * toast.success('성공');\n * toast.error('오류');\n * toast.info('정보');\n * toast.warning('경고');\n *\n * // title + description + action\n * toast.success({\n * title: '저장 완료',\n * description: '변경사항이 저장되었습니다.',\n * action: { label: '되돌리기', onClick: () => handleUndo() },\n * });\n *\n * // 닫기 버튼\n * toast.success({ title: '저장 완료', close: true });\n *\n * // 문자열 + 옵션 (sonner 스타일)\n * toast.success('생성 완료', {\n * description: '일요일, 12월 3일',\n * action: { label: 'Undo', onClick: () => console.log('Undo') },\n * });\n * ```\n */\nexport const toast = Object.assign(\n (input: ToastInput, options?: ExtendedExternalToast) => createToast(input, options),\n {\n success: (input: ToastInput, options?: ExtendedExternalToast) =>\n createToast(\n input,\n options,\n <CheckIcon type=\"regular\" className=\"size-5 text-icon-success\" />,\n ),\n\n error: (input: ToastInput, options?: ExtendedExternalToast) =>\n createToast(\n input,\n options,\n <ErrorIcon type=\"regular\" className=\"size-5 text-icon-critical\" />,\n ),\n\n info: (input: ToastInput, options?: ExtendedExternalToast) =>\n createToast(\n input,\n options,\n <InfoIcon type=\"regular\" className=\"size-5 text-icon-static-light\" />,\n ),\n\n warning: (input: ToastInput, options?: ExtendedExternalToast) =>\n createToast(\n input,\n options,\n <WarningIcon type=\"regular\" className=\"size-5 text-icon-warning\" />,\n ),\n\n loading: (input: ToastInput, options?: ExtendedExternalToast) => createToast(input, options),\n\n dismiss: sonnerToast.dismiss,\n promise: sonnerToast.promise as typeof sonnerToast.promise,\n custom: sonnerToast.custom,\n },\n);\n\nexport type { ExtendedExternalToast, ToastAction, ToastInput, ToastOptions };\n","import type React from 'react';\nimport { toast as sonnerToast } from 'sonner';\nimport type { ExtendedExternalToast } from './toast';\nimport { toast } from './toast';\nimport type * as Toast from './types';\n\nfunction toExtended(options?: Toast.Options): ExtendedExternalToast | undefined {\n if (!options) {\n return undefined;\n }\n const { description: _desc, action: _act, ...rest } = options;\n const converted: Record<string, unknown> = { ...rest };\n if (typeof _desc === 'string') {\n converted.description = _desc;\n }\n return converted as ExtendedExternalToast;\n}\n\nconst DEFAULT_MESSAGES: Toast.DefaultMessage = {\n success: '성공',\n error: '오류',\n info: '정보',\n warning: '경고',\n loading: '로딩',\n};\n\n/**\n * @deprecated `toast` 함수를 직접 사용하세요.\n *\n * 하위호환을 위해 유지되며, 내부적으로 `toast`에 위임합니다.\n *\n * @example\n * ```tsx\n * // Before (useToast)\n * const { success } = useToast();\n * success('완료');\n *\n * // After (toast 직접 사용)\n * import { toast } from '@exem-ui/react';\n * toast.success('완료');\n * ```\n */\nexport function useToast() {\n const show = (message: string, options?: Toast.Options) => toast(message, toExtended(options));\n\n const dismiss = (toastId: string | number) => toast.dismiss(toastId);\n\n const showTypedToast = (type: Toast.Type, message?: string, options?: Toast.Options) => {\n const toastMessage = message ?? DEFAULT_MESSAGES[type];\n return toast[type](toastMessage, toExtended(options));\n };\n\n const promiseToast = <T,>(\n promiseTask: Promise<T>,\n options: Toast.PromiseOptions<T>,\n toastOptions?: Toast.Options,\n ) =>\n sonnerToast.promise(promiseTask, {\n loading: options.loading ?? DEFAULT_MESSAGES.loading,\n success: options.success ?? DEFAULT_MESSAGES.success,\n error: options.error ?? DEFAULT_MESSAGES.error,\n finally: options.finally,\n description: options.description,\n ...toastOptions,\n });\n\n const custom = (render: (id: string | number) => React.ReactElement, options?: Toast.Options) =>\n toast.custom(render, options);\n\n return {\n show,\n dismiss,\n promise: promiseToast,\n custom,\n success: (message?: string, options?: Toast.Options) =>\n showTypedToast('success', message, options),\n error: (message?: string, options?: Toast.Options) => showTypedToast('error', message, options),\n info: (message?: string, options?: Toast.Options) => showTypedToast('info', message, options),\n warning: (message?: string, options?: Toast.Options) =>\n showTypedToast('warning', message, options),\n loading: (message?: string, options?: Toast.Options) =>\n showTypedToast('loading', message, options),\n };\n}\n"]}
|
package/dist/chunk-DJHGCJR4.mjs
DELETED
|
@@ -1,224 +0,0 @@
|
|
|
1
|
-
import { cva, cn } from '@exem-ui/core/utils';
|
|
2
|
-
import { forwardRef, cloneElement } from 'react';
|
|
3
|
-
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
4
|
-
|
|
5
|
-
// src/button/Button.tsx
|
|
6
|
-
var colorStyles = {
|
|
7
|
-
accent: {
|
|
8
|
-
contained: {
|
|
9
|
-
button: "bg-solid-accent-default hover:bg-solid-accent-hovered disabled:bg-solid-accent-disabled",
|
|
10
|
-
icon: "text-icon-static-light group-disabled/button:text-icon-inverse-disabled",
|
|
11
|
-
text: "text-text-static-light group-disabled/button:text-text-inverse-disabled"
|
|
12
|
-
},
|
|
13
|
-
outlined: {
|
|
14
|
-
button: "border border-border-accent hover:bg-elevation-accent disabled:border-border-accent-disabled",
|
|
15
|
-
icon: "text-text-accent group-disabled/button:text-text-accent-disabled",
|
|
16
|
-
text: "text-text-accent group-disabled/button:text-text-accent-disabled"
|
|
17
|
-
},
|
|
18
|
-
invisible: {
|
|
19
|
-
button: "hover:bg-elevation-accent",
|
|
20
|
-
icon: "text-text-accent group-disabled/button:text-text-accent-disabled",
|
|
21
|
-
text: "text-text-accent group-disabled/button:text-text-accent-disabled"
|
|
22
|
-
}
|
|
23
|
-
},
|
|
24
|
-
assistive: {
|
|
25
|
-
contained: {
|
|
26
|
-
button: "bg-elevation-elevation-2 hover:bg-elevation-elevation-3 disabled:bg-elevation-elevation-2",
|
|
27
|
-
icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
|
|
28
|
-
text: "text-text-secondary group-disabled/button:text-text-disabled"
|
|
29
|
-
}
|
|
30
|
-
},
|
|
31
|
-
critical: {
|
|
32
|
-
contained: {
|
|
33
|
-
button: "bg-solid-critical-default hover:bg-solid-critical-hovered disabled:bg-solid-critical-disabled",
|
|
34
|
-
icon: "text-icon-static-light group-disabled/button:text-icon-inverse-disabled",
|
|
35
|
-
text: "text-text-static-light group-disabled/button:text-text-inverse-disabled"
|
|
36
|
-
},
|
|
37
|
-
outlined: {
|
|
38
|
-
button: "border border-border-critical hover:bg-elevation-critical disabled:border-border-critical-disabled",
|
|
39
|
-
icon: "text-text-critical group-disabled/button:text-text-critical-disabled",
|
|
40
|
-
text: "text-text-critical group-disabled/button:text-text-critical-disabled"
|
|
41
|
-
},
|
|
42
|
-
invisible: {
|
|
43
|
-
button: "hover:bg-elevation-critical",
|
|
44
|
-
icon: "text-text-critical group-disabled/button:text-text-critical-disabled",
|
|
45
|
-
text: "text-text-critical group-disabled/button:text-text-critical-disabled"
|
|
46
|
-
}
|
|
47
|
-
},
|
|
48
|
-
inverse: {
|
|
49
|
-
contained: {
|
|
50
|
-
button: "bg-elevation-elevation-0 hover:bg-elevation-elevation-2 disabled:bg-elevation-elevation-2",
|
|
51
|
-
icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
|
|
52
|
-
text: "text-text-secondary group-disabled/button:text-text-disabled"
|
|
53
|
-
}
|
|
54
|
-
},
|
|
55
|
-
primary: {
|
|
56
|
-
contained: {
|
|
57
|
-
button: "bg-solid-primary-default hover:bg-solid-primary-hovered disabled:bg-solid-primary-disabled",
|
|
58
|
-
icon: "text-icon-inverse group-disabled/button:text-icon-inverse",
|
|
59
|
-
text: "text-text-inverse group-disabled/button:text-text-inverse"
|
|
60
|
-
},
|
|
61
|
-
outlined: {
|
|
62
|
-
button: "border border-border-secondary hover:bg-elevation-elevation-2 disabled:border-border-secondary",
|
|
63
|
-
icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
|
|
64
|
-
text: "text-text-secondary group-disabled/button:text-text-disabled"
|
|
65
|
-
},
|
|
66
|
-
invisible: {
|
|
67
|
-
button: "hover:bg-elevation-elevation-2",
|
|
68
|
-
icon: "text-icon-secondary group-disabled/button:text-icon-disabled",
|
|
69
|
-
text: "text-text-secondary group-disabled/button:text-text-disabled"
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
};
|
|
73
|
-
var buttonVariants = cva(
|
|
74
|
-
"inline-flex w-fit shrink-0 cursor-pointer flex-row items-center justify-center rounded-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed",
|
|
75
|
-
{
|
|
76
|
-
compoundVariants: [
|
|
77
|
-
// Primary 색상 조합
|
|
78
|
-
{
|
|
79
|
-
className: colorStyles.primary.contained.button,
|
|
80
|
-
color: "primary",
|
|
81
|
-
variant: "contained"
|
|
82
|
-
},
|
|
83
|
-
{
|
|
84
|
-
className: colorStyles.primary.outlined.button,
|
|
85
|
-
color: "primary",
|
|
86
|
-
variant: "outlined"
|
|
87
|
-
},
|
|
88
|
-
{
|
|
89
|
-
className: colorStyles.primary.invisible.button,
|
|
90
|
-
color: "primary",
|
|
91
|
-
variant: "invisible"
|
|
92
|
-
},
|
|
93
|
-
// Accent 색상 조합
|
|
94
|
-
{
|
|
95
|
-
className: colorStyles.accent.contained.button,
|
|
96
|
-
color: "accent",
|
|
97
|
-
variant: "contained"
|
|
98
|
-
},
|
|
99
|
-
{
|
|
100
|
-
className: colorStyles.accent.outlined.button,
|
|
101
|
-
color: "accent",
|
|
102
|
-
variant: "outlined"
|
|
103
|
-
},
|
|
104
|
-
{
|
|
105
|
-
className: colorStyles.accent.invisible.button,
|
|
106
|
-
color: "accent",
|
|
107
|
-
variant: "invisible"
|
|
108
|
-
},
|
|
109
|
-
// Critical 색상 조합
|
|
110
|
-
{
|
|
111
|
-
className: colorStyles.critical.contained.button,
|
|
112
|
-
color: "critical",
|
|
113
|
-
variant: "contained"
|
|
114
|
-
},
|
|
115
|
-
{
|
|
116
|
-
className: colorStyles.critical.outlined.button,
|
|
117
|
-
color: "critical",
|
|
118
|
-
variant: "outlined"
|
|
119
|
-
},
|
|
120
|
-
{
|
|
121
|
-
className: colorStyles.critical.invisible.button,
|
|
122
|
-
color: "critical",
|
|
123
|
-
variant: "invisible"
|
|
124
|
-
},
|
|
125
|
-
// Assistive 색상 조합 (contained만 지원)
|
|
126
|
-
{
|
|
127
|
-
className: colorStyles.assistive.contained.button,
|
|
128
|
-
color: "assistive",
|
|
129
|
-
variant: "contained"
|
|
130
|
-
},
|
|
131
|
-
// Inverse 색상 조합 (contained만 지원)
|
|
132
|
-
{
|
|
133
|
-
className: colorStyles.inverse.contained.button,
|
|
134
|
-
color: "inverse",
|
|
135
|
-
variant: "contained"
|
|
136
|
-
}
|
|
137
|
-
],
|
|
138
|
-
defaultVariants: {
|
|
139
|
-
color: "primary",
|
|
140
|
-
size: "medium",
|
|
141
|
-
variant: "contained"
|
|
142
|
-
},
|
|
143
|
-
variants: {
|
|
144
|
-
color: {
|
|
145
|
-
accent: "",
|
|
146
|
-
assistive: "",
|
|
147
|
-
critical: "",
|
|
148
|
-
inverse: "",
|
|
149
|
-
primary: ""
|
|
150
|
-
},
|
|
151
|
-
size: {
|
|
152
|
-
xsmall: "h-6 gap-0 px-1 text-body-3 font-medium",
|
|
153
|
-
small: "h-7 gap-0.5 px-1.5 text-body-2 font-medium",
|
|
154
|
-
medium: "h-8 gap-0.5 px-2 text-body-2 font-medium",
|
|
155
|
-
large: "h-10 gap-1 px-2.5 text-body-1 font-medium",
|
|
156
|
-
xlarge: "h-12 gap-1 px-3 text-title-2 font-medium"
|
|
157
|
-
},
|
|
158
|
-
variant: {
|
|
159
|
-
contained: "",
|
|
160
|
-
outlined: "bg-transparent",
|
|
161
|
-
invisible: "bg-transparent"
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
);
|
|
166
|
-
var IconSize = {
|
|
167
|
-
xsmall: "h-4 w-4",
|
|
168
|
-
small: "h-4 w-4",
|
|
169
|
-
medium: "h-4 w-4",
|
|
170
|
-
large: "h-5 w-5",
|
|
171
|
-
xlarge: "h-6 w-6"
|
|
172
|
-
};
|
|
173
|
-
var Button = forwardRef(
|
|
174
|
-
({
|
|
175
|
-
className,
|
|
176
|
-
variant = "contained",
|
|
177
|
-
color = "primary",
|
|
178
|
-
size = "medium",
|
|
179
|
-
icon,
|
|
180
|
-
children,
|
|
181
|
-
...props
|
|
182
|
-
}, ref) => {
|
|
183
|
-
const validColorStyle = color === "assistive" || color === "inverse" ? colorStyles[color].contained : colorStyles[color][variant];
|
|
184
|
-
const content = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
185
|
-
icon && cloneElement(icon, {
|
|
186
|
-
className: cn(
|
|
187
|
-
"shrink-0 [&>path]:fill-current",
|
|
188
|
-
validColorStyle.icon,
|
|
189
|
-
icon.props.className,
|
|
190
|
-
IconSize[size ?? "medium"]
|
|
191
|
-
)
|
|
192
|
-
}),
|
|
193
|
-
typeof children === "string" ? /* @__PURE__ */ jsx(
|
|
194
|
-
"span",
|
|
195
|
-
{
|
|
196
|
-
className: cn("truncate", size === "xlarge" ? "px-1" : "px-0.5", validColorStyle.text),
|
|
197
|
-
children
|
|
198
|
-
}
|
|
199
|
-
) : children
|
|
200
|
-
] });
|
|
201
|
-
return /* @__PURE__ */ jsx(
|
|
202
|
-
"button",
|
|
203
|
-
{
|
|
204
|
-
className: cn(
|
|
205
|
-
buttonVariants({
|
|
206
|
-
className,
|
|
207
|
-
color,
|
|
208
|
-
size,
|
|
209
|
-
variant
|
|
210
|
-
}),
|
|
211
|
-
"group/button"
|
|
212
|
-
),
|
|
213
|
-
ref,
|
|
214
|
-
...props,
|
|
215
|
-
children: content
|
|
216
|
-
}
|
|
217
|
-
);
|
|
218
|
-
}
|
|
219
|
-
);
|
|
220
|
-
Button.displayName = "Button";
|
|
221
|
-
|
|
222
|
-
export { Button };
|
|
223
|
-
//# sourceMappingURL=chunk-DJHGCJR4.mjs.map
|
|
224
|
-
//# sourceMappingURL=chunk-DJHGCJR4.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/button/Button.tsx"],"names":[],"mappings":"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","file":"chunk-DJHGCJR4.mjs","sourcesContent":["import { cn, cva, type VariantProps } from '@exem-ui/core/utils';\nimport type React from 'react';\nimport { cloneElement, forwardRef } from 'react';\n\ntype ButtonColorVariantCombination =\n | { color?: 'primary'; variant?: 'contained' | 'outlined' | 'invisible' }\n | { color?: 'accent'; variant?: 'contained' | 'outlined' | 'invisible' }\n | { color?: 'critical'; variant?: 'contained' | 'outlined' | 'invisible' }\n | { color?: 'assistive'; variant?: 'contained' }\n | { color?: 'inverse'; variant?: 'contained' };\n\ntype ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &\n Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> &\n ButtonColorVariantCombination & {\n size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';\n icon?: React.ReactElement<{ className?: string }>;\n };\n\ntype ButtonComponent = React.ForwardRefExoticComponent<\n ButtonProps & React.RefAttributes<HTMLButtonElement>\n>;\n\nconst colorStyles = {\n accent: {\n contained: {\n button:\n 'bg-solid-accent-default hover:bg-solid-accent-hovered disabled:bg-solid-accent-disabled',\n icon: 'text-icon-static-light group-disabled/button:text-icon-inverse-disabled',\n text: 'text-text-static-light group-disabled/button:text-text-inverse-disabled',\n },\n outlined: {\n button:\n 'border border-border-accent hover:bg-elevation-accent disabled:border-border-accent-disabled',\n icon: 'text-text-accent group-disabled/button:text-text-accent-disabled',\n text: 'text-text-accent group-disabled/button:text-text-accent-disabled',\n },\n invisible: {\n button: 'hover:bg-elevation-accent',\n icon: 'text-text-accent group-disabled/button:text-text-accent-disabled',\n text: 'text-text-accent group-disabled/button:text-text-accent-disabled',\n },\n },\n assistive: {\n contained: {\n button:\n 'bg-elevation-elevation-2 hover:bg-elevation-elevation-3 disabled:bg-elevation-elevation-2',\n icon: 'text-icon-secondary group-disabled/button:text-icon-disabled',\n text: 'text-text-secondary group-disabled/button:text-text-disabled',\n },\n },\n critical: {\n contained: {\n button:\n 'bg-solid-critical-default hover:bg-solid-critical-hovered disabled:bg-solid-critical-disabled',\n icon: 'text-icon-static-light group-disabled/button:text-icon-inverse-disabled',\n text: 'text-text-static-light group-disabled/button:text-text-inverse-disabled',\n },\n outlined: {\n button:\n 'border border-border-critical hover:bg-elevation-critical disabled:border-border-critical-disabled',\n icon: 'text-text-critical group-disabled/button:text-text-critical-disabled',\n text: 'text-text-critical group-disabled/button:text-text-critical-disabled',\n },\n invisible: {\n button: 'hover:bg-elevation-critical',\n icon: 'text-text-critical group-disabled/button:text-text-critical-disabled',\n text: 'text-text-critical group-disabled/button:text-text-critical-disabled',\n },\n },\n inverse: {\n contained: {\n button:\n 'bg-elevation-elevation-0 hover:bg-elevation-elevation-2 disabled:bg-elevation-elevation-2',\n icon: 'text-icon-secondary group-disabled/button:text-icon-disabled',\n text: 'text-text-secondary group-disabled/button:text-text-disabled',\n },\n },\n primary: {\n contained: {\n button:\n 'bg-solid-primary-default hover:bg-solid-primary-hovered disabled:bg-solid-primary-disabled',\n icon: 'text-icon-inverse group-disabled/button:text-icon-inverse',\n text: 'text-text-inverse group-disabled/button:text-text-inverse',\n },\n outlined: {\n button:\n 'border border-border-secondary hover:bg-elevation-elevation-2 disabled:border-border-secondary',\n icon: 'text-icon-secondary group-disabled/button:text-icon-disabled',\n text: 'text-text-secondary group-disabled/button:text-text-disabled',\n },\n invisible: {\n button: 'hover:bg-elevation-elevation-2',\n icon: 'text-icon-secondary group-disabled/button:text-icon-disabled',\n text: 'text-text-secondary group-disabled/button:text-text-disabled',\n },\n },\n};\n\nconst buttonVariants = cva(\n 'inline-flex w-fit shrink-0 cursor-pointer flex-row items-center justify-center rounded-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed',\n {\n compoundVariants: [\n // Primary 색상 조합\n {\n className: colorStyles.primary.contained.button,\n color: 'primary',\n variant: 'contained',\n },\n {\n className: colorStyles.primary.outlined.button,\n color: 'primary',\n variant: 'outlined',\n },\n {\n className: colorStyles.primary.invisible.button,\n color: 'primary',\n variant: 'invisible',\n },\n // Accent 색상 조합\n {\n className: colorStyles.accent.contained.button,\n color: 'accent',\n variant: 'contained',\n },\n {\n className: colorStyles.accent.outlined.button,\n color: 'accent',\n variant: 'outlined',\n },\n {\n className: colorStyles.accent.invisible.button,\n color: 'accent',\n variant: 'invisible',\n },\n // Critical 색상 조합\n {\n className: colorStyles.critical.contained.button,\n color: 'critical',\n variant: 'contained',\n },\n {\n className: colorStyles.critical.outlined.button,\n color: 'critical',\n variant: 'outlined',\n },\n {\n className: colorStyles.critical.invisible.button,\n color: 'critical',\n variant: 'invisible',\n },\n // Assistive 색상 조합 (contained만 지원)\n {\n className: colorStyles.assistive.contained.button,\n color: 'assistive',\n variant: 'contained',\n },\n // Inverse 색상 조합 (contained만 지원)\n {\n className: colorStyles.inverse.contained.button,\n color: 'inverse',\n variant: 'contained',\n },\n ],\n defaultVariants: {\n color: 'primary',\n size: 'medium',\n variant: 'contained',\n },\n variants: {\n color: {\n accent: '',\n assistive: '',\n critical: '',\n inverse: '',\n primary: '',\n },\n size: {\n xsmall: 'h-6 gap-0 px-1 text-body-3 font-medium',\n small: 'h-7 gap-0.5 px-1.5 text-body-2 font-medium',\n medium: 'h-8 gap-0.5 px-2 text-body-2 font-medium',\n large: 'h-10 gap-1 px-2.5 text-body-1 font-medium',\n xlarge: 'h-12 gap-1 px-3 text-title-2 font-medium',\n },\n variant: {\n contained: '',\n outlined: 'bg-transparent',\n invisible: 'bg-transparent',\n },\n },\n },\n);\n\nconst IconSize = {\n xsmall: 'h-4 w-4',\n small: 'h-4 w-4',\n medium: 'h-4 w-4',\n large: 'h-5 w-5',\n xlarge: 'h-6 w-6',\n};\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant = 'contained',\n color = 'primary',\n size = 'medium',\n icon,\n children,\n ...props\n },\n ref,\n ) => {\n // 현재 조합의 색상 스타일 가져오기 -> assistive/inverse는 contained만 지원\n const validColorStyle =\n color === 'assistive' || color === 'inverse'\n ? colorStyles[color].contained\n : colorStyles[color][variant];\n\n const content = (\n <>\n {icon &&\n cloneElement(icon, {\n className: cn(\n 'shrink-0 [&>path]:fill-current',\n validColorStyle.icon,\n icon.props.className,\n IconSize[size ?? 'medium'],\n ),\n })}\n {typeof children === 'string' ? (\n <span\n className={cn('truncate', size === 'xlarge' ? 'px-1' : 'px-0.5', validColorStyle.text)}\n >\n {children}\n </span>\n ) : (\n children\n )}\n </>\n );\n\n return (\n <button\n className={cn(\n buttonVariants({\n className,\n color,\n size,\n variant,\n }),\n 'group/button',\n )}\n ref={ref}\n {...props}\n >\n {content}\n </button>\n );\n },\n) as ButtonComponent;\n\nButton.displayName = 'Button';\n\nexport { Button };\nexport type { ButtonComponent, ButtonProps };\n"]}
|