@horang-corp/react-modal 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +371 -0
  2. package/index.d.ts +18 -0
  3. package/package.json +31 -0
package/dist/index.js ADDED
@@ -0,0 +1,371 @@
1
+ import { impl as e } from "@horang-corp/react-button-round";
2
+ import { impl as t } from "@horang-corp/react-icon";
3
+ import { impl as n } from "@horang-corp/react-interaction";
4
+ import { Flex as r, Stack as i, styled as a } from "@horang-corp/react-system/jsx";
5
+ import { mergeProps as o, useSquircleClip as s } from "@horang-corp/react-system/runtime";
6
+ import { jsx as c, jsxs as l } from "react/jsx-runtime";
7
+ //#region ../../variants/Type_Default/react-panda/index.tsx
8
+ var u = {
9
+ 다시보지않기: !0,
10
+ Message: "사용자에게 전달해야 하는 메세지를 입력해 주세요",
11
+ Title: "타이틀을 입력해 주세요",
12
+ LeftBTN: !0,
13
+ ExplainTitle: "타이틀",
14
+ ExplainContent: "메세지를 입력해 주세요",
15
+ Type: "Default",
16
+ IconComponentCheckAbsoluteHorizontalStart: "18.8427734375%",
17
+ IconComponentCheckAbsoluteHorizontalEnd: "18.8539361954%",
18
+ SecondaryButtonComponentContent: "버튼",
19
+ SecondaryButtonComponentInteractionHidden: void 0,
20
+ SecondaryButtonComponentInteractionComponentStatusNormalWidth: "3.5625rem",
21
+ PrimaryButtonComponentContent: "버튼",
22
+ PrimaryButtonComponentInteractionHidden: void 0,
23
+ PrimaryButtonComponentInteractionComponentStatusNormalWidth: "3.5625rem",
24
+ PrimaryButtonComponentRightIconComponentSelectAbsoluteHorizontalStart: "14.5825195312%",
25
+ PrimaryButtonComponentRightIconComponentSelectAbsoluteHorizontalEnd: "14.584145546%",
26
+ PrimaryButtonComponentRightIconComponentSelectAbsoluteVerticalStart: "14.5834350586%",
27
+ PrimaryButtonComponentRightIconComponentSelectAbsoluteVerticalEnd: "14.5832300186%"
28
+ }, d = (d) => {
29
+ let f = o(u, d), [p, m] = s(20, .6), [h, g] = s(4, .6);
30
+ return /* @__PURE__ */ l(i, {
31
+ align: "center",
32
+ gap: "spacing.550",
33
+ px: "spacing.600",
34
+ pt: "spacing.600",
35
+ pb: "spacing.550",
36
+ bg: "components.fill.standard.primary",
37
+ rounded: "radius.700",
38
+ ref: p,
39
+ style: {
40
+ borderRadius: "0",
41
+ clipPath: m
42
+ },
43
+ children: [/* @__PURE__ */ l(i, {
44
+ align: "start",
45
+ gap: "spacing.200",
46
+ children: [
47
+ /* @__PURE__ */ c(a.span, {
48
+ textStyle: "heading.strong",
49
+ color: "content.standard.primary",
50
+ textAlign: "left",
51
+ minWidth: "25rem",
52
+ whiteSpace: "nowrap",
53
+ children: f.Title
54
+ }),
55
+ /* @__PURE__ */ c(a.span, {
56
+ textStyle: "label.regular",
57
+ color: "content.standard.secondary",
58
+ textAlign: "left",
59
+ minWidth: "25rem",
60
+ alignSelf: "stretch",
61
+ width: "100%",
62
+ contain: "inline-size",
63
+ whiteSpace: "pre-wrap",
64
+ children: f.Message
65
+ }),
66
+ null
67
+ ]
68
+ }), /* @__PURE__ */ l(r, {
69
+ align: "center",
70
+ justify: "end",
71
+ alignSelf: "stretch",
72
+ transform: "translate(0.125rem, 0rem)",
73
+ children: [f.다시보지않기 === !1 ? null : /* @__PURE__ */ l(r, {
74
+ align: "center",
75
+ gap: "spacing.200",
76
+ flex: 1,
77
+ minWidth: 0,
78
+ transform: "translate(0.125rem, 0.125rem)",
79
+ children: [/* @__PURE__ */ l(r, {
80
+ align: "center",
81
+ justify: "center",
82
+ insetBorder: "1 line.divider",
83
+ position: "relative",
84
+ p: "spacing.50",
85
+ rounded: "radius.100",
86
+ ref: h,
87
+ style: {
88
+ borderRadius: "0",
89
+ clipPath: g
90
+ },
91
+ children: [/* @__PURE__ */ c(t, {
92
+ Type: "check",
93
+ CheckFill: "content.standard.quaternary",
94
+ CheckAbsoluteHorizontalStart: f.IconComponentCheckAbsoluteHorizontalStart,
95
+ CheckAbsoluteHorizontalEnd: f.IconComponentCheckAbsoluteHorizontalEnd,
96
+ CheckAbsoluteVerticalEnd: "27.9488706589%",
97
+ TypeCheckWidth: "1.25rem",
98
+ TypeCheckHeight: "1.25rem",
99
+ CheckAbsoluteVerticalStart: "27.7038574219%"
100
+ }), /* @__PURE__ */ c(a.span, {
101
+ style: {
102
+ position: "absolute",
103
+ left: "-0.125rem",
104
+ right: "-0.125rem",
105
+ top: "-0.125rem",
106
+ bottom: "-0.125rem"
107
+ },
108
+ children: /* @__PURE__ */ c(n, {
109
+ Status: "Normal",
110
+ StatusNormalCornerRadius: "radius.200",
111
+ StatusNormalCornerSmoothing: .6,
112
+ StatusNormalWidth: "1.75rem",
113
+ StatusNormalHeight: "1.75rem"
114
+ })
115
+ })]
116
+ }), /* @__PURE__ */ c(a.span, {
117
+ textStyle: "label.regular",
118
+ color: "content.standard.primary",
119
+ textAlign: "left",
120
+ whiteSpace: "nowrap",
121
+ children: "다시 보지 않기"
122
+ })]
123
+ }), /* @__PURE__ */ l(r, {
124
+ align: "start",
125
+ gap: "spacing.200",
126
+ children: [f.LeftBTN === !1 ? null : /* @__PURE__ */ c(e, {
127
+ Label: !0,
128
+ LeftIcon: !1,
129
+ Content: f.SecondaryButtonComponentContent,
130
+ RightIcon: !1,
131
+ Size: "Medium",
132
+ Theme: "Grayscale",
133
+ Style: "Secondary",
134
+ Disabled: "false",
135
+ LeftIconComponentType: "person",
136
+ InteractionHidden: f.SecondaryButtonComponentInteractionHidden,
137
+ InteractionComponentStatusNormalWidth: f.SecondaryButtonComponentInteractionComponentStatusNormalWidth
138
+ }), /* @__PURE__ */ c(e, {
139
+ Label: !0,
140
+ LeftIcon: !1,
141
+ Content: f.PrimaryButtonComponentContent,
142
+ RightIcon: !1,
143
+ Size: "Medium",
144
+ Theme: "Grayscale",
145
+ Style: "Primary",
146
+ Disabled: "false",
147
+ LeftIconComponentType: "person",
148
+ InteractionHidden: f.PrimaryButtonComponentInteractionHidden,
149
+ InteractionComponentStatusNormalWidth: f.PrimaryButtonComponentInteractionComponentStatusNormalWidth,
150
+ RightIconComponentType: "default",
151
+ RightIconComponentSelectFill: "content.inverted.primary",
152
+ RightIconComponentSelectAbsoluteHorizontalStart: f.PrimaryButtonComponentRightIconComponentSelectAbsoluteHorizontalStart,
153
+ RightIconComponentSelectAbsoluteHorizontalEnd: f.PrimaryButtonComponentRightIconComponentSelectAbsoluteHorizontalEnd,
154
+ RightIconComponentSelectAbsoluteVerticalStart: f.PrimaryButtonComponentRightIconComponentSelectAbsoluteVerticalStart,
155
+ RightIconComponentSelectAbsoluteVerticalEnd: f.PrimaryButtonComponentRightIconComponentSelectAbsoluteVerticalEnd,
156
+ RightIconComponentTypeDefaultWidth: "1.25rem",
157
+ RightIconComponentTypeDefaultHeight: "1.25rem"
158
+ })]
159
+ })]
160
+ })]
161
+ });
162
+ }, f = {
163
+ 다시보지않기: !0,
164
+ Message: "사용자에게 전달해야 하는 메세지를 입력해 주세요",
165
+ Title: "타이틀을 입력해 주세요",
166
+ LeftBTN: !0,
167
+ ExplainTitle: "타이틀",
168
+ ExplainContent: "메세지를 입력해 주세요",
169
+ Type: "Explain",
170
+ SecondaryButtonComponentContent: "버튼",
171
+ SecondaryButtonComponentInteractionComponentStatusNormalWidth: "3.5625rem",
172
+ PrimaryButtonComponentContent: "버튼",
173
+ IconComponentCheckAbsoluteHorizontalStart: "18.8427734375%",
174
+ IconComponentCheckAbsoluteHorizontalEnd: "18.8539361954%",
175
+ SecondaryButtonComponentInteractionHidden: void 0,
176
+ PrimaryButtonComponentInteractionHidden: void 0,
177
+ PrimaryButtonComponentRightIconComponentSelectAbsoluteHorizontalStart: "14.5825195312%",
178
+ PrimaryButtonComponentRightIconComponentSelectAbsoluteHorizontalEnd: "14.584145546%",
179
+ PrimaryButtonComponentRightIconComponentSelectAbsoluteVerticalStart: "14.5832824707%",
180
+ PrimaryButtonComponentRightIconComponentSelectAbsoluteVerticalEnd: "14.5833826065%",
181
+ PrimaryButtonComponentInteractionComponentStatusNormalWidth: "3.5625rem",
182
+ handlers: {}
183
+ }, p = {
184
+ "Type=Default": d,
185
+ "Type=Explain": (u) => {
186
+ let d = o(f, u), [p, m] = s(20, .6), [h, g] = s(8, .6), [_, v] = s(4, .6);
187
+ return /* @__PURE__ */ l(i, {
188
+ align: "center",
189
+ gap: "spacing.550",
190
+ px: "spacing.600",
191
+ pt: "spacing.600",
192
+ pb: "spacing.550",
193
+ bg: "components.fill.standard.primary",
194
+ rounded: "radius.700",
195
+ ref: p,
196
+ style: {
197
+ borderRadius: "0",
198
+ clipPath: m
199
+ },
200
+ children: [/* @__PURE__ */ l(i, {
201
+ align: "start",
202
+ gap: "spacing.400",
203
+ alignSelf: "stretch",
204
+ children: [/* @__PURE__ */ l(i, {
205
+ align: "start",
206
+ gap: "spacing.200",
207
+ children: [
208
+ /* @__PURE__ */ c(a.span, {
209
+ textStyle: "heading.strong",
210
+ color: "content.standard.primary",
211
+ textAlign: "left",
212
+ minWidth: "25rem",
213
+ whiteSpace: "nowrap",
214
+ children: d.Title
215
+ }),
216
+ /* @__PURE__ */ c(a.span, {
217
+ textStyle: "label.regular",
218
+ color: "content.standard.secondary",
219
+ textAlign: "left",
220
+ minWidth: "25rem",
221
+ alignSelf: "stretch",
222
+ width: "100%",
223
+ contain: "inline-size",
224
+ whiteSpace: "pre-wrap",
225
+ children: d.Message
226
+ }),
227
+ null
228
+ ]
229
+ }), /* @__PURE__ */ l(i, {
230
+ align: "center",
231
+ justify: "center",
232
+ gap: "spacing.100",
233
+ alignSelf: "stretch",
234
+ contain: "inline-size",
235
+ overflow: "hidden",
236
+ px: "spacing.400",
237
+ py: "spacing.300",
238
+ bg: "components.translucent.tertiary",
239
+ rounded: "radius.300",
240
+ ref: h,
241
+ style: {
242
+ borderRadius: "0",
243
+ clipPath: g
244
+ },
245
+ children: [/* @__PURE__ */ c(r, {
246
+ align: "center",
247
+ gap: "spacing.200",
248
+ alignSelf: "stretch",
249
+ children: /* @__PURE__ */ c(a.span, {
250
+ textStyle: "footnote.strong",
251
+ color: "content.standard.secondary",
252
+ textAlign: "left",
253
+ flex: 1,
254
+ minWidth: 0,
255
+ whiteSpace: "pre-wrap",
256
+ children: d.ExplainTitle
257
+ })
258
+ }), /* @__PURE__ */ c(a.span, {
259
+ textStyle: "footnote.regular",
260
+ color: "content.standard.secondary",
261
+ textAlign: "left",
262
+ alignSelf: "stretch",
263
+ width: "100%",
264
+ contain: "inline-size",
265
+ whiteSpace: "pre-wrap",
266
+ children: d.ExplainContent
267
+ })]
268
+ })]
269
+ }), /* @__PURE__ */ l(r, {
270
+ align: "center",
271
+ justify: "end",
272
+ alignSelf: "stretch",
273
+ transform: "translate(0.125rem, 0rem)",
274
+ children: [d.다시보지않기 === !1 ? null : /* @__PURE__ */ l(r, {
275
+ align: "center",
276
+ gap: "spacing.200",
277
+ flex: 1,
278
+ minWidth: 0,
279
+ transform: "translate(0.125rem, 0.125rem)",
280
+ children: [/* @__PURE__ */ l(r, {
281
+ align: "center",
282
+ justify: "center",
283
+ insetBorder: "1 line.divider",
284
+ position: "relative",
285
+ p: "spacing.50",
286
+ rounded: "radius.100",
287
+ ref: _,
288
+ style: {
289
+ borderRadius: "0",
290
+ clipPath: v
291
+ },
292
+ children: [/* @__PURE__ */ c(t, {
293
+ Type: "check",
294
+ CheckFill: "content.standard.quaternary",
295
+ CheckAbsoluteHorizontalStart: d.IconComponentCheckAbsoluteHorizontalStart,
296
+ CheckAbsoluteHorizontalEnd: d.IconComponentCheckAbsoluteHorizontalEnd,
297
+ CheckAbsoluteVerticalEnd: "27.9490232468%",
298
+ TypeCheckWidth: "1.25rem",
299
+ TypeCheckHeight: "1.25rem",
300
+ CheckAbsoluteVerticalStart: "27.703704834%"
301
+ }), /* @__PURE__ */ c(a.span, {
302
+ style: {
303
+ position: "absolute",
304
+ left: "-0.125rem",
305
+ right: "-0.125rem",
306
+ top: "-0.125rem",
307
+ bottom: "-0.125rem"
308
+ },
309
+ children: /* @__PURE__ */ c(n, {
310
+ Status: "Normal",
311
+ StatusNormalCornerRadius: "radius.200",
312
+ StatusNormalCornerSmoothing: .6,
313
+ StatusNormalWidth: "1.75rem",
314
+ StatusNormalHeight: "1.75rem"
315
+ })
316
+ })]
317
+ }), /* @__PURE__ */ c(a.span, {
318
+ textStyle: "label.regular",
319
+ color: "content.standard.primary",
320
+ textAlign: "left",
321
+ whiteSpace: "nowrap",
322
+ children: "다시 보지 않기"
323
+ })]
324
+ }), /* @__PURE__ */ l(r, {
325
+ align: "start",
326
+ gap: "spacing.200",
327
+ children: [d.LeftBTN === !1 ? null : /* @__PURE__ */ c(e, {
328
+ Label: !0,
329
+ LeftIcon: !1,
330
+ Content: d.SecondaryButtonComponentContent,
331
+ RightIcon: !1,
332
+ Size: "Medium",
333
+ Theme: "Grayscale",
334
+ Style: "Secondary",
335
+ Disabled: "false",
336
+ LeftIconComponentType: "person",
337
+ InteractionHidden: d.SecondaryButtonComponentInteractionHidden,
338
+ InteractionComponentStatusNormalWidth: d.SecondaryButtonComponentInteractionComponentStatusNormalWidth,
339
+ handlers: { onClick: d.handlers.onSecondaryClicked }
340
+ }), /* @__PURE__ */ c(e, {
341
+ Label: !0,
342
+ LeftIcon: !1,
343
+ Content: d.PrimaryButtonComponentContent,
344
+ RightIcon: !1,
345
+ Size: "Medium",
346
+ Theme: "Grayscale",
347
+ Style: "Primary",
348
+ Disabled: "false",
349
+ LeftIconComponentType: "person",
350
+ InteractionHidden: d.PrimaryButtonComponentInteractionHidden,
351
+ InteractionComponentStatusNormalWidth: d.PrimaryButtonComponentInteractionComponentStatusNormalWidth,
352
+ RightIconComponentType: "default",
353
+ RightIconComponentSelectFill: "content.inverted.primary",
354
+ RightIconComponentSelectAbsoluteHorizontalStart: d.PrimaryButtonComponentRightIconComponentSelectAbsoluteHorizontalStart,
355
+ RightIconComponentSelectAbsoluteHorizontalEnd: d.PrimaryButtonComponentRightIconComponentSelectAbsoluteHorizontalEnd,
356
+ RightIconComponentSelectAbsoluteVerticalStart: d.PrimaryButtonComponentRightIconComponentSelectAbsoluteVerticalStart,
357
+ RightIconComponentSelectAbsoluteVerticalEnd: d.PrimaryButtonComponentRightIconComponentSelectAbsoluteVerticalEnd,
358
+ RightIconComponentTypeDefaultWidth: "1.25rem",
359
+ RightIconComponentTypeDefaultHeight: "1.25rem",
360
+ handlers: { onClick: d.handlers.onPrimaryClicked }
361
+ })]
362
+ })]
363
+ })]
364
+ });
365
+ }
366
+ }, m = (e) => {
367
+ let t = p[`Type=${String(e.Type)}`] ?? d;
368
+ return t ? /* @__PURE__ */ c(t, { ...e }) : null;
369
+ };
370
+ //#endregion
371
+ export { m as Modal, m as impl };
package/index.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ import type { FC } from 'react'
2
+ import type { BoxProps } from '@horang-corp/react-system/jsx'
3
+
4
+ export interface ModalProps extends BoxProps {
5
+ [key: string]: unknown
6
+ ExplainContent?: string
7
+ ExplainTitle?: string
8
+ handlers?: Record<string, any>
9
+ LeftBTN?: boolean
10
+ Message?: string
11
+ PrimaryButtonComponentContent?: string
12
+ SecondaryButtonComponentContent?: string
13
+ Title?: string
14
+ Type?: string
15
+ }
16
+
17
+ export declare const Modal: FC<ModalProps>
18
+ export declare const impl: FC<ModalProps>
package/package.json ADDED
@@ -0,0 +1,31 @@
1
+ {
2
+ "name": "@horang-corp/react-modal",
3
+ "version": "0.1.1",
4
+ "type": "module",
5
+ "private": false,
6
+ "sideEffects": false,
7
+ "exports": {
8
+ ".": {
9
+ "types": "./index.d.ts",
10
+ "import": "./dist/index.js"
11
+ }
12
+ },
13
+ "files": [
14
+ "dist",
15
+ "index.d.ts"
16
+ ],
17
+ "scripts": {
18
+ "build": "vite build",
19
+ "pack:local": "pnpm pack"
20
+ },
21
+ "peerDependencies": {
22
+ "react": "^19",
23
+ "react-dom": "^19"
24
+ },
25
+ "dependencies": {
26
+ "@horang-corp/react-button-round": "^0.1.1",
27
+ "@horang-corp/react-icon": "^0.1.1",
28
+ "@horang-corp/react-interaction": "^0.1.1",
29
+ "@horang-corp/react-system": "^0.1.1"
30
+ }
31
+ }