@nurimedia/react-ui 0.1.1 → 0.1.2
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/AlertDialog/index.cjs +4 -181
- package/dist/AlertDialog/index.cjs.map +1 -1
- package/dist/AlertDialog/index.js +4 -145
- package/dist/AlertDialog/index.js.map +1 -1
- package/dist/Button/index.cjs +4 -132
- package/dist/Button/index.cjs.map +1 -1
- package/dist/Button/index.js +4 -106
- package/dist/Button/index.js.map +1 -1
- package/dist/Checkbox/index.cjs +4 -79
- package/dist/Checkbox/index.cjs.map +1 -1
- package/dist/Checkbox/index.js +4 -43
- package/dist/Checkbox/index.js.map +1 -1
- package/dist/Input/index.cjs +4 -99
- package/dist/Input/index.cjs.map +1 -1
- package/dist/Input/index.js +4 -73
- package/dist/Input/index.js.map +1 -1
- package/dist/Modal/index.cjs +4 -116
- package/dist/Modal/index.cjs.map +1 -1
- package/dist/Modal/index.js +4 -80
- package/dist/Modal/index.js.map +1 -1
- package/dist/Radio/index.cjs +6 -82
- package/dist/Radio/index.cjs.map +1 -1
- package/dist/Radio/index.js +5 -44
- package/dist/Radio/index.js.map +1 -1
- package/dist/Select/index.cjs +4 -112
- package/dist/Select/index.cjs.map +1 -1
- package/dist/Select/index.js +4 -76
- package/dist/Select/index.js.map +1 -1
- package/dist/Switch/index.cjs +4 -67
- package/dist/Switch/index.cjs.map +1 -1
- package/dist/Switch/index.js +4 -31
- package/dist/Switch/index.js.map +1 -1
- package/dist/Textarea/index.cjs +4 -123
- package/dist/Textarea/index.cjs.map +1 -1
- package/dist/Textarea/index.js +4 -97
- package/dist/Textarea/index.js.map +1 -1
- package/dist/Toast/index.cjs +4 -178
- package/dist/Toast/index.cjs.map +1 -1
- package/dist/Toast/index.js +5 -142
- package/dist/Toast/index.js.map +1 -1
- package/dist/Tooltip/index.cjs +6 -101
- package/dist/Tooltip/index.cjs.map +1 -1
- package/dist/Tooltip/index.js +5 -63
- package/dist/Tooltip/index.js.map +1 -1
- package/dist/chunk-2LFW4MM6.cjs +47 -0
- package/dist/chunk-2LFW4MM6.cjs.map +1 -0
- package/dist/chunk-2WKLA5RC.cjs +82 -0
- package/dist/chunk-2WKLA5RC.cjs.map +1 -0
- package/dist/chunk-2YGYLCCA.js +66 -0
- package/dist/chunk-2YGYLCCA.js.map +1 -0
- package/dist/chunk-323VGYMK.cjs +147 -0
- package/dist/chunk-323VGYMK.cjs.map +1 -0
- package/dist/chunk-3H47QMKS.js +47 -0
- package/dist/chunk-3H47QMKS.js.map +1 -0
- package/dist/chunk-3QSLHLC2.cjs +45 -0
- package/dist/chunk-3QSLHLC2.cjs.map +1 -0
- package/dist/chunk-4N5JIGIU.js +82 -0
- package/dist/chunk-4N5JIGIU.js.map +1 -0
- package/dist/chunk-DTGPVOJK.js +99 -0
- package/dist/chunk-DTGPVOJK.js.map +1 -0
- package/dist/chunk-DTQE42F7.js +33 -0
- package/dist/chunk-DTQE42F7.js.map +1 -0
- package/dist/chunk-DYO4PIBB.js +75 -0
- package/dist/chunk-DYO4PIBB.js.map +1 -0
- package/dist/chunk-GBMYANHH.js +149 -0
- package/dist/chunk-GBMYANHH.js.map +1 -0
- package/dist/chunk-I7KJ7WTN.cjs +149 -0
- package/dist/chunk-I7KJ7WTN.cjs.map +1 -0
- package/dist/chunk-JM4HDCLU.cjs +110 -0
- package/dist/chunk-JM4HDCLU.cjs.map +1 -0
- package/dist/chunk-JXJ6G634.cjs +75 -0
- package/dist/chunk-JXJ6G634.cjs.map +1 -0
- package/dist/chunk-LAPTEQ5N.js +45 -0
- package/dist/chunk-LAPTEQ5N.js.map +1 -0
- package/dist/chunk-LRATCHCB.cjs +66 -0
- package/dist/chunk-LRATCHCB.cjs.map +1 -0
- package/dist/chunk-OM4QMC4F.js +110 -0
- package/dist/chunk-OM4QMC4F.js.map +1 -0
- package/dist/chunk-PAXRFQUJ.cjs +33 -0
- package/dist/chunk-PAXRFQUJ.cjs.map +1 -0
- package/dist/chunk-PC3B67B4.cjs +78 -0
- package/dist/chunk-PC3B67B4.cjs.map +1 -0
- package/dist/chunk-PS6QXS5Z.js +11 -0
- package/dist/chunk-PS6QXS5Z.js.map +1 -0
- package/dist/chunk-Q26BJSLP.cjs +99 -0
- package/dist/chunk-Q26BJSLP.cjs.map +1 -0
- package/dist/chunk-R4E4BIPC.cjs +11 -0
- package/dist/chunk-R4E4BIPC.cjs.map +1 -0
- package/dist/chunk-R757N7RU.js +78 -0
- package/dist/chunk-R757N7RU.js.map +1 -0
- package/dist/chunk-RC773ZEY.js +147 -0
- package/dist/chunk-RC773ZEY.js.map +1 -0
- package/dist/index.cjs +54 -900
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +37 -834
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,186 +1,9 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
"use strict";
|
|
3
|
-
var __create = Object.create;
|
|
4
|
-
var __defProp = Object.defineProperty;
|
|
5
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
8
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
-
var __export = (target, all) => {
|
|
10
|
-
for (var name in all)
|
|
11
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
-
};
|
|
13
|
-
var __copyProps = (to, from, except, desc) => {
|
|
14
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
15
|
-
for (let key of __getOwnPropNames(from))
|
|
16
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
17
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
|
-
}
|
|
19
|
-
return to;
|
|
20
|
-
};
|
|
21
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
26
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
27
|
-
mod
|
|
28
|
-
));
|
|
29
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});'use client';
|
|
30
2
|
|
|
31
|
-
// src/AlertDialog/index.ts
|
|
32
|
-
var AlertDialog_exports = {};
|
|
33
|
-
__export(AlertDialog_exports, {
|
|
34
|
-
AlertDialog: () => AlertDialog
|
|
35
|
-
});
|
|
36
|
-
module.exports = __toCommonJS(AlertDialog_exports);
|
|
37
3
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
var Alert = __toESM(require("@radix-ui/react-alert-dialog"), 1);
|
|
41
|
-
var import_react = require("react");
|
|
4
|
+
var _chunkI7KJ7WTNcjs = require('../chunk-I7KJ7WTN.cjs');
|
|
5
|
+
require('../chunk-R4E4BIPC.cjs');
|
|
42
6
|
|
|
43
|
-
// src/utils/cx.ts
|
|
44
|
-
function cx(...classes) {
|
|
45
|
-
return classes.filter(Boolean).join(" ");
|
|
46
|
-
}
|
|
47
7
|
|
|
48
|
-
|
|
49
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
50
|
-
var SuccessIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
|
|
51
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "12", fill: "var(--nuri-alert-tone-success-bg)" }),
|
|
52
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
53
|
-
"path",
|
|
54
|
-
{
|
|
55
|
-
d: "M15.77 9.58L10.65 14.70L8.90 12.95",
|
|
56
|
-
stroke: "var(--nuri-alert-tone-success-fg)",
|
|
57
|
-
strokeWidth: "2.5",
|
|
58
|
-
strokeLinecap: "round",
|
|
59
|
-
strokeLinejoin: "round"
|
|
60
|
-
}
|
|
61
|
-
)
|
|
62
|
-
] });
|
|
63
|
-
var WarningIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
|
|
64
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "12", fill: "var(--nuri-alert-tone-warning-bg)" }),
|
|
65
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
66
|
-
"path",
|
|
67
|
-
{
|
|
68
|
-
d: "M12 6.75V12",
|
|
69
|
-
stroke: "var(--nuri-alert-tone-warning-fg)",
|
|
70
|
-
strokeWidth: "2.5",
|
|
71
|
-
strokeLinecap: "round"
|
|
72
|
-
}
|
|
73
|
-
),
|
|
74
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "16.31", r: "1.1", fill: "var(--nuri-alert-tone-warning-fg)" })
|
|
75
|
-
] });
|
|
76
|
-
var InfoIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
|
|
77
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "12", fill: "var(--nuri-alert-tone-info-bg)" }),
|
|
78
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
79
|
-
"path",
|
|
80
|
-
{
|
|
81
|
-
d: "M12.25 7h0.01",
|
|
82
|
-
stroke: "var(--nuri-alert-tone-info-fg)",
|
|
83
|
-
strokeWidth: "3",
|
|
84
|
-
strokeLinecap: "round",
|
|
85
|
-
strokeLinejoin: "round"
|
|
86
|
-
}
|
|
87
|
-
),
|
|
88
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
89
|
-
"path",
|
|
90
|
-
{
|
|
91
|
-
d: "M11 12h1.25v5h1.25",
|
|
92
|
-
stroke: "var(--nuri-alert-tone-info-fg)",
|
|
93
|
-
strokeWidth: "2.5",
|
|
94
|
-
strokeLinecap: "round",
|
|
95
|
-
strokeLinejoin: "round"
|
|
96
|
-
}
|
|
97
|
-
)
|
|
98
|
-
] });
|
|
99
|
-
var defaultToneIcon = {
|
|
100
|
-
info: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InfoIcon, {}),
|
|
101
|
-
success: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SuccessIcon, {}),
|
|
102
|
-
warning: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WarningIcon, {})
|
|
103
|
-
};
|
|
104
|
-
|
|
105
|
-
// src/AlertDialog/AlertDialog.tsx
|
|
106
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
107
|
-
var Root2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Alert.Root, { ...props });
|
|
108
|
-
Root2.displayName = "AlertDialog";
|
|
109
|
-
var Trigger2 = Alert.Trigger;
|
|
110
|
-
var Content2 = (0, import_react.forwardRef)(
|
|
111
|
-
function AlertDialogContent({ tone = "info", icon, overlay = true, container, className, children, ...rest }, ref) {
|
|
112
|
-
const resolvedIcon = icon === void 0 ? defaultToneIcon[tone] : icon;
|
|
113
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Alert.Portal, { container, children: [
|
|
114
|
-
overlay && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Alert.Overlay, { className: "nuri-alert__overlay" }),
|
|
115
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
116
|
-
Alert.Content,
|
|
117
|
-
{
|
|
118
|
-
ref,
|
|
119
|
-
className: cx("nuri-alert", `nuri-alert--${tone}`, className),
|
|
120
|
-
...rest,
|
|
121
|
-
children: [
|
|
122
|
-
resolvedIcon != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "nuri-alert__icon", "aria-hidden": "true", children: resolvedIcon }),
|
|
123
|
-
children
|
|
124
|
-
]
|
|
125
|
-
}
|
|
126
|
-
)
|
|
127
|
-
] });
|
|
128
|
-
}
|
|
129
|
-
);
|
|
130
|
-
var Header = (0, import_react.forwardRef)(
|
|
131
|
-
function AlertDialogHeader({ className, ...rest }, ref) {
|
|
132
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: cx("nuri-alert__header", className), ...rest });
|
|
133
|
-
}
|
|
134
|
-
);
|
|
135
|
-
var Title2 = (0, import_react.forwardRef)(function AlertDialogTitle({ className, ...rest }, ref) {
|
|
136
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Alert.Title, { ref, className: cx("nuri-alert__title", className), ...rest });
|
|
137
|
-
});
|
|
138
|
-
var Description2 = (0, import_react.forwardRef)(function AlertDialogDescription({ className, ...rest }, ref) {
|
|
139
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Alert.Description, { ref, className: cx("nuri-alert__description", className), ...rest });
|
|
140
|
-
});
|
|
141
|
-
var Body = (0, import_react.forwardRef)(function AlertDialogBody({ className, ...rest }, ref) {
|
|
142
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: cx("nuri-alert__body", className), ...rest });
|
|
143
|
-
});
|
|
144
|
-
var Footer = (0, import_react.forwardRef)(function AlertDialogFooter({ align = "full", className, ...rest }, ref) {
|
|
145
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
146
|
-
"div",
|
|
147
|
-
{
|
|
148
|
-
ref,
|
|
149
|
-
className: cx("nuri-alert__footer", `nuri-alert__footer--${align}`, className),
|
|
150
|
-
...rest
|
|
151
|
-
}
|
|
152
|
-
);
|
|
153
|
-
});
|
|
154
|
-
var Action2 = Alert.Action;
|
|
155
|
-
var Cancel2 = Alert.Cancel;
|
|
156
|
-
var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M5 5l10 10M15 5L5 15", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
|
|
157
|
-
var CloseButton = (0, import_react.forwardRef)(function AlertDialogCloseButton({ className, "aria-label": ariaLabel = "\uB2EB\uAE30", children, ...rest }, ref) {
|
|
158
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Alert.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
159
|
-
"button",
|
|
160
|
-
{
|
|
161
|
-
ref,
|
|
162
|
-
type: "button",
|
|
163
|
-
"aria-label": ariaLabel,
|
|
164
|
-
className: cx("nuri-alert__close", className),
|
|
165
|
-
...rest,
|
|
166
|
-
children: children ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CloseIcon, {})
|
|
167
|
-
}
|
|
168
|
-
) });
|
|
169
|
-
});
|
|
170
|
-
var AlertDialog = Object.assign(Root2, {
|
|
171
|
-
Trigger: Trigger2,
|
|
172
|
-
Content: Content2,
|
|
173
|
-
Header,
|
|
174
|
-
Title: Title2,
|
|
175
|
-
Description: Description2,
|
|
176
|
-
Body,
|
|
177
|
-
Footer,
|
|
178
|
-
Action: Action2,
|
|
179
|
-
Cancel: Cancel2,
|
|
180
|
-
CloseButton
|
|
181
|
-
});
|
|
182
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
183
|
-
0 && (module.exports = {
|
|
184
|
-
AlertDialog
|
|
185
|
-
});
|
|
8
|
+
exports.AlertDialog = _chunkI7KJ7WTNcjs.AlertDialog;
|
|
186
9
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/AlertDialog/index.ts","../../src/AlertDialog/AlertDialog.tsx","../../src/utils/cx.ts","../../src/AlertDialog/icons.tsx"],"sourcesContent":["export { AlertDialog } from './AlertDialog.js';\nexport type { AlertDialogContentProps, AlertDialogFooterProps } from './AlertDialog.js';\n","'use client';\n\nimport './styles.css';\nimport * as Alert from '@radix-ui/react-alert-dialog';\nimport { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef, ElementRef, ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\nimport { defaultToneIcon } from './icons.js';\n\ntype Tone = 'info' | 'success' | 'warning';\n\n/**\n * 확인 강제형 다이얼로그 (alertdialog). Radix AlertDialog 기반.\n *\n * 일반 Modal과의 차이:\n * - `role=\"alertdialog\"` — 스크린리더가 더 강하게 안내\n * - **바깥(백드롭) 클릭으로 닫히지 않음** — 실수로 닫히는 것 방지\n * - 포커스가 기본적으로 Cancel(취소)에 위치 — 실수로 위험 액션 방지\n * - **중앙 정렬 + 상단 아이콘** (디자인 시스템 표준 레이아웃)\n *\n * Esc 키는 닫힘(키보드 탈출구 — 접근성). 막으려면 Content에 `onEscapeKeyDown` 전달.\n *\n * @example\n * <AlertDialog>\n * <AlertDialog.Trigger asChild><Button>삭제</Button></AlertDialog.Trigger>\n * <AlertDialog.Content tone=\"warning\">\n * <AlertDialog.Header>\n * <AlertDialog.Title>정말 삭제할까요?</AlertDialog.Title>\n * <AlertDialog.Description>되돌릴 수 없습니다.</AlertDialog.Description>\n * </AlertDialog.Header>\n * <AlertDialog.Footer>\n * <AlertDialog.Cancel asChild><Button variant=\"outline\">취소</Button></AlertDialog.Cancel>\n * <AlertDialog.Action asChild><Button onClick={onDelete}>삭제</Button></AlertDialog.Action>\n * </AlertDialog.Footer>\n * </AlertDialog.Content>\n * </AlertDialog>\n */\nconst Root = (props: ComponentPropsWithoutRef<typeof Alert.Root>) => <Alert.Root {...props} />;\nRoot.displayName = 'AlertDialog';\n\n/** 다이얼로그를 여는 트리거. `asChild`로 임의 엘리먼트에 위임. */\nconst Trigger = Alert.Trigger;\n\nexport interface AlertDialogContentProps extends ComponentPropsWithoutRef<typeof Alert.Content> {\n /**\n * 상태 톤 — 기본 아이콘과 그 색을 결정.\n * @default 'info'\n */\n tone?: Tone;\n /**\n * 상단 아이콘.\n * - 미지정: `tone`에 맞는 **기본 아이콘** 자동 렌더\n * - `ReactNode`: 커스텀 아이콘으로 교체\n * - `null`: 아이콘 제거\n */\n icon?: ReactNode | null;\n /** 백드롭(오버레이) 표시 여부. @default true */\n overlay?: boolean;\n /** 포털 렌더 대상. 기본은 document.body. 다른 요소에 렌더하려면 지정. */\n container?: HTMLElement | null;\n}\n\n/** 오버레이 + 포털 + 패널을 한 번에 렌더. 중앙 정렬 + 상단 아이콘 레이아웃. */\nconst Content = forwardRef<ElementRef<typeof Alert.Content>, AlertDialogContentProps>(\n function AlertDialogContent(\n { tone = 'info', icon, overlay = true, container, className, children, ...rest },\n ref,\n ) {\n // icon 미지정(undefined) → 기본 tone 아이콘 / null → 제거 / ReactNode → 교체\n const resolvedIcon = icon === undefined ? defaultToneIcon[tone] : icon;\n return (\n <Alert.Portal container={container}>\n {overlay && <Alert.Overlay className=\"nuri-alert__overlay\" />}\n <Alert.Content\n ref={ref}\n className={cx('nuri-alert', `nuri-alert--${tone}`, className)}\n {...rest}\n >\n {resolvedIcon != null && (\n <div className=\"nuri-alert__icon\" aria-hidden=\"true\">\n {resolvedIcon}\n </div>\n )}\n {children}\n </Alert.Content>\n </Alert.Portal>\n );\n },\n);\n\n/** 헤더 슬롯 (Title/Description 묶음, 중앙 정렬). */\nconst Header = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n function AlertDialogHeader({ className, ...rest }, ref) {\n return <div ref={ref} className={cx('nuri-alert__header', className)} {...rest} />;\n },\n);\n\n/** 제목. 자동으로 `aria-labelledby`로 연결됨. */\nconst Title = forwardRef<\n ElementRef<typeof Alert.Title>,\n ComponentPropsWithoutRef<typeof Alert.Title>\n>(function AlertDialogTitle({ className, ...rest }, ref) {\n return <Alert.Title ref={ref} className={cx('nuri-alert__title', className)} {...rest} />;\n});\n\n/** 설명. 자동으로 `aria-describedby`로 연결됨. */\nconst Description = forwardRef<\n ElementRef<typeof Alert.Description>,\n ComponentPropsWithoutRef<typeof Alert.Description>\n>(function AlertDialogDescription({ className, ...rest }, ref) {\n return (\n <Alert.Description ref={ref} className={cx('nuri-alert__description', className)} {...rest} />\n );\n});\n\n/** 본문 슬롯 (추가 콘텐츠). */\nconst Body = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(function AlertDialogBody(\n { className, ...rest },\n ref,\n) {\n return <div ref={ref} className={cx('nuri-alert__body', className)} {...rest} />;\n});\n\nexport interface AlertDialogFooterProps extends ComponentPropsWithoutRef<'div'> {\n /**\n * 버튼 정렬. 디자인 표준은 전체너비 버튼이라 기본값 `full`.\n * @default 'full'\n */\n align?: 'start' | 'center' | 'end' | 'between' | 'full';\n}\n\n/** 푸터 슬롯 (Cancel/Action 배치). 기본 전체너비(`full`). */\nconst Footer = forwardRef<HTMLDivElement, AlertDialogFooterProps>(function AlertDialogFooter(\n { align = 'full', className, ...rest },\n ref,\n) {\n return (\n <div\n ref={ref}\n className={cx('nuri-alert__footer', `nuri-alert__footer--${align}`, className)}\n {...rest}\n />\n );\n});\n\n/**\n * 확인(주 액션) 버튼. 클릭 시 닫힘. `asChild`로 Button 위임.\n * @example <AlertDialog.Action asChild><Button onClick={onConfirm}>삭제</Button></AlertDialog.Action>\n */\nconst Action = Alert.Action;\n\n/**\n * 취소 버튼. 클릭 시 닫힘. 포커스가 기본적으로 여기 위치.\n * @example <AlertDialog.Cancel asChild><Button variant=\"outline\">취소</Button></AlertDialog.Cancel>\n */\nconst Cancel = Alert.Cancel;\n\nconst CloseIcon = () => (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M5 5l10 10M15 5L5 15\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n </svg>\n);\n\n/**\n * 우상단 X 닫기 버튼 (옵션). 내부적으로 Cancel과 동일하게 닫힘. 기본 `aria-label=\"닫기\"`.\n * 확인을 강제하려면 사용하지 않는 편이 좋습니다 (Cancel/Action으로 명시적 선택 유도).\n */\nconst CloseButton = forwardRef<\n HTMLButtonElement,\n Omit<ComponentPropsWithoutRef<'button'>, 'children'> & { children?: ReactNode }\n>(function AlertDialogCloseButton(\n { className, 'aria-label': ariaLabel = '닫기', children, ...rest },\n ref,\n) {\n return (\n <Alert.Cancel asChild>\n <button\n ref={ref}\n type=\"button\"\n aria-label={ariaLabel}\n className={cx('nuri-alert__close', className)}\n {...rest}\n >\n {children ?? <CloseIcon />}\n </button>\n </Alert.Cancel>\n );\n});\n\nexport const AlertDialog = Object.assign(Root, {\n Trigger,\n Content,\n Header,\n Title,\n Description,\n Body,\n Footer,\n Action,\n Cancel,\n CloseButton,\n});\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n return classes.filter(Boolean).join(' ');\n}\n","/**\n * tone별 기본 아이콘 — 디자이너 시스템(Figma) 에셋을 그대로 inline SVG로 재현.\n * 구조: 틴트 원 배경 + tone 색 심볼. 색은 토큰(`--nuri-alert-tone-*`)으로 분리.\n * AlertDialog.Content의 `icon` 미지정 시 tone에 맞춰 자동 렌더.\n * `icon={<Custom/>}`로 교체, `icon={null}`로 제거 가능.\n */\nimport type { ReactNode } from 'react';\n\nconst SuccessIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"var(--nuri-alert-tone-success-bg)\" />\n <path\n d=\"M15.77 9.58L10.65 14.70L8.90 12.95\"\n stroke=\"var(--nuri-alert-tone-success-fg)\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nconst WarningIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"var(--nuri-alert-tone-warning-bg)\" />\n <path\n d=\"M12 6.75V12\"\n stroke=\"var(--nuri-alert-tone-warning-fg)\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n />\n <circle cx=\"12\" cy=\"16.31\" r=\"1.1\" fill=\"var(--nuri-alert-tone-warning-fg)\" />\n </svg>\n);\n\nconst InfoIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"var(--nuri-alert-tone-info-bg)\" />\n <path\n d=\"M12.25 7h0.01\"\n stroke=\"var(--nuri-alert-tone-info-fg)\"\n strokeWidth=\"3\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M11 12h1.25v5h1.25\"\n stroke=\"var(--nuri-alert-tone-info-fg)\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nexport const defaultToneIcon: Record<'info' | 'success' | 'warning', ReactNode> = {\n info: <InfoIcon />,\n success: <SuccessIcon />,\n warning: <WarningIcon />,\n};\n"],"mappings":"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","names":["import_jsx_runtime","Root","Trigger","Content","Title","Description","Action","Cancel"]}
|
|
1
|
+
{"version":3,"sources":["/Users/summerhoony/Desktop/projects/nuri-ui/dist/AlertDialog/index.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACE;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACF,oDAAC","file":"/Users/summerhoony/Desktop/projects/nuri-ui/dist/AlertDialog/index.cjs"}
|
|
@@ -1,149 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
import
|
|
6
|
-
import { forwardRef } from "react";
|
|
7
|
-
|
|
8
|
-
// src/utils/cx.ts
|
|
9
|
-
function cx(...classes) {
|
|
10
|
-
return classes.filter(Boolean).join(" ");
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
// src/AlertDialog/icons.tsx
|
|
14
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
15
|
-
var SuccessIcon = () => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
|
|
16
|
-
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "12", fill: "var(--nuri-alert-tone-success-bg)" }),
|
|
17
|
-
/* @__PURE__ */ jsx(
|
|
18
|
-
"path",
|
|
19
|
-
{
|
|
20
|
-
d: "M15.77 9.58L10.65 14.70L8.90 12.95",
|
|
21
|
-
stroke: "var(--nuri-alert-tone-success-fg)",
|
|
22
|
-
strokeWidth: "2.5",
|
|
23
|
-
strokeLinecap: "round",
|
|
24
|
-
strokeLinejoin: "round"
|
|
25
|
-
}
|
|
26
|
-
)
|
|
27
|
-
] });
|
|
28
|
-
var WarningIcon = () => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
|
|
29
|
-
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "12", fill: "var(--nuri-alert-tone-warning-bg)" }),
|
|
30
|
-
/* @__PURE__ */ jsx(
|
|
31
|
-
"path",
|
|
32
|
-
{
|
|
33
|
-
d: "M12 6.75V12",
|
|
34
|
-
stroke: "var(--nuri-alert-tone-warning-fg)",
|
|
35
|
-
strokeWidth: "2.5",
|
|
36
|
-
strokeLinecap: "round"
|
|
37
|
-
}
|
|
38
|
-
),
|
|
39
|
-
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "16.31", r: "1.1", fill: "var(--nuri-alert-tone-warning-fg)" })
|
|
40
|
-
] });
|
|
41
|
-
var InfoIcon = () => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
|
|
42
|
-
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "12", fill: "var(--nuri-alert-tone-info-bg)" }),
|
|
43
|
-
/* @__PURE__ */ jsx(
|
|
44
|
-
"path",
|
|
45
|
-
{
|
|
46
|
-
d: "M12.25 7h0.01",
|
|
47
|
-
stroke: "var(--nuri-alert-tone-info-fg)",
|
|
48
|
-
strokeWidth: "3",
|
|
49
|
-
strokeLinecap: "round",
|
|
50
|
-
strokeLinejoin: "round"
|
|
51
|
-
}
|
|
52
|
-
),
|
|
53
|
-
/* @__PURE__ */ jsx(
|
|
54
|
-
"path",
|
|
55
|
-
{
|
|
56
|
-
d: "M11 12h1.25v5h1.25",
|
|
57
|
-
stroke: "var(--nuri-alert-tone-info-fg)",
|
|
58
|
-
strokeWidth: "2.5",
|
|
59
|
-
strokeLinecap: "round",
|
|
60
|
-
strokeLinejoin: "round"
|
|
61
|
-
}
|
|
62
|
-
)
|
|
63
|
-
] });
|
|
64
|
-
var defaultToneIcon = {
|
|
65
|
-
info: /* @__PURE__ */ jsx(InfoIcon, {}),
|
|
66
|
-
success: /* @__PURE__ */ jsx(SuccessIcon, {}),
|
|
67
|
-
warning: /* @__PURE__ */ jsx(WarningIcon, {})
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
// src/AlertDialog/AlertDialog.tsx
|
|
71
|
-
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
72
|
-
var Root2 = (props) => /* @__PURE__ */ jsx2(Alert.Root, { ...props });
|
|
73
|
-
Root2.displayName = "AlertDialog";
|
|
74
|
-
var Trigger2 = Alert.Trigger;
|
|
75
|
-
var Content2 = forwardRef(
|
|
76
|
-
function AlertDialogContent({ tone = "info", icon, overlay = true, container, className, children, ...rest }, ref) {
|
|
77
|
-
const resolvedIcon = icon === void 0 ? defaultToneIcon[tone] : icon;
|
|
78
|
-
return /* @__PURE__ */ jsxs2(Alert.Portal, { container, children: [
|
|
79
|
-
overlay && /* @__PURE__ */ jsx2(Alert.Overlay, { className: "nuri-alert__overlay" }),
|
|
80
|
-
/* @__PURE__ */ jsxs2(
|
|
81
|
-
Alert.Content,
|
|
82
|
-
{
|
|
83
|
-
ref,
|
|
84
|
-
className: cx("nuri-alert", `nuri-alert--${tone}`, className),
|
|
85
|
-
...rest,
|
|
86
|
-
children: [
|
|
87
|
-
resolvedIcon != null && /* @__PURE__ */ jsx2("div", { className: "nuri-alert__icon", "aria-hidden": "true", children: resolvedIcon }),
|
|
88
|
-
children
|
|
89
|
-
]
|
|
90
|
-
}
|
|
91
|
-
)
|
|
92
|
-
] });
|
|
93
|
-
}
|
|
94
|
-
);
|
|
95
|
-
var Header = forwardRef(
|
|
96
|
-
function AlertDialogHeader({ className, ...rest }, ref) {
|
|
97
|
-
return /* @__PURE__ */ jsx2("div", { ref, className: cx("nuri-alert__header", className), ...rest });
|
|
98
|
-
}
|
|
99
|
-
);
|
|
100
|
-
var Title2 = forwardRef(function AlertDialogTitle({ className, ...rest }, ref) {
|
|
101
|
-
return /* @__PURE__ */ jsx2(Alert.Title, { ref, className: cx("nuri-alert__title", className), ...rest });
|
|
102
|
-
});
|
|
103
|
-
var Description2 = forwardRef(function AlertDialogDescription({ className, ...rest }, ref) {
|
|
104
|
-
return /* @__PURE__ */ jsx2(Alert.Description, { ref, className: cx("nuri-alert__description", className), ...rest });
|
|
105
|
-
});
|
|
106
|
-
var Body = forwardRef(function AlertDialogBody({ className, ...rest }, ref) {
|
|
107
|
-
return /* @__PURE__ */ jsx2("div", { ref, className: cx("nuri-alert__body", className), ...rest });
|
|
108
|
-
});
|
|
109
|
-
var Footer = forwardRef(function AlertDialogFooter({ align = "full", className, ...rest }, ref) {
|
|
110
|
-
return /* @__PURE__ */ jsx2(
|
|
111
|
-
"div",
|
|
112
|
-
{
|
|
113
|
-
ref,
|
|
114
|
-
className: cx("nuri-alert__footer", `nuri-alert__footer--${align}`, className),
|
|
115
|
-
...rest
|
|
116
|
-
}
|
|
117
|
-
);
|
|
118
|
-
});
|
|
119
|
-
var Action2 = Alert.Action;
|
|
120
|
-
var Cancel2 = Alert.Cancel;
|
|
121
|
-
var CloseIcon = () => /* @__PURE__ */ jsx2("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M5 5l10 10M15 5L5 15", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
|
|
122
|
-
var CloseButton = forwardRef(function AlertDialogCloseButton({ className, "aria-label": ariaLabel = "\uB2EB\uAE30", children, ...rest }, ref) {
|
|
123
|
-
return /* @__PURE__ */ jsx2(Alert.Cancel, { asChild: true, children: /* @__PURE__ */ jsx2(
|
|
124
|
-
"button",
|
|
125
|
-
{
|
|
126
|
-
ref,
|
|
127
|
-
type: "button",
|
|
128
|
-
"aria-label": ariaLabel,
|
|
129
|
-
className: cx("nuri-alert__close", className),
|
|
130
|
-
...rest,
|
|
131
|
-
children: children ?? /* @__PURE__ */ jsx2(CloseIcon, {})
|
|
132
|
-
}
|
|
133
|
-
) });
|
|
134
|
-
});
|
|
135
|
-
var AlertDialog = Object.assign(Root2, {
|
|
136
|
-
Trigger: Trigger2,
|
|
137
|
-
Content: Content2,
|
|
138
|
-
Header,
|
|
139
|
-
Title: Title2,
|
|
140
|
-
Description: Description2,
|
|
141
|
-
Body,
|
|
142
|
-
Footer,
|
|
143
|
-
Action: Action2,
|
|
144
|
-
Cancel: Cancel2,
|
|
145
|
-
CloseButton
|
|
146
|
-
});
|
|
2
|
+
import {
|
|
3
|
+
AlertDialog
|
|
4
|
+
} from "../chunk-GBMYANHH.js";
|
|
5
|
+
import "../chunk-PS6QXS5Z.js";
|
|
147
6
|
export {
|
|
148
7
|
AlertDialog
|
|
149
8
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/AlertDialog/AlertDialog.tsx","../../src/utils/cx.ts","../../src/AlertDialog/icons.tsx"],"sourcesContent":["'use client';\n\nimport './styles.css';\nimport * as Alert from '@radix-ui/react-alert-dialog';\nimport { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef, ElementRef, ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\nimport { defaultToneIcon } from './icons.js';\n\ntype Tone = 'info' | 'success' | 'warning';\n\n/**\n * 확인 강제형 다이얼로그 (alertdialog). Radix AlertDialog 기반.\n *\n * 일반 Modal과의 차이:\n * - `role=\"alertdialog\"` — 스크린리더가 더 강하게 안내\n * - **바깥(백드롭) 클릭으로 닫히지 않음** — 실수로 닫히는 것 방지\n * - 포커스가 기본적으로 Cancel(취소)에 위치 — 실수로 위험 액션 방지\n * - **중앙 정렬 + 상단 아이콘** (디자인 시스템 표준 레이아웃)\n *\n * Esc 키는 닫힘(키보드 탈출구 — 접근성). 막으려면 Content에 `onEscapeKeyDown` 전달.\n *\n * @example\n * <AlertDialog>\n * <AlertDialog.Trigger asChild><Button>삭제</Button></AlertDialog.Trigger>\n * <AlertDialog.Content tone=\"warning\">\n * <AlertDialog.Header>\n * <AlertDialog.Title>정말 삭제할까요?</AlertDialog.Title>\n * <AlertDialog.Description>되돌릴 수 없습니다.</AlertDialog.Description>\n * </AlertDialog.Header>\n * <AlertDialog.Footer>\n * <AlertDialog.Cancel asChild><Button variant=\"outline\">취소</Button></AlertDialog.Cancel>\n * <AlertDialog.Action asChild><Button onClick={onDelete}>삭제</Button></AlertDialog.Action>\n * </AlertDialog.Footer>\n * </AlertDialog.Content>\n * </AlertDialog>\n */\nconst Root = (props: ComponentPropsWithoutRef<typeof Alert.Root>) => <Alert.Root {...props} />;\nRoot.displayName = 'AlertDialog';\n\n/** 다이얼로그를 여는 트리거. `asChild`로 임의 엘리먼트에 위임. */\nconst Trigger = Alert.Trigger;\n\nexport interface AlertDialogContentProps extends ComponentPropsWithoutRef<typeof Alert.Content> {\n /**\n * 상태 톤 — 기본 아이콘과 그 색을 결정.\n * @default 'info'\n */\n tone?: Tone;\n /**\n * 상단 아이콘.\n * - 미지정: `tone`에 맞는 **기본 아이콘** 자동 렌더\n * - `ReactNode`: 커스텀 아이콘으로 교체\n * - `null`: 아이콘 제거\n */\n icon?: ReactNode | null;\n /** 백드롭(오버레이) 표시 여부. @default true */\n overlay?: boolean;\n /** 포털 렌더 대상. 기본은 document.body. 다른 요소에 렌더하려면 지정. */\n container?: HTMLElement | null;\n}\n\n/** 오버레이 + 포털 + 패널을 한 번에 렌더. 중앙 정렬 + 상단 아이콘 레이아웃. */\nconst Content = forwardRef<ElementRef<typeof Alert.Content>, AlertDialogContentProps>(\n function AlertDialogContent(\n { tone = 'info', icon, overlay = true, container, className, children, ...rest },\n ref,\n ) {\n // icon 미지정(undefined) → 기본 tone 아이콘 / null → 제거 / ReactNode → 교체\n const resolvedIcon = icon === undefined ? defaultToneIcon[tone] : icon;\n return (\n <Alert.Portal container={container}>\n {overlay && <Alert.Overlay className=\"nuri-alert__overlay\" />}\n <Alert.Content\n ref={ref}\n className={cx('nuri-alert', `nuri-alert--${tone}`, className)}\n {...rest}\n >\n {resolvedIcon != null && (\n <div className=\"nuri-alert__icon\" aria-hidden=\"true\">\n {resolvedIcon}\n </div>\n )}\n {children}\n </Alert.Content>\n </Alert.Portal>\n );\n },\n);\n\n/** 헤더 슬롯 (Title/Description 묶음, 중앙 정렬). */\nconst Header = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n function AlertDialogHeader({ className, ...rest }, ref) {\n return <div ref={ref} className={cx('nuri-alert__header', className)} {...rest} />;\n },\n);\n\n/** 제목. 자동으로 `aria-labelledby`로 연결됨. */\nconst Title = forwardRef<\n ElementRef<typeof Alert.Title>,\n ComponentPropsWithoutRef<typeof Alert.Title>\n>(function AlertDialogTitle({ className, ...rest }, ref) {\n return <Alert.Title ref={ref} className={cx('nuri-alert__title', className)} {...rest} />;\n});\n\n/** 설명. 자동으로 `aria-describedby`로 연결됨. */\nconst Description = forwardRef<\n ElementRef<typeof Alert.Description>,\n ComponentPropsWithoutRef<typeof Alert.Description>\n>(function AlertDialogDescription({ className, ...rest }, ref) {\n return (\n <Alert.Description ref={ref} className={cx('nuri-alert__description', className)} {...rest} />\n );\n});\n\n/** 본문 슬롯 (추가 콘텐츠). */\nconst Body = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(function AlertDialogBody(\n { className, ...rest },\n ref,\n) {\n return <div ref={ref} className={cx('nuri-alert__body', className)} {...rest} />;\n});\n\nexport interface AlertDialogFooterProps extends ComponentPropsWithoutRef<'div'> {\n /**\n * 버튼 정렬. 디자인 표준은 전체너비 버튼이라 기본값 `full`.\n * @default 'full'\n */\n align?: 'start' | 'center' | 'end' | 'between' | 'full';\n}\n\n/** 푸터 슬롯 (Cancel/Action 배치). 기본 전체너비(`full`). */\nconst Footer = forwardRef<HTMLDivElement, AlertDialogFooterProps>(function AlertDialogFooter(\n { align = 'full', className, ...rest },\n ref,\n) {\n return (\n <div\n ref={ref}\n className={cx('nuri-alert__footer', `nuri-alert__footer--${align}`, className)}\n {...rest}\n />\n );\n});\n\n/**\n * 확인(주 액션) 버튼. 클릭 시 닫힘. `asChild`로 Button 위임.\n * @example <AlertDialog.Action asChild><Button onClick={onConfirm}>삭제</Button></AlertDialog.Action>\n */\nconst Action = Alert.Action;\n\n/**\n * 취소 버튼. 클릭 시 닫힘. 포커스가 기본적으로 여기 위치.\n * @example <AlertDialog.Cancel asChild><Button variant=\"outline\">취소</Button></AlertDialog.Cancel>\n */\nconst Cancel = Alert.Cancel;\n\nconst CloseIcon = () => (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M5 5l10 10M15 5L5 15\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n </svg>\n);\n\n/**\n * 우상단 X 닫기 버튼 (옵션). 내부적으로 Cancel과 동일하게 닫힘. 기본 `aria-label=\"닫기\"`.\n * 확인을 강제하려면 사용하지 않는 편이 좋습니다 (Cancel/Action으로 명시적 선택 유도).\n */\nconst CloseButton = forwardRef<\n HTMLButtonElement,\n Omit<ComponentPropsWithoutRef<'button'>, 'children'> & { children?: ReactNode }\n>(function AlertDialogCloseButton(\n { className, 'aria-label': ariaLabel = '닫기', children, ...rest },\n ref,\n) {\n return (\n <Alert.Cancel asChild>\n <button\n ref={ref}\n type=\"button\"\n aria-label={ariaLabel}\n className={cx('nuri-alert__close', className)}\n {...rest}\n >\n {children ?? <CloseIcon />}\n </button>\n </Alert.Cancel>\n );\n});\n\nexport const AlertDialog = Object.assign(Root, {\n Trigger,\n Content,\n Header,\n Title,\n Description,\n Body,\n Footer,\n Action,\n Cancel,\n CloseButton,\n});\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n return classes.filter(Boolean).join(' ');\n}\n","/**\n * tone별 기본 아이콘 — 디자이너 시스템(Figma) 에셋을 그대로 inline SVG로 재현.\n * 구조: 틴트 원 배경 + tone 색 심볼. 색은 토큰(`--nuri-alert-tone-*`)으로 분리.\n * AlertDialog.Content의 `icon` 미지정 시 tone에 맞춰 자동 렌더.\n * `icon={<Custom/>}`로 교체, `icon={null}`로 제거 가능.\n */\nimport type { ReactNode } from 'react';\n\nconst SuccessIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"var(--nuri-alert-tone-success-bg)\" />\n <path\n d=\"M15.77 9.58L10.65 14.70L8.90 12.95\"\n stroke=\"var(--nuri-alert-tone-success-fg)\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nconst WarningIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"var(--nuri-alert-tone-warning-bg)\" />\n <path\n d=\"M12 6.75V12\"\n stroke=\"var(--nuri-alert-tone-warning-fg)\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n />\n <circle cx=\"12\" cy=\"16.31\" r=\"1.1\" fill=\"var(--nuri-alert-tone-warning-fg)\" />\n </svg>\n);\n\nconst InfoIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"var(--nuri-alert-tone-info-bg)\" />\n <path\n d=\"M12.25 7h0.01\"\n stroke=\"var(--nuri-alert-tone-info-fg)\"\n strokeWidth=\"3\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M11 12h1.25v5h1.25\"\n stroke=\"var(--nuri-alert-tone-info-fg)\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nexport const defaultToneIcon: Record<'info' | 'success' | 'warning', ReactNode> = {\n info: <InfoIcon />,\n success: <SuccessIcon />,\n warning: <WarningIcon />,\n};\n"],"mappings":"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","names":["jsx","jsxs","Root","Trigger","Content","Title","Description","Action","Cancel"]}
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/dist/Button/index.cjs
CHANGED
|
@@ -1,137 +1,9 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
"use strict";
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __export = (target, all) => {
|
|
8
|
-
for (var name in all)
|
|
9
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
-
};
|
|
11
|
-
var __copyProps = (to, from, except, desc) => {
|
|
12
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
-
for (let key of __getOwnPropNames(from))
|
|
14
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
-
}
|
|
17
|
-
return to;
|
|
18
|
-
};
|
|
19
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});'use client';
|
|
20
2
|
|
|
21
|
-
// src/Button/index.ts
|
|
22
|
-
var Button_exports = {};
|
|
23
|
-
__export(Button_exports, {
|
|
24
|
-
Button: () => Button
|
|
25
|
-
});
|
|
26
|
-
module.exports = __toCommonJS(Button_exports);
|
|
27
3
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
var import_react_slot = require("@radix-ui/react-slot");
|
|
31
|
-
var import_react = require("react");
|
|
4
|
+
var _chunkJM4HDCLUcjs = require('../chunk-JM4HDCLU.cjs');
|
|
5
|
+
require('../chunk-R4E4BIPC.cjs');
|
|
32
6
|
|
|
33
|
-
// src/Button/Spinner.tsx
|
|
34
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
35
|
-
var Spinner = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "nuri-button__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "nuri-button__spinner", viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", children: [
|
|
36
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "8", cy: "8", r: "6", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "2" }),
|
|
37
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 8a6 6 0 0 0-6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
|
|
38
|
-
] }) });
|
|
39
7
|
|
|
40
|
-
|
|
41
|
-
function cx(...classes) {
|
|
42
|
-
return classes.filter(Boolean).join(" ");
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
// src/Button/Button.tsx
|
|
46
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
47
|
-
var Button = (0, import_react.forwardRef)(function Button2({
|
|
48
|
-
variant = "primary",
|
|
49
|
-
size = "md",
|
|
50
|
-
iconLeft,
|
|
51
|
-
iconRight,
|
|
52
|
-
iconOnly = false,
|
|
53
|
-
block = false,
|
|
54
|
-
loading = false,
|
|
55
|
-
disabled = false,
|
|
56
|
-
asChild = false,
|
|
57
|
-
type = "button",
|
|
58
|
-
className,
|
|
59
|
-
children,
|
|
60
|
-
onClick,
|
|
61
|
-
...rest
|
|
62
|
-
}, ref) {
|
|
63
|
-
const isBlocked = disabled || loading;
|
|
64
|
-
if (process.env.NODE_ENV !== "production" && iconOnly && !rest["aria-label"] && !rest["aria-labelledby"]) {
|
|
65
|
-
console.warn(
|
|
66
|
-
"[nuri/Button] `iconOnly` \uBC84\uD2BC\uC740 `aria-label`(\uB610\uB294 `aria-labelledby`)\uC774 \uD544\uC694\uD569\uB2C8\uB2E4."
|
|
67
|
-
);
|
|
68
|
-
}
|
|
69
|
-
const hasLeftSlot = !iconOnly && (loading || iconLeft != null);
|
|
70
|
-
const hasRightSlot = !iconOnly && !loading && iconRight != null;
|
|
71
|
-
const classes = cx(
|
|
72
|
-
"nuri-button",
|
|
73
|
-
`nuri-button--${variant}`,
|
|
74
|
-
`nuri-button--${size}`,
|
|
75
|
-
block && "nuri-button--block",
|
|
76
|
-
iconOnly && "nuri-button--icon-only",
|
|
77
|
-
isBlocked && "nuri-button--disabled",
|
|
78
|
-
loading && "nuri-button--loading",
|
|
79
|
-
hasLeftSlot && "nuri-button--has-left",
|
|
80
|
-
hasRightSlot && "nuri-button--has-right",
|
|
81
|
-
className
|
|
82
|
-
);
|
|
83
|
-
const handleClick = (e) => {
|
|
84
|
-
if (isBlocked) {
|
|
85
|
-
e.preventDefault();
|
|
86
|
-
e.stopPropagation();
|
|
87
|
-
return;
|
|
88
|
-
}
|
|
89
|
-
onClick?.(e);
|
|
90
|
-
};
|
|
91
|
-
const renderContent = (content) => {
|
|
92
|
-
if (iconOnly) {
|
|
93
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "nuri-button__icon", "aria-hidden": "true", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, {}) : content });
|
|
94
|
-
}
|
|
95
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
96
|
-
loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, {}) : iconLeft != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "nuri-button__icon nuri-button__icon--left", "aria-hidden": "true", children: iconLeft }),
|
|
97
|
-
content,
|
|
98
|
-
hasRightSlot && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "nuri-button__icon nuri-button__icon--right", "aria-hidden": "true", children: iconRight })
|
|
99
|
-
] });
|
|
100
|
-
};
|
|
101
|
-
if (asChild) {
|
|
102
|
-
const child = import_react.Children.only(children);
|
|
103
|
-
if (!(0, import_react.isValidElement)(child)) return null;
|
|
104
|
-
const childElement = child;
|
|
105
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
106
|
-
import_react_slot.Slot,
|
|
107
|
-
{
|
|
108
|
-
ref,
|
|
109
|
-
className: classes,
|
|
110
|
-
"aria-disabled": isBlocked || void 0,
|
|
111
|
-
"aria-busy": loading || void 0,
|
|
112
|
-
onClick: handleClick,
|
|
113
|
-
...rest,
|
|
114
|
-
children: (0, import_react.cloneElement)(childElement, void 0, renderContent(childElement.props.children))
|
|
115
|
-
}
|
|
116
|
-
);
|
|
117
|
-
}
|
|
118
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
119
|
-
"button",
|
|
120
|
-
{
|
|
121
|
-
ref,
|
|
122
|
-
type,
|
|
123
|
-
className: classes,
|
|
124
|
-
disabled,
|
|
125
|
-
"aria-disabled": loading || void 0,
|
|
126
|
-
"aria-busy": loading || void 0,
|
|
127
|
-
onClick: handleClick,
|
|
128
|
-
...rest,
|
|
129
|
-
children: renderContent(children)
|
|
130
|
-
}
|
|
131
|
-
);
|
|
132
|
-
});
|
|
133
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
134
|
-
0 && (module.exports = {
|
|
135
|
-
Button
|
|
136
|
-
});
|
|
8
|
+
exports.Button = _chunkJM4HDCLUcjs.Button;
|
|
137
9
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["/Users/summerhoony/Desktop/projects/nuri-ui/dist/Button/index.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACE;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACF,0CAAC","file":"/Users/summerhoony/Desktop/projects/nuri-ui/dist/Button/index.cjs"}
|