@wipco/sdui 0.1.0 → 0.3.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.
Files changed (78) hide show
  1. package/LICENSE +21 -0
  2. package/NOTICE +27 -0
  3. package/dist/chunk-4SU2KYPU.js +59 -0
  4. package/dist/chunk-56KKWLNI.js +186 -0
  5. package/dist/chunk-7Y4J7EOK.js +115 -0
  6. package/dist/chunk-APCXOCAO.js +110 -0
  7. package/dist/chunk-AROOQ5W6.js +119 -0
  8. package/dist/chunk-DGPRX4MU.js +251 -0
  9. package/dist/chunk-IL2KS4WS.js +25 -0
  10. package/dist/chunk-KADFN76X.js +541 -0
  11. package/dist/chunk-KBHI3IUR.js +40 -0
  12. package/dist/chunk-LZJTKVMO.js +767 -0
  13. package/dist/chunk-MOIU7MUA.js +282 -0
  14. package/dist/chunk-MSAV4J4I.js +77 -0
  15. package/dist/chunk-OOHHW4K4.js +159 -0
  16. package/dist/chunk-Q6SBH63R.js +190 -0
  17. package/dist/chunk-QZQDHSMD.js +78 -0
  18. package/dist/chunk-RH7ESUE6.js +309 -0
  19. package/dist/chunk-SEBPBUZR.js +260 -0
  20. package/dist/chunk-USKRM22W.js +39 -0
  21. package/dist/chunk-WNYWTFGW.js +61 -0
  22. package/dist/chunk-WVRCIVAD.js +72 -0
  23. package/dist/chunk-YJMD6MOE.js +404 -0
  24. package/dist/chunk-ZNITJ4KK.js +433 -0
  25. package/dist/chunk-ZQR3ULVH.js +193 -0
  26. package/dist/chunk-ZUCI34QY.js +1290 -0
  27. package/dist/index.d.ts +391 -79
  28. package/dist/index.js +277 -758
  29. package/dist/meta.d.ts +10 -2
  30. package/dist/meta.js +268 -27
  31. package/dist/rich.js +3 -2
  32. package/dist/styles.css +334 -13
  33. package/dist/widgets/AutocompleteField.d.ts +96 -0
  34. package/dist/widgets/AutocompleteField.js +3 -0
  35. package/dist/widgets/ColumnBoard.d.ts +47 -0
  36. package/dist/widgets/ColumnBoard.js +2 -0
  37. package/dist/widgets/DiffView.d.ts +30 -0
  38. package/dist/widgets/DiffView.js +2 -0
  39. package/dist/widgets/Disclosure.d.ts +20 -0
  40. package/dist/widgets/Disclosure.js +2 -0
  41. package/dist/widgets/EventCalendar.d.ts +59 -0
  42. package/dist/widgets/EventCalendar.js +2 -0
  43. package/dist/widgets/ImageLightbox.d.ts +25 -0
  44. package/dist/widgets/ImageLightbox.js +2 -0
  45. package/dist/widgets/InlineEdit.d.ts +23 -0
  46. package/dist/widgets/InlineEdit.js +2 -0
  47. package/dist/widgets/JsonField.d.ts +24 -0
  48. package/dist/widgets/JsonField.js +2 -0
  49. package/dist/widgets/LiveClock.d.ts +21 -0
  50. package/dist/widgets/LiveClock.js +1 -0
  51. package/dist/widgets/OrgChart.d.ts +32 -0
  52. package/dist/widgets/OrgChart.js +2 -0
  53. package/dist/widgets/PeriodFilter.d.ts +48 -0
  54. package/dist/widgets/PeriodFilter.js +2 -0
  55. package/dist/widgets/PrintSheet.d.ts +23 -0
  56. package/dist/widgets/PrintSheet.js +2 -0
  57. package/dist/widgets/SearchableMultiPicker.d.ts +29 -0
  58. package/dist/widgets/SearchableMultiPicker.js +3 -0
  59. package/dist/widgets/SecureScreen.d.ts +25 -0
  60. package/dist/widgets/SecureScreen.js +2 -0
  61. package/dist/widgets/StackedMeter.d.ts +26 -0
  62. package/dist/widgets/StackedMeter.js +1 -0
  63. package/dist/widgets/Strip.d.ts +20 -0
  64. package/dist/widgets/Strip.js +1 -0
  65. package/dist/widgets/SummaryTable.d.ts +31 -0
  66. package/dist/widgets/SummaryTable.js +1 -0
  67. package/dist/widgets/TagMultiSelect.d.ts +25 -0
  68. package/dist/widgets/TagMultiSelect.js +2 -0
  69. package/dist/widgets/Timeline.d.ts +30 -0
  70. package/dist/widgets/Timeline.js +3 -0
  71. package/dist/widgets/TreePicker.d.ts +21 -0
  72. package/dist/widgets/TreePicker.js +3 -0
  73. package/dist/widgets/TreeView.d.ts +26 -0
  74. package/dist/widgets/TreeView.js +2 -0
  75. package/dist/widgets/index.d.ts +76 -0
  76. package/dist/widgets/index.js +69 -0
  77. package/package.json +93 -3
  78. package/dist/chunk-AR2JYE75.js +0 -889
@@ -1,889 +0,0 @@
1
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
- import { useState, useRef, useMemo, useCallback, useEffect, useLayoutEffect } from 'react';
3
-
4
- // src/icons.ts
5
- var ICON_PATHS = {
6
- x: ["M18 6 6 18", "m6 6 12 12"],
7
- check: ["M20 6 9 17l-5-5"],
8
- minus: ["M5 12h14"],
9
- plus: ["M5 12h14", "M12 5v14"],
10
- "chevron-down": ["m6 9 6 6 6-6"],
11
- "chevron-up": ["m18 15-6-6-6 6"],
12
- "chevron-left": ["m15 18-6-6 6-6"],
13
- "chevron-right": ["m9 18 6-6-6-6"],
14
- "chevrons-up-down": ["m7 15 5 5 5-5", "m7 9 5-5 5 5"],
15
- search: ["M11 3a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z", "m21 21-4.3-4.3"],
16
- info: ["M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Z", "M12 16v-4", "M12 8h.01"],
17
- "circle-check": ["M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Z", "m9 12 2 2 4-4"],
18
- "circle-alert": ["M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Z", "M12 8v4", "M12 16h.01"],
19
- "triangle-alert": [
20
- "m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z",
21
- "M12 9v4",
22
- "M12 17h.01"
23
- ],
24
- "trash-2": [
25
- "M3 6h18",
26
- "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6",
27
- "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2",
28
- "M10 11v6",
29
- "M14 11v6"
30
- ],
31
- pencil: [
32
- "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497Z"
33
- ],
34
- copy: ["M9 9h12v12H9z", "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"],
35
- eye: ["M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z", "M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z"],
36
- "log-out": ["M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4", "m16 17 5-5-5-5", "M21 12H9"],
37
- save: [
38
- "M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z",
39
- "M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7",
40
- "M7 3v4a1 1 0 0 0 1 1h7"
41
- ],
42
- "layout-dashboard": ["M3 3h7v9H3z", "M14 3h7v5h-7z", "M14 12h7v9h-7z", "M3 16h7v5H3z"],
43
- "file-text": [
44
- "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z",
45
- "M14 2v4a2 2 0 0 0 2 2h4",
46
- "M16 13H8",
47
- "M16 17H8",
48
- "M10 9H8"
49
- ],
50
- list: ["M8 6h13", "M8 12h13", "M8 18h13", "M3 6h.01", "M3 12h.01", "M3 18h.01"],
51
- "refresh-cw": [
52
- "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8",
53
- "M21 3v5h-5",
54
- "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16",
55
- "M3 21v-5h5"
56
- ],
57
- "external-link": ["M15 3h6v6", "M10 14 21 3", "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"],
58
- lock: ["M5 11h14v10H5z", "M7 11V7a5 5 0 0 1 10 0v4"],
59
- user: ["M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2", "M12 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z"],
60
- "square-dashed": [
61
- "M5 3a2 2 0 0 0-2 2",
62
- "M19 3a2 2 0 0 1 2 2",
63
- "M21 19a2 2 0 0 1-2 2",
64
- "M5 21a2 2 0 0 1-2-2",
65
- "M9 3h2",
66
- "M9 21h2",
67
- "M14 3h2",
68
- "M14 21h2",
69
- "M3 9v2",
70
- "M21 9v2",
71
- "M3 14v2",
72
- "M21 14v2"
73
- ],
74
- "arrow-up-right": ["M7 7h10v10", "M7 17 17 7"],
75
- "arrow-down": ["M12 5v14", "m19 12-7 7-7-7"],
76
- box: [
77
- "M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z",
78
- "M3.3 7 12 12l8.7-5",
79
- "M12 22V12"
80
- ],
81
- code: ["m16 18 6-6-6-6", "m8 6-6 6 6 6"],
82
- play: ["m6 3 14 9-14 9V3Z"],
83
- calendar: ["M8 2v4", "M16 2v4", "M3 6h18v16H3z", "M3 10h18"],
84
- clock: ["M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Z", "M12 6v6l4 2"],
85
- settings: ["M4 21v-7", "M4 10V3", "M12 21v-9", "M12 8V3", "M20 21v-5", "M20 12V3", "M1 14h6", "M9 8h6", "M17 16h6"],
86
- home: ["m3 10 9-7 9 7v11a1 1 0 0 1-1 1h-5v-7h-6v7H4a1 1 0 0 1-1-1Z"],
87
- "chart-column": ["M3 3v18h18", "M8 17v-6", "M13 17V7", "M18 17v-3"],
88
- "circle-help": ["M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Z", "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", "M12 17h.01"],
89
- "log-in": ["M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4", "m10 17 5-5-5-5", "M15 12H3"],
90
- "arrow-left": ["m12 19-7-7 7-7", "M19 12H5"]
91
- };
92
- function cx(...parts) {
93
- return parts.filter(Boolean).join(" ");
94
- }
95
- function Icon({ name, size = 16, strokeWidth = 1.8, ...rest }) {
96
- const paths = ICON_PATHS[name];
97
- return /* @__PURE__ */ jsx(
98
- "svg",
99
- {
100
- width: size,
101
- height: size,
102
- viewBox: "0 0 24 24",
103
- fill: "none",
104
- stroke: "currentColor",
105
- strokeWidth,
106
- strokeLinecap: "round",
107
- strokeLinejoin: "round",
108
- "aria-hidden": "true",
109
- ...rest,
110
- children: paths ? paths.map((d, i) => /* @__PURE__ */ jsx("path", { d }, i)) : /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4", fill: "currentColor", stroke: "none" })
111
- }
112
- );
113
- }
114
- function Button({
115
- variant = "secondary",
116
- size = "md",
117
- icon,
118
- iconEnd,
119
- loading = false,
120
- block = false,
121
- disabled = false,
122
- children,
123
- className = "",
124
- type = "button",
125
- ...rest
126
- }) {
127
- const classes = ["wp-btn", `wp-btn--${variant}`];
128
- if (size !== "md") classes.push(`wp-btn--${size}`);
129
- if (block) classes.push("wp-btn--block");
130
- if (loading) classes.push("wp-btn--loading");
131
- if (className) classes.push(className);
132
- const iconSize = size === "xs" || size === "sm" ? 14 : size === "lg" || size === "xl" ? 18 : 16;
133
- return /* @__PURE__ */ jsxs("button", { type, className: classes.join(" "), disabled: disabled || loading, ...rest, children: [
134
- loading ? /* @__PURE__ */ jsx("span", { className: "wp-spinner wp-spinner--sm", role: "status", "aria-label": "\uCC98\uB9AC \uC911" }) : null,
135
- icon && !loading ? /* @__PURE__ */ jsx(Icon, { name: icon, size: iconSize }) : null,
136
- children,
137
- iconEnd ? /* @__PURE__ */ jsx(Icon, { name: iconEnd, size: iconSize }) : null
138
- ] });
139
- }
140
- function IconButton({ icon, label, size = "md", tone = "default", variant, className = "", type = "button", ...rest }) {
141
- const look = variant ?? (tone === "danger" ? "danger" : "ghost");
142
- const classes = ["wp-iconbtn"];
143
- if (size !== "md") classes.push(`wp-iconbtn--${size}`);
144
- if (look !== "ghost") classes.push(`wp-iconbtn--${look}`);
145
- if (className) classes.push(className);
146
- const iconSize = size === "xs" ? 13 : size === "sm" ? 15 : 16;
147
- return /* @__PURE__ */ jsx("button", { type, className: classes.join(" "), "aria-label": label, title: label, ...rest, children: /* @__PURE__ */ jsx(Icon, { name: icon, size: iconSize }) });
148
- }
149
- function Input({ size = "md", icon, invalid = false, mono = false, trailing, className = "", style, ...rest }) {
150
- const classes = ["wp-input"];
151
- if (size !== "md") classes.push(`wp-input--${size}`);
152
- if (invalid) classes.push("wp-input--invalid");
153
- if (mono) classes.push("wp-input--mono");
154
- if (className) classes.push(className);
155
- const hasTrailing = trailing !== void 0 && trailing !== null && trailing !== false && trailing !== "";
156
- const input = /* @__PURE__ */ jsx(
157
- "input",
158
- {
159
- className: classes.join(" "),
160
- "aria-invalid": invalid || void 0,
161
- style: icon || hasTrailing ? void 0 : style,
162
- ...rest
163
- }
164
- );
165
- if (!icon && !hasTrailing) return input;
166
- const wrap = ["wp-inputwrap"];
167
- if (icon) wrap.push("wp-inputwrap--lead");
168
- if (hasTrailing) wrap.push("wp-inputwrap--trail");
169
- return (
170
- /*
171
- * 장식(선행 아이콘·후행 단위)은 입력 박스 위에 겹쳐 놓이므로 래퍼가 입력과
172
- * 같은 크기여야 한다. style은 실사용이 전부 폭 제한(maxWidth)이라 래퍼에 준다 —
173
- * 입력에 주면 입력만 좁아지고 오른쪽에 붙는 단위는 넓은 래퍼 끝에 남아 떨어진다.
174
- */
175
- /* @__PURE__ */ jsxs("div", { className: wrap.join(" "), style, children: [
176
- icon ? /* @__PURE__ */ jsx("span", { className: "wp-inputwrap__lead", children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 15 }) }) : null,
177
- input,
178
- hasTrailing ? /* @__PURE__ */ jsx("span", { className: "wp-inputwrap__trail", children: typeof trailing === "string" && Object.hasOwn(ICON_PATHS, trailing) ? /* @__PURE__ */ jsx(Icon, { name: trailing, size: 15 }) : trailing }) : null
179
- ] })
180
- );
181
- }
182
- function Textarea({ invalid = false, rows = 3, className = "", ...rest }) {
183
- return /* @__PURE__ */ jsx(
184
- "textarea",
185
- {
186
- className: cx("wp-textarea", invalid && "wp-textarea--invalid", className),
187
- rows,
188
- "aria-invalid": invalid || void 0,
189
- ...rest
190
- }
191
- );
192
- }
193
- function Select({ options = [], size = "md", invalid = false, placeholder, className = "", ...rest }) {
194
- const classes = ["wp-select"];
195
- if (size !== "md") classes.push(`wp-select--${size}`);
196
- if (invalid) classes.push("wp-select--invalid");
197
- if (className) classes.push(className);
198
- return /* @__PURE__ */ jsxs("div", { className: "wp-selectwrap", children: [
199
- /* @__PURE__ */ jsxs("select", { className: classes.join(" "), "aria-invalid": invalid || void 0, ...rest, children: [
200
- placeholder ? /* @__PURE__ */ jsx("option", { value: "", children: placeholder }) : null,
201
- options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
202
- ] }),
203
- /* @__PURE__ */ jsx("span", { className: "wp-selectwrap__caret", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: 15 }) })
204
- ] });
205
- }
206
- function Checkbox({ label, description, disabled = false, className = "", ...rest }) {
207
- return /* @__PURE__ */ jsxs("label", { className: cx("wp-check", disabled && "wp-check--disabled", className), children: [
208
- /* @__PURE__ */ jsx("input", { type: "checkbox", disabled, ...rest }),
209
- /* @__PURE__ */ jsx("span", { className: "wp-check__box", children: /* @__PURE__ */ jsx(Icon, { name: "check", size: 12, strokeWidth: 2.5 }) }),
210
- label || description ? /* @__PURE__ */ jsxs("span", { className: "wp-check__text", children: [
211
- /* @__PURE__ */ jsx("span", { children: label }),
212
- description ? /* @__PURE__ */ jsx("span", { className: "wp-check__desc", children: description }) : null
213
- ] }) : null
214
- ] });
215
- }
216
- function Switch({ label, size = "md", disabled = false, className = "", ...rest }) {
217
- return /* @__PURE__ */ jsxs("label", { className: cx("wp-switch", size === "sm" && "wp-switch--sm", className), children: [
218
- /* @__PURE__ */ jsx("input", { type: "checkbox", role: "switch", disabled, ...rest }),
219
- /* @__PURE__ */ jsx("span", { className: "wp-switch__track" }),
220
- label ? /* @__PURE__ */ jsx("span", { children: label }) : null
221
- ] });
222
- }
223
- function Field({ label, hint, error, required = false, htmlFor, layout = "stacked", children, className = "", ...rest }) {
224
- return /* @__PURE__ */ jsxs("div", { className: cx("wp-field", layout === "horizontal" && "wp-field--horizontal", className), ...rest, children: [
225
- label ? /* @__PURE__ */ jsxs("label", { className: "wp-field__label", htmlFor, children: [
226
- label,
227
- required ? /* @__PURE__ */ jsx("span", { className: "wp-field__req", "aria-hidden": "true", children: "*" }) : null
228
- ] }) : null,
229
- /* @__PURE__ */ jsxs("div", { className: "wp-field__body", children: [
230
- children,
231
- error ? /* @__PURE__ */ jsxs("span", { className: "wp-field__error", children: [
232
- /* @__PURE__ */ jsx(Icon, { name: "circle-alert", size: 13 }),
233
- error
234
- ] }) : hint ? /* @__PURE__ */ jsx("span", { className: "wp-field__hint", children: hint }) : null
235
- ] })
236
- ] });
237
- }
238
- function Card({
239
- title,
240
- subtitle,
241
- actions,
242
- footer,
243
- variant = "default",
244
- selected = false,
245
- interactive = false,
246
- padding = "default",
247
- children,
248
- className = "",
249
- ...rest
250
- }) {
251
- const classes = ["wp-card"];
252
- if (variant !== "default") classes.push(`wp-card--${variant}`);
253
- if (interactive) classes.push("wp-card--interactive");
254
- if (selected) classes.push("wp-card--selected");
255
- if (className) classes.push(className);
256
- const bodyClass = padding === "tight" ? "wp-card__body wp-card__body--tight" : "wp-card__body";
257
- return /* @__PURE__ */ jsxs("div", { className: classes.join(" "), ...rest, children: [
258
- title || actions ? /* @__PURE__ */ jsxs("div", { className: "wp-card__head", children: [
259
- /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
260
- /* @__PURE__ */ jsx("div", { className: "wp-card__title", children: title }),
261
- subtitle ? /* @__PURE__ */ jsx("div", { className: "wp-card__sub", children: subtitle }) : null
262
- ] }),
263
- actions ? /* @__PURE__ */ jsx("div", { className: "wp-row", style: { gap: 6, flex: "none" }, children: actions }) : null
264
- ] }) : null,
265
- padding === "none" ? children : /* @__PURE__ */ jsx("div", { className: bodyClass, children }),
266
- footer ? /* @__PURE__ */ jsx("div", { className: "wp-card__foot", children: footer }) : null
267
- ] });
268
- }
269
- function Badge({ tone = "neutral", dot = false, size = "md", children, className = "", ...rest }) {
270
- return /* @__PURE__ */ jsx(
271
- "span",
272
- {
273
- className: cx("wp-badge", `wp-badge--${tone}`, dot && "wp-badge--dot", size === "lg" && "wp-badge--lg", className),
274
- ...rest,
275
- children
276
- }
277
- );
278
- }
279
- function Tag({ color, filled = false, onRemove, children, className = "", ...rest }) {
280
- return /* @__PURE__ */ jsxs("span", { className: cx("wp-tag", filled && "wp-tag--filled", className), ...rest, children: [
281
- color ? /* @__PURE__ */ jsx("span", { className: "wp-tag__dot", style: { background: color } }) : null,
282
- children,
283
- onRemove ? /* @__PURE__ */ jsx("span", { className: "wp-tag__x", role: "button", "aria-label": "\uC81C\uAC70", onClick: onRemove, children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 10, strokeWidth: 2 }) }) : null
284
- ] });
285
- }
286
- var TONE_ICONS = {
287
- info: "info",
288
- success: "circle-check",
289
- warning: "triangle-alert",
290
- danger: "circle-alert",
291
- neutral: "info"
292
- };
293
- function Alert({ tone = "info", title, children, actions, onClose, bar = false, className = "", ...rest }) {
294
- return /* @__PURE__ */ jsxs(
295
- "div",
296
- {
297
- className: cx("wp-alert", `wp-alert--${tone}`, bar && "wp-alert--bar", className),
298
- role: tone === "danger" ? "alert" : "status",
299
- ...rest,
300
- children: [
301
- /* @__PURE__ */ jsx("span", { className: "wp-alert__icon", children: /* @__PURE__ */ jsx(Icon, { name: TONE_ICONS[tone] ?? "info", size: 16 }) }),
302
- /* @__PURE__ */ jsxs("div", { className: "wp-alert__body", children: [
303
- title ? /* @__PURE__ */ jsx("span", { className: "wp-alert__title", children: title }) : null,
304
- children ? /* @__PURE__ */ jsx("span", { className: "wp-alert__text", children }) : null,
305
- actions ? /* @__PURE__ */ jsx("div", { className: "wp-alert__actions", children: actions }) : null
306
- ] }),
307
- onClose ? /* @__PURE__ */ jsx("button", { type: "button", className: "wp-iconbtn wp-iconbtn--xs", "aria-label": "\uB2EB\uAE30", onClick: onClose, children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 13 }) }) : null
308
- ]
309
- }
310
- );
311
- }
312
- function Toast({ tone = "info", title, children, onClose, className = "", ...rest }) {
313
- return /* @__PURE__ */ jsxs("div", { className: cx("wp-toast", `wp-toast--${tone}`, className), role: "status", ...rest, children: [
314
- /* @__PURE__ */ jsx("span", { className: "wp-toast__icon", children: /* @__PURE__ */ jsx(Icon, { name: TONE_ICONS[tone] ?? "info", size: 16 }) }),
315
- /* @__PURE__ */ jsxs("div", { className: "wp-toast__body", children: [
316
- title ? /* @__PURE__ */ jsx("span", { className: "wp-toast__title", children: title }) : null,
317
- children ? /* @__PURE__ */ jsx("span", { className: "wp-toast__text", children }) : null
318
- ] }),
319
- onClose ? /* @__PURE__ */ jsx("button", { type: "button", className: "wp-toast__x", "aria-label": "\uB2EB\uAE30", onClick: onClose, children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 13 }) }) : null
320
- ] });
321
- }
322
- function Tabs({ items = [], value, onChange, size = "md", className = "", ...rest }) {
323
- return /* @__PURE__ */ jsx("div", { className: cx("wp-tabs", size === "lg" && "wp-tabs--lg", className), role: "tablist", ...rest, children: items.map((item) => /* @__PURE__ */ jsxs(
324
- "button",
325
- {
326
- type: "button",
327
- role: "tab",
328
- className: "wp-tab",
329
- "aria-selected": value === item.value,
330
- onClick: onChange ? () => onChange(item.value) : void 0,
331
- children: [
332
- item.icon ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: 15 }) : null,
333
- item.label,
334
- item.count != null ? /* @__PURE__ */ jsx("span", { className: "wp-tab__count", children: item.count }) : null
335
- ]
336
- },
337
- item.value
338
- )) });
339
- }
340
- function Table({
341
- columns = [],
342
- rows = [],
343
- dense = false,
344
- hover = true,
345
- rowKey = "id",
346
- onRowClick,
347
- empty,
348
- className = "",
349
- ...rest
350
- }) {
351
- const classes = ["wp-table"];
352
- if (dense) classes.push("wp-table--dense");
353
- if (hover) classes.push("wp-table--hover");
354
- if (className) classes.push(className);
355
- if (!rows.length && empty) return /* @__PURE__ */ jsx(Fragment, { children: empty });
356
- return /* @__PURE__ */ jsxs("table", { className: classes.join(" "), ...rest, children: [
357
- /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("th", { style: { width: column.width, textAlign: column.align === "right" ? "right" : void 0 }, children: column.header }, column.key)) }) }),
358
- /* @__PURE__ */ jsx("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsx(
359
- "tr",
360
- {
361
- onClick: onRowClick ? () => onRowClick(row) : void 0,
362
- style: onRowClick ? { cursor: "pointer" } : void 0,
363
- children: columns.map((column) => {
364
- const cls = [];
365
- if (column.align === "right") cls.push("wp-table__num");
366
- if (column.mono) cls.push("wp-table__mono");
367
- if (column.strong) cls.push("wp-table__strong");
368
- const raw = row?.[column.key];
369
- let content;
370
- if (column.render) {
371
- content = column.render(row, index);
372
- } else if (column.badge) {
373
- const key = raw == null ? "" : String(raw);
374
- const tone = column.badge.toneMap?.[key] ?? "neutral";
375
- content = /* @__PURE__ */ jsx(Badge, { tone, children: column.badge.labelMap?.[key] ?? key });
376
- } else {
377
- content = raw;
378
- }
379
- return /* @__PURE__ */ jsx("td", { className: cls.join(" ") || void 0, children: content }, column.key);
380
- })
381
- },
382
- row?.[rowKey] != null ? String(row[rowKey]) : index
383
- )) })
384
- ] });
385
- }
386
- function StatCard({ label, value, unit, delta, trend = "flat", icon, footer, size = "md", className = "", ...rest }) {
387
- const arrow = trend === "up" ? "arrow-up-right" : trend === "down" ? "arrow-down" : "minus";
388
- return /* @__PURE__ */ jsx("div", { className: cx("wp-card", className), ...rest, children: /* @__PURE__ */ jsx("div", { className: "wp-card__body", children: /* @__PURE__ */ jsxs("div", { className: size === "sm" ? "wp-stat wp-stat--sm" : "wp-stat", children: [
389
- /* @__PURE__ */ jsxs("div", { className: "wp-stat__label", children: [
390
- icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: 14 }) : null,
391
- label
392
- ] }),
393
- /* @__PURE__ */ jsxs("div", { className: "wp-stat__value", children: [
394
- value,
395
- unit ? /* @__PURE__ */ jsx("span", { className: "wp-stat__unit", children: unit }) : null
396
- ] }),
397
- delta ? /* @__PURE__ */ jsxs("div", { className: `wp-stat__delta wp-stat__delta--${trend}`, children: [
398
- /* @__PURE__ */ jsx(Icon, { name: arrow, size: 13 }),
399
- delta
400
- ] }) : null,
401
- footer ? /* @__PURE__ */ jsx("div", { className: "wp-caption", style: { marginTop: 2 }, children: footer }) : null
402
- ] }) }) });
403
- }
404
- function EmptyState({ icon = "square-dashed", title, children, actions, tight = false, className = "", ...rest }) {
405
- return /* @__PURE__ */ jsxs("div", { className: cx("wp-empty", tight && "wp-empty--tight", className), ...rest, children: [
406
- /* @__PURE__ */ jsx("span", { className: "wp-empty__mark", children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 20 }) }),
407
- title ? /* @__PURE__ */ jsx("div", { className: "wp-empty__title", children: title }) : null,
408
- children ? /* @__PURE__ */ jsx("div", { className: "wp-empty__text", children }) : null,
409
- actions ? /* @__PURE__ */ jsx("div", { className: "wp-empty__actions", children: actions }) : null
410
- ] });
411
- }
412
- function Spinner({ size = "md", label, className = "", ...rest }) {
413
- const el = /* @__PURE__ */ jsx(
414
- "span",
415
- {
416
- className: cx("wp-spinner", size !== "md" && `wp-spinner--${size}`, className),
417
- role: "status",
418
- "aria-label": label || "\uB85C\uB529 \uC911",
419
- ...rest
420
- }
421
- );
422
- if (!label) return el;
423
- return /* @__PURE__ */ jsxs("span", { className: "wp-row", style: { gap: 8 }, children: [
424
- el,
425
- /* @__PURE__ */ jsx("span", { className: "wp-caption", children: label })
426
- ] });
427
- }
428
- function ProgressBar({ value, tone = "brand", label, showValue = false, className = "", ...rest }) {
429
- const clamped = Math.max(0, Math.min(100, Number(value) || 0));
430
- return /* @__PURE__ */ jsxs("div", { className: cx("wp-progress", className), ...rest, children: [
431
- label || showValue ? /* @__PURE__ */ jsxs("div", { className: "wp-progress__label", children: [
432
- label,
433
- showValue ? /* @__PURE__ */ jsxs("span", { className: "wp-progress__value wp-num", children: [
434
- clamped,
435
- "%"
436
- ] }) : null
437
- ] }) : null,
438
- /* @__PURE__ */ jsx("div", { className: "wp-progress__track", role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, children: /* @__PURE__ */ jsx("div", { className: `wp-progress__fill wp-progress__fill--${tone}`, style: { width: `${clamped}%` } }) })
439
- ] });
440
- }
441
- function pageItems(page, total) {
442
- const out = [];
443
- if (total <= 7) {
444
- for (let i = 1; i <= total; i++) out.push(i);
445
- return out;
446
- }
447
- out.push(1);
448
- if (page > 3) out.push("\u2026");
449
- for (let i = Math.max(2, page - 1); i <= Math.min(total - 1, page + 1); i++) out.push(i);
450
- if (page < total - 2) out.push("\u2026");
451
- out.push(total);
452
- return out;
453
- }
454
- function Pagination({ page = 1, pageCount = 1, total, pageSize, onChange, className = "", ...rest }) {
455
- const from = total != null && pageSize ? (page - 1) * pageSize + 1 : null;
456
- const to = total != null && pageSize ? Math.min(total, page * pageSize) : null;
457
- return /* @__PURE__ */ jsxs("div", { className: cx("wp-pager", className), ...rest, children: [
458
- from != null ? /* @__PURE__ */ jsxs("span", { className: "wp-num", children: [
459
- from,
460
- "\u2013",
461
- to,
462
- " / ",
463
- total
464
- ] }) : null,
465
- /* @__PURE__ */ jsx("span", { className: "wp-spacer" }),
466
- /* @__PURE__ */ jsx("button", { type: "button", className: "wp-pager__page", "aria-label": "\uC774\uC804", disabled: page <= 1, onClick: () => onChange?.(page - 1), children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 14 }) }),
467
- /* @__PURE__ */ jsx("div", { className: "wp-pager__pages", children: pageItems(page, pageCount).map(
468
- (p, i) => p === "\u2026" ? /* @__PURE__ */ jsx("span", { className: "wp-pager__gap", children: "\u2026" }, `g${i}`) : /* @__PURE__ */ jsx("button", { type: "button", className: "wp-pager__page", "aria-current": p === page || void 0, onClick: () => onChange?.(p), children: p }, p)
469
- ) }),
470
- /* @__PURE__ */ jsx("button", { type: "button", className: "wp-pager__page", "aria-label": "\uB2E4\uC74C", disabled: page >= pageCount, onClick: () => onChange?.(page + 1), children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) })
471
- ] });
472
- }
473
- function Dialog({ title, subtitle, icon, tone = "brand", size = "md", footer, onClose, children, className = "", ...rest }) {
474
- const classes = ["wp-dialog"];
475
- if (size !== "md") classes.push(`wp-dialog--${size}`);
476
- if (className) classes.push(className);
477
- return /* @__PURE__ */ jsx("div", { className: "wp-overlay", ...rest, children: /* @__PURE__ */ jsxs("div", { className: classes.join(" "), role: "dialog", "aria-modal": "true", "aria-label": typeof title === "string" ? title : void 0, children: [
478
- /* @__PURE__ */ jsxs("div", { className: "wp-dialog__head", children: [
479
- icon ? /* @__PURE__ */ jsx("span", { className: tone === "danger" ? "wp-dialog__mark wp-dialog__mark--danger" : "wp-dialog__mark", children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 16 }) }) : null,
480
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
481
- /* @__PURE__ */ jsx("div", { className: "wp-dialog__title", children: title }),
482
- subtitle ? /* @__PURE__ */ jsx("div", { className: "wp-dialog__sub", children: subtitle }) : null
483
- ] }),
484
- onClose ? /* @__PURE__ */ jsx("button", { type: "button", className: "wp-iconbtn wp-iconbtn--sm", "aria-label": "\uB2EB\uAE30", onClick: onClose, children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 16 }) }) : null
485
- ] }),
486
- /* @__PURE__ */ jsx("div", { className: "wp-dialog__body", children }),
487
- footer ? /* @__PURE__ */ jsx("div", { className: "wp-dialog__foot", children: footer }) : null
488
- ] }) });
489
- }
490
- function HoistedStyle({ id, css }) {
491
- return /* @__PURE__ */ jsx("style", { href: id, precedence: "medium", children: css });
492
- }
493
- var YMD_RE = /^\d{4}-\d{2}-\d{2}$/;
494
- function parseYmd(value) {
495
- if (typeof value !== "string" || !YMD_RE.test(value)) return void 0;
496
- const y = Number(value.slice(0, 4));
497
- const m = Number(value.slice(5, 7));
498
- const d = Number(value.slice(8, 10));
499
- const date = new Date(y, m - 1, d, 12, 0, 0, 0);
500
- if (date.getFullYear() !== y || date.getMonth() !== m - 1 || date.getDate() !== d) return void 0;
501
- return date;
502
- }
503
- function formatYmd(date) {
504
- const y = String(date.getFullYear()).padStart(4, "0");
505
- const m = String(date.getMonth() + 1).padStart(2, "0");
506
- const d = String(date.getDate()).padStart(2, "0");
507
- return `${y}-${m}-${d}`;
508
- }
509
- function addDays(date, days) {
510
- const next = new Date(date);
511
- next.setDate(next.getDate() + days);
512
- return next;
513
- }
514
- function addMonths(date, months) {
515
- const next = new Date(date.getFullYear(), date.getMonth() + months, 1, 12, 0, 0, 0);
516
- const lastDay = new Date(next.getFullYear(), next.getMonth() + 1, 0).getDate();
517
- next.setDate(Math.min(date.getDate(), lastDay));
518
- return next;
519
- }
520
- function clampDate(date, min, max) {
521
- if (min && date.getTime() < min.getTime()) return min;
522
- if (max && date.getTime() > max.getTime()) return max;
523
- return date;
524
- }
525
- function monthIndex(date) {
526
- return date.getFullYear() * 12 + date.getMonth();
527
- }
528
- function monthStart(index) {
529
- return new Date(Math.floor(index / 12), index % 12, 1, 12, 0, 0, 0);
530
- }
531
- function isSameDay(a, b) {
532
- return a !== void 0 && b !== void 0 && formatYmd(a) === formatYmd(b);
533
- }
534
- var WEEKDAYS_KO = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
535
- var WEEKS_PER_MONTH = 6;
536
- function buildMonthCells(index, min, max) {
537
- const first = monthStart(index);
538
- const gridStart = addDays(first, -first.getDay());
539
- const weeks = [];
540
- for (let w = 0; w < WEEKS_PER_MONTH; w += 1) {
541
- const row = [];
542
- for (let d = 0; d < 7; d += 1) {
543
- const date = addDays(gridStart, w * 7 + d);
544
- row.push({
545
- date,
546
- ymd: formatYmd(date),
547
- outside: monthIndex(date) !== index,
548
- disabled: min !== void 0 && date.getTime() < min.getTime() || max !== void 0 && date.getTime() > max.getTime()
549
- });
550
- }
551
- weeks.push(row);
552
- }
553
- return weeks;
554
- }
555
- function Calendar({
556
- monthCount,
557
- minDate,
558
- maxDate,
559
- dayState,
560
- onPick,
561
- focusDate,
562
- onFocusDateChange
563
- }) {
564
- const focusIdx = monthIndex(focusDate);
565
- const [viewIdx, setViewIdx] = useState(focusIdx);
566
- const gridRef = useRef(null);
567
- const focusYmd = formatYmd(focusDate);
568
- const visibleIdx = focusIdx < viewIdx ? focusIdx : focusIdx > viewIdx + monthCount - 1 ? focusIdx - monthCount + 1 : viewIdx;
569
- if (visibleIdx !== viewIdx) setViewIdx(visibleIdx);
570
- useLayoutEffect(() => {
571
- gridRef.current?.querySelector('[tabindex="0"]')?.focus();
572
- }, [focusYmd]);
573
- const todayYmd = formatYmd(/* @__PURE__ */ new Date());
574
- const minIdx = minDate ? monthIndex(minDate) : -Infinity;
575
- const maxIdx = maxDate ? monthIndex(maxDate) : Infinity;
576
- const prevDisabled = visibleIdx <= minIdx;
577
- const nextDisabled = visibleIdx + monthCount - 1 >= maxIdx;
578
- const moveFocus = (next) => {
579
- onFocusDateChange(clampDate(next, minDate, maxDate));
580
- };
581
- const handleKeyDown = (event) => {
582
- const deltaDays = event.key === "ArrowLeft" ? -1 : event.key === "ArrowRight" ? 1 : event.key === "ArrowUp" ? -7 : event.key === "ArrowDown" ? 7 : 0;
583
- if (deltaDays !== 0) {
584
- event.preventDefault();
585
- moveFocus(addDays(focusDate, deltaDays));
586
- return;
587
- }
588
- if (event.key === "Home" || event.key === "End") {
589
- event.preventDefault();
590
- const offset = event.key === "Home" ? -focusDate.getDay() : 6 - focusDate.getDay();
591
- moveFocus(addDays(focusDate, offset));
592
- return;
593
- }
594
- if (event.key === "PageUp" || event.key === "PageDown") {
595
- event.preventDefault();
596
- moveFocus(addMonths(focusDate, event.key === "PageUp" ? -1 : 1));
597
- }
598
- };
599
- return /* @__PURE__ */ jsx("div", { className: "wp-dp", children: /* @__PURE__ */ jsxs("div", { className: "wp-dp__months", ref: gridRef, onKeyDown: handleKeyDown, children: [
600
- /* @__PURE__ */ jsxs("div", { className: "wp-dp__nav", children: [
601
- /* @__PURE__ */ jsx(
602
- "button",
603
- {
604
- type: "button",
605
- className: "wp-dp__navbtn",
606
- "aria-label": "\uC774\uC804 \uB2EC",
607
- "aria-disabled": prevDisabled || void 0,
608
- disabled: prevDisabled,
609
- onClick: () => setViewIdx(visibleIdx - 1),
610
- children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 16 })
611
- }
612
- ),
613
- /* @__PURE__ */ jsx(
614
- "button",
615
- {
616
- type: "button",
617
- className: "wp-dp__navbtn",
618
- "aria-label": "\uB2E4\uC74C \uB2EC",
619
- "aria-disabled": nextDisabled || void 0,
620
- disabled: nextDisabled,
621
- onClick: () => setViewIdx(visibleIdx + 1),
622
- children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 16 })
623
- }
624
- )
625
- ] }),
626
- Array.from({ length: monthCount }, (_, offset) => {
627
- const idx = visibleIdx + offset;
628
- const first = monthStart(idx);
629
- const weeks = buildMonthCells(idx, minDate, maxDate);
630
- const caption = `${first.getFullYear()}\uB144 ${first.getMonth() + 1}\uC6D4`;
631
- return /* @__PURE__ */ jsxs("div", { className: "wp-dp__month", children: [
632
- /* @__PURE__ */ jsx("div", { className: "wp-dp__caption", children: /* @__PURE__ */ jsx("span", { className: "wp-dp__caption-label", children: caption }) }),
633
- /* @__PURE__ */ jsxs("table", { className: "wp-dp__grid", role: "grid", "aria-label": caption, children: [
634
- /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "wp-dp__weekdays", children: WEEKDAYS_KO.map((name) => /* @__PURE__ */ jsx("th", { scope: "col", className: "wp-dp__weekday", abbr: name, children: name }, name)) }) }),
635
- /* @__PURE__ */ jsx("tbody", { className: "wp-dp__weeks", children: weeks.map((week, w) => /* @__PURE__ */ jsx("tr", { className: "wp-dp__week", children: week.map((cell) => {
636
- const state = cell.disabled ? {} : dayState(cell.date);
637
- const classes = ["wp-dp__day"];
638
- if (cell.outside) classes.push("wp-dp__day--outside");
639
- if (cell.disabled) classes.push("wp-dp__day--disabled");
640
- if (cell.ymd === todayYmd) classes.push("wp-dp__day--today");
641
- if (state.selected) classes.push("wp-dp__day--selected");
642
- if (state.rangeStart) classes.push("wp-dp__day--range-start");
643
- if (state.rangeMiddle) classes.push("wp-dp__day--range-middle");
644
- if (state.rangeEnd) classes.push("wp-dp__day--range-end");
645
- return /* @__PURE__ */ jsx("td", { className: classes.join(" "), children: /* @__PURE__ */ jsx(
646
- "button",
647
- {
648
- type: "button",
649
- className: "wp-dp__day-btn",
650
- "data-ymd": cell.ymd,
651
- tabIndex: cell.ymd === focusYmd && !cell.outside ? 0 : -1,
652
- disabled: cell.disabled,
653
- "aria-selected": state.selected || state.rangeStart || state.rangeEnd || void 0,
654
- "aria-label": cell.ymd,
655
- onClick: () => {
656
- onFocusDateChange(cell.date);
657
- onPick(cell.date);
658
- },
659
- children: cell.date.getDate()
660
- }
661
- ) }, cell.ymd);
662
- }) }, w)) })
663
- ] })
664
- ] }, idx);
665
- })
666
- ] }) });
667
- }
668
- function useDismiss(open, hostRef, onDismiss) {
669
- useEffect(() => {
670
- if (!open) return;
671
- const handlePointerDown = (event) => {
672
- if (event.target instanceof Node && hostRef.current?.contains(event.target)) return;
673
- onDismiss("outside");
674
- };
675
- const handleKeyDown = (event) => {
676
- if (event.key === "Escape") onDismiss("escape");
677
- };
678
- document.addEventListener("pointerdown", handlePointerDown);
679
- document.addEventListener("keydown", handleKeyDown);
680
- return () => {
681
- document.removeEventListener("pointerdown", handlePointerDown);
682
- document.removeEventListener("keydown", handleKeyDown);
683
- };
684
- }, [open, hostRef, onDismiss]);
685
- }
686
- function triggerClassName(size, invalid) {
687
- const classes = ["wp-input", "wp-dp-trigger"];
688
- if (size !== "md") classes.push(`wp-input--${size}`);
689
- if (invalid) classes.push("wp-input--invalid");
690
- return classes.join(" ");
691
- }
692
- function DatePicker({
693
- value,
694
- onChange,
695
- min,
696
- max,
697
- placeholder,
698
- invalid = false,
699
- disabled = false,
700
- size = "md"
701
- }) {
702
- const [open, setOpen] = useState(false);
703
- const [innerValue, setInnerValue] = useState("");
704
- const hostRef = useRef(null);
705
- const triggerRef = useRef(null);
706
- const isControlled = value !== void 0;
707
- const currentValue = isControlled ? value : innerValue;
708
- const selectedDate = useMemo(() => parseYmd(currentValue), [currentValue]);
709
- const minDate = useMemo(() => parseYmd(min), [min]);
710
- const maxDate = useMemo(() => parseYmd(max), [max]);
711
- const [focusDate, setFocusDate] = useState(() => selectedDate ?? clampDate(/* @__PURE__ */ new Date(), minDate, maxDate));
712
- const dismiss = useCallback((reason) => {
713
- setOpen(false);
714
- if (reason === "escape") triggerRef.current?.focus();
715
- }, []);
716
- useDismiss(open, hostRef, dismiss);
717
- const openCalendar = () => {
718
- setFocusDate(selectedDate ?? clampDate(/* @__PURE__ */ new Date(), minDate, maxDate));
719
- setOpen(true);
720
- };
721
- const isInvalid = Boolean(invalid);
722
- return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "wp-dp-host", children: [
723
- /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-datepicker", css: DP_CSS }),
724
- /* @__PURE__ */ jsxs(
725
- "button",
726
- {
727
- ref: triggerRef,
728
- type: "button",
729
- className: triggerClassName(size, isInvalid),
730
- "aria-invalid": isInvalid || void 0,
731
- "aria-haspopup": "dialog",
732
- "aria-expanded": open,
733
- disabled,
734
- onClick: () => open ? setOpen(false) : openCalendar(),
735
- children: [
736
- /* @__PURE__ */ jsx("span", { className: "wp-dp-trigger__icon", children: /* @__PURE__ */ jsx(Icon, { name: "calendar", size: size === "lg" ? 16 : 15 }) }),
737
- currentValue ? /* @__PURE__ */ jsx("span", { className: "wp-dp-trigger__value", children: selectedDate ? formatYmd(selectedDate) : currentValue }) : /* @__PURE__ */ jsx("span", { className: "wp-dp-trigger__value wp-dp-trigger__value--placeholder", children: placeholder ?? "\uB0A0\uC9DC \uC120\uD0DD" })
738
- ]
739
- }
740
- ),
741
- open ? /* @__PURE__ */ jsx("div", { className: "wp-dp-pop", role: "dialog", "aria-label": "\uB0A0\uC9DC \uC120\uD0DD \uB2EC\uB825", children: /* @__PURE__ */ jsx("div", { className: "wp-dp-pop__body", children: /* @__PURE__ */ jsx(
742
- Calendar,
743
- {
744
- monthCount: 1,
745
- minDate,
746
- maxDate,
747
- focusDate,
748
- onFocusDateChange: setFocusDate,
749
- dayState: (date) => ({ selected: isSameDay(date, selectedDate) }),
750
- onPick: (date) => {
751
- const next = formatYmd(date);
752
- if (!isControlled) setInnerValue(next);
753
- onChange?.(next);
754
- setOpen(false);
755
- triggerRef.current?.focus();
756
- }
757
- }
758
- ) }) }) : null
759
- ] });
760
- }
761
- function DateRangePicker({
762
- value,
763
- onChange,
764
- min,
765
- max,
766
- invalid = false,
767
- disabled = false
768
- }) {
769
- const [open, setOpen] = useState(false);
770
- const [innerRange, setInnerRange] = useState({});
771
- const hostRef = useRef(null);
772
- const triggerRef = useRef(null);
773
- const isControlled = value !== void 0;
774
- const currentRange = (isControlled ? value : innerRange) ?? {};
775
- const fromDate = useMemo(() => parseYmd(currentRange.from), [currentRange.from]);
776
- const toDate = useMemo(() => parseYmd(currentRange.to), [currentRange.to]);
777
- const minDate = useMemo(() => parseYmd(min), [min]);
778
- const maxDate = useMemo(() => parseYmd(max), [max]);
779
- const [focusDate, setFocusDate] = useState(() => fromDate ?? clampDate(/* @__PURE__ */ new Date(), minDate, maxDate));
780
- const dismiss = useCallback((reason) => {
781
- setOpen(false);
782
- if (reason === "escape") triggerRef.current?.focus();
783
- }, []);
784
- useDismiss(open, hostRef, dismiss);
785
- const hasValue = Boolean(currentRange.from || currentRange.to);
786
- const label = hasValue ? `${currentRange.from ?? ""} ~ ${currentRange.to ?? ""}` : "\uAE30\uAC04 \uC120\uD0DD";
787
- const isInvalid = Boolean(invalid);
788
- const openCalendar = () => {
789
- setFocusDate(fromDate ?? toDate ?? clampDate(/* @__PURE__ */ new Date(), minDate, maxDate));
790
- setOpen(true);
791
- };
792
- const commit = (next) => {
793
- if (!isControlled) setInnerRange(next);
794
- onChange?.(next);
795
- };
796
- const pick = (date) => {
797
- const ymd = formatYmd(date);
798
- const startingOver = fromDate === void 0 || toDate !== void 0 || date.getTime() < fromDate.getTime();
799
- if (startingOver) {
800
- commit({ from: ymd, to: void 0 });
801
- return;
802
- }
803
- commit({ from: currentRange.from, to: ymd });
804
- setOpen(false);
805
- triggerRef.current?.focus();
806
- };
807
- return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "wp-dp-host", children: [
808
- /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-datepicker", css: DP_CSS }),
809
- /* @__PURE__ */ jsxs(
810
- "button",
811
- {
812
- ref: triggerRef,
813
- type: "button",
814
- className: triggerClassName("md", isInvalid),
815
- "aria-invalid": isInvalid || void 0,
816
- "aria-haspopup": "dialog",
817
- "aria-expanded": open,
818
- disabled,
819
- onClick: () => open ? setOpen(false) : openCalendar(),
820
- children: [
821
- /* @__PURE__ */ jsx("span", { className: "wp-dp-trigger__icon", children: /* @__PURE__ */ jsx(Icon, { name: "calendar", size: 15 }) }),
822
- /* @__PURE__ */ jsx("span", { className: `wp-dp-trigger__value${hasValue ? "" : " wp-dp-trigger__value--placeholder"}`, children: label })
823
- ]
824
- }
825
- ),
826
- open ? /* @__PURE__ */ jsx("div", { className: "wp-dp-pop wp-dp-pop--wide", role: "dialog", "aria-label": "\uAE30\uAC04 \uC120\uD0DD \uB2EC\uB825", children: /* @__PURE__ */ jsx("div", { className: "wp-dp-pop__body", children: /* @__PURE__ */ jsx(
827
- Calendar,
828
- {
829
- monthCount: 2,
830
- minDate,
831
- maxDate,
832
- focusDate,
833
- onFocusDateChange: setFocusDate,
834
- dayState: (date) => {
835
- const t = date.getTime();
836
- const start = fromDate?.getTime();
837
- const end = toDate?.getTime();
838
- if (start !== void 0 && end !== void 0 && t > start && t < end) return { rangeMiddle: true };
839
- return {
840
- rangeStart: start !== void 0 && t === start && end !== void 0,
841
- rangeEnd: end !== void 0 && t === end,
842
- // 아직 시작만 고른 상태는 단일 선택처럼 보인다
843
- selected: start !== void 0 && t === start && end === void 0 || void 0
844
- };
845
- },
846
- onPick: pick
847
- }
848
- ) }) }) : null
849
- ] });
850
- }
851
- var DP_CSS = `
852
- .wp-dp-host{position:relative}
853
- .wp-dp-pop{position:absolute;top:calc(100% + var(--wp-space-2));left:0;min-width:100%;width:max-content;background:var(--wp-surface-card);border:1px solid var(--wp-border-subtle);border-radius:var(--wp-radius-lg);box-shadow:var(--wp-shadow-lg);z-index:300}
854
- .wp-dp-pop--wide{max-width:min(640px,90vw)}
855
- .wp-dp-pop__body{padding:var(--wp-space-4);max-height:60vh;overflow:auto}
856
- .wp-dp-trigger{display:inline-flex;align-items:center;gap:var(--wp-space-2);text-align:left;cursor:pointer}
857
- .wp-dp-trigger:disabled{cursor:not-allowed}
858
- .wp-dp-trigger__icon{flex:none;display:inline-flex;color:var(--wp-text-muted)}
859
- .wp-dp-trigger:disabled .wp-dp-trigger__icon{color:var(--wp-text-disabled)}
860
- .wp-dp-trigger__value{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--wp-font-mono);font-size:12.5px;letter-spacing:-0.01em}
861
- .wp-dp-trigger__value--placeholder{font-family:inherit;font-size:13px;letter-spacing:normal;color:var(--wp-text-subtle)}
862
- .wp-dp{font-family:inherit;font-size:13px;color:var(--wp-text-default)}
863
- .wp-dp__months{position:relative;display:flex;flex-wrap:wrap;gap:var(--wp-space-5)}
864
- .wp-dp__nav{position:absolute;top:0;right:0;display:flex;gap:var(--wp-space-1);z-index:1}
865
- .wp-dp__navbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;background:transparent;border-radius:var(--wp-radius-sm);color:var(--wp-text-muted);cursor:pointer;transition:background 0.12s,color 0.12s}
866
- .wp-dp__navbtn:hover:not(:disabled){background:var(--wp-surface-hover);color:var(--wp-text-strong)}
867
- .wp-dp__navbtn:focus-visible{outline:2px solid var(--wp-border-focus);outline-offset:1px}
868
- .wp-dp__navbtn:disabled{color:var(--wp-text-disabled);cursor:default;background:transparent}
869
- .wp-dp__caption{display:flex;align-items:center;height:28px;margin-bottom:var(--wp-space-2);padding-left:var(--wp-space-1)}
870
- .wp-dp__caption-label{font-size:13px;font-weight:600;color:var(--wp-text-strong)}
871
- .wp-dp__grid{border-collapse:collapse}
872
- .wp-dp__weekday{width:32px;height:28px;padding:0;font-size:12px;font-weight:500;color:var(--wp-text-muted);text-align:center}
873
- .wp-dp__weekday:first-child{color:var(--wp-text-danger)}
874
- .wp-dp__day{padding:0;text-align:center}
875
- .wp-dp__day-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:30px;padding:0;border:none;background:transparent;border-radius:var(--wp-radius-sm);font:inherit;font-variant-numeric:tabular-nums;color:inherit;cursor:pointer;transition:background 0.12s,color 0.12s}
876
- .wp-dp__day:not(.wp-dp__day--selected):not(.wp-dp__day--disabled) .wp-dp__day-btn:hover{background:var(--wp-surface-hover)}
877
- .wp-dp__day-btn:focus-visible{outline:2px solid var(--wp-border-focus);outline-offset:-1px}
878
- .wp-dp__day--today .wp-dp__day-btn{box-shadow:inset 0 0 0 1px var(--wp-border-focus)}
879
- .wp-dp__day--outside{color:var(--wp-text-subtle)}
880
- .wp-dp__day--disabled{color:var(--wp-text-disabled)}
881
- .wp-dp__day--disabled .wp-dp__day-btn{cursor:default}
882
- .wp-dp__day--selected .wp-dp__day-btn{background:var(--wp-action-primary-bg);color:var(--wp-action-primary-fg);font-weight:500}
883
- .wp-dp__day--selected.wp-dp__day--today .wp-dp__day-btn{box-shadow:none}
884
- .wp-dp__day--range-middle .wp-dp__day-btn{background:var(--wp-surface-selected);color:var(--wp-text-default);border-radius:0;font-weight:400}
885
- .wp-dp__day--range-start .wp-dp__day-btn,.wp-dp__day--range-end .wp-dp__day-btn{background:var(--wp-action-primary-bg);color:var(--wp-action-primary-fg);font-weight:500}
886
- .wp-dp__day--range-start.wp-dp__day--today .wp-dp__day-btn,.wp-dp__day--range-end.wp-dp__day--today .wp-dp__day-btn{box-shadow:none}
887
- `;
888
-
889
- export { Alert, Badge, Button, Card, Checkbox, DatePicker, DateRangePicker, Dialog, EmptyState, Field, HoistedStyle, Icon, IconButton, Input, Pagination, ProgressBar, Select, Spinner, StatCard, Switch, Table, Tabs, Tag, Textarea, Toast };