@tipp/ui 1.6.7 → 1.6.9

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 (166) hide show
  1. package/dist/app/index.cjs.map +1 -1
  2. package/dist/app/index.js +60 -60
  3. package/dist/app/platform/coach-question-list.cjs.map +1 -1
  4. package/dist/app/platform/coach-question-list.js +27 -27
  5. package/dist/app/platform/edit-coaching-time.cjs.map +1 -1
  6. package/dist/app/platform/edit-coaching-time.js +38 -38
  7. package/dist/app/platform/edit-service-type.cjs.map +1 -1
  8. package/dist/app/platform/edit-service-type.js +37 -37
  9. package/dist/app/platform/goal-manage-card-edit.cjs.map +1 -1
  10. package/dist/app/platform/goal-manage-card-edit.js +38 -38
  11. package/dist/app/platform/goal-manage-card-read.cjs.map +1 -1
  12. package/dist/app/platform/goal-manage-card-read.js +27 -27
  13. package/dist/app/platform/on-offline-radio-card.cjs.map +1 -1
  14. package/dist/app/platform/on-offline-radio-card.js +37 -37
  15. package/dist/app/platform/report-card.cjs.map +1 -1
  16. package/dist/app/platform/report-card.js +27 -27
  17. package/dist/app/platform/reservation-card.cjs.map +1 -1
  18. package/dist/app/platform/reservation-card.js +38 -38
  19. package/dist/app/platform/session-card.cjs.map +1 -1
  20. package/dist/app/platform/session-card.js +39 -39
  21. package/dist/app/platform/session-review-simple-read.cjs.map +1 -1
  22. package/dist/app/platform/session-review-simple-read.js +27 -27
  23. package/dist/app/platform/userInfos/coaching-customer-info/index.cjs.map +1 -1
  24. package/dist/app/platform/userInfos/coaching-customer-info/index.js +32 -32
  25. package/dist/app/platform/userInfos/coaching-customer-info/large.cjs.map +1 -1
  26. package/dist/app/platform/userInfos/coaching-customer-info/large.js +27 -27
  27. package/dist/app/platform/userInfos/coaching-customer-info/medium.cjs.map +1 -1
  28. package/dist/app/platform/userInfos/coaching-customer-info/medium.js +27 -27
  29. package/dist/app/platform/userInfos/coaching-customer-info/small.cjs.map +1 -1
  30. package/dist/app/platform/userInfos/coaching-customer-info/small.js +26 -26
  31. package/dist/app/platform/userInfos/session-user-info-detail.cjs.map +1 -1
  32. package/dist/app/platform/userInfos/session-user-info-detail.js +26 -26
  33. package/dist/app/platform/userInfos/utils.cjs.map +1 -1
  34. package/dist/app/platform/userInfos/utils.js +26 -26
  35. package/dist/atoms/index.cjs.map +1 -1
  36. package/dist/atoms/index.js +65 -65
  37. package/dist/atoms/pagination.cjs.map +1 -1
  38. package/dist/atoms/pagination.js +2 -2
  39. package/dist/chunk-36MI6MDW.js +174 -0
  40. package/dist/chunk-36MI6MDW.js.map +1 -0
  41. package/dist/chunk-4CUWLQB3.js +350 -0
  42. package/dist/chunk-4CUWLQB3.js.map +1 -0
  43. package/dist/chunk-4EEH2YHX.js +192 -0
  44. package/dist/chunk-4EEH2YHX.js.map +1 -0
  45. package/dist/chunk-4P2ADBDP.js +145 -0
  46. package/dist/chunk-4P2ADBDP.js.map +1 -0
  47. package/dist/chunk-66VIPWGA.js +277 -0
  48. package/dist/chunk-66VIPWGA.js.map +1 -0
  49. package/dist/chunk-7JWQPWWT.js +128 -0
  50. package/dist/chunk-7JWQPWWT.js.map +1 -0
  51. package/dist/chunk-AKFBMQXZ.js +62 -0
  52. package/dist/chunk-AKFBMQXZ.js.map +1 -0
  53. package/dist/chunk-BC47HOBK.js +165 -0
  54. package/dist/chunk-BC47HOBK.js.map +1 -0
  55. package/dist/chunk-DODFRJFU.js +145 -0
  56. package/dist/chunk-DODFRJFU.js.map +1 -0
  57. package/dist/chunk-EQKVFOK5.js +60 -0
  58. package/dist/chunk-EQKVFOK5.js.map +1 -0
  59. package/dist/chunk-FDCXXCLY.js +128 -0
  60. package/dist/chunk-FDCXXCLY.js.map +1 -0
  61. package/dist/chunk-GB4V4YRC.js +165 -0
  62. package/dist/chunk-GB4V4YRC.js.map +1 -0
  63. package/dist/chunk-GO3ERHJT.js +174 -0
  64. package/dist/chunk-GO3ERHJT.js.map +1 -0
  65. package/dist/chunk-HB5XXB6G.js +277 -0
  66. package/dist/chunk-HB5XXB6G.js.map +1 -0
  67. package/dist/chunk-HTJAPTM2.js +145 -0
  68. package/dist/chunk-HTJAPTM2.js.map +1 -0
  69. package/dist/chunk-IAHDOZML.js +145 -0
  70. package/dist/chunk-IAHDOZML.js.map +1 -0
  71. package/dist/chunk-JVJCM2Q5.js +101 -0
  72. package/dist/chunk-JVJCM2Q5.js.map +1 -0
  73. package/dist/chunk-KOII3TFD.js +145 -0
  74. package/dist/chunk-KOII3TFD.js.map +1 -0
  75. package/dist/chunk-M3J4C5UA.js +192 -0
  76. package/dist/chunk-M3J4C5UA.js.map +1 -0
  77. package/dist/chunk-MG3R4W5N.js +350 -0
  78. package/dist/chunk-MG3R4W5N.js.map +1 -0
  79. package/dist/chunk-MHTF5JUP.js +60 -0
  80. package/dist/chunk-MHTF5JUP.js.map +1 -0
  81. package/dist/chunk-MSR2KBC3.js +60 -0
  82. package/dist/chunk-MSR2KBC3.js.map +1 -0
  83. package/dist/chunk-NA6TSJLE.js +350 -0
  84. package/dist/chunk-NA6TSJLE.js.map +1 -0
  85. package/dist/chunk-ODI7VQOP.js +103 -0
  86. package/dist/chunk-ODI7VQOP.js.map +1 -0
  87. package/dist/chunk-QHLAIWAT.js +169 -0
  88. package/dist/chunk-QHLAIWAT.js.map +1 -0
  89. package/dist/chunk-ROBHXJLL.js +169 -0
  90. package/dist/chunk-ROBHXJLL.js.map +1 -0
  91. package/dist/chunk-SRWD47RX.js +145 -0
  92. package/dist/chunk-SRWD47RX.js.map +1 -0
  93. package/dist/chunk-TGX7XRZN.js +107 -0
  94. package/dist/chunk-TGX7XRZN.js.map +1 -0
  95. package/dist/chunk-TLI3ULWV.js +62 -0
  96. package/dist/chunk-TLI3ULWV.js.map +1 -0
  97. package/dist/chunk-X2X44CLR.js +101 -0
  98. package/dist/chunk-X2X44CLR.js.map +1 -0
  99. package/dist/chunk-XOKQWEXD.js +277 -0
  100. package/dist/chunk-XOKQWEXD.js.map +1 -0
  101. package/dist/chunk-YSB4PQ57.js +169 -0
  102. package/dist/chunk-YSB4PQ57.js.map +1 -0
  103. package/dist/chunk-Z5NLJGNU.js +165 -0
  104. package/dist/chunk-Z5NLJGNU.js.map +1 -0
  105. package/dist/icon.cjs +14 -2
  106. package/dist/icon.cjs.map +1 -1
  107. package/dist/icon.d.cts +1 -1
  108. package/dist/icon.d.ts +1 -1
  109. package/dist/icon.js +15 -3
  110. package/dist/icons/call-end.cjs +107 -0
  111. package/dist/icons/call-end.cjs.map +1 -0
  112. package/dist/icons/call-end.d.cts +6 -0
  113. package/dist/icons/call-end.d.ts +6 -0
  114. package/dist/icons/call-end.js +49 -0
  115. package/dist/icons/call-end.js.map +1 -0
  116. package/dist/icons/end-call.cjs +107 -0
  117. package/dist/icons/end-call.cjs.map +1 -0
  118. package/dist/icons/end-call.d.cts +6 -0
  119. package/dist/icons/end-call.d.ts +6 -0
  120. package/dist/icons/end-call.js +49 -0
  121. package/dist/icons/end-call.js.map +1 -0
  122. package/dist/icons/video-disabled.cjs +98 -0
  123. package/dist/icons/video-disabled.cjs.map +1 -0
  124. package/dist/icons/video-disabled.d.cts +6 -0
  125. package/dist/icons/video-disabled.d.ts +6 -0
  126. package/dist/icons/video-disabled.js +40 -0
  127. package/dist/icons/video-disabled.js.map +1 -0
  128. package/dist/icons/video.cjs +96 -0
  129. package/dist/icons/video.cjs.map +1 -0
  130. package/dist/icons/video.d.cts +6 -0
  131. package/dist/icons/video.d.ts +6 -0
  132. package/dist/icons/video.js +38 -0
  133. package/dist/icons/video.js.map +1 -0
  134. package/dist/index.cjs +12 -0
  135. package/dist/index.cjs.map +1 -1
  136. package/dist/index.d.cts +1 -1
  137. package/dist/index.d.ts +1 -1
  138. package/dist/index.js +136 -124
  139. package/dist/molecules/date-picker/date-picker-button.cjs.map +1 -1
  140. package/dist/molecules/date-picker/date-picker-button.js +28 -28
  141. package/dist/molecules/date-picker/index.cjs.map +1 -1
  142. package/dist/molecules/date-picker/index.js +2 -2
  143. package/dist/molecules/expand-table/index.cjs.map +1 -1
  144. package/dist/molecules/expand-table/index.js +27 -27
  145. package/dist/molecules/expand-table/row.cjs.map +1 -1
  146. package/dist/molecules/expand-table/row.js +26 -26
  147. package/dist/molecules/index.cjs.map +1 -1
  148. package/dist/molecules/index.js +46 -46
  149. package/dist/molecules/learning-post.js +2 -2
  150. package/dist/molecules/navigation.cjs.map +1 -1
  151. package/dist/molecules/navigation.js +26 -26
  152. package/dist/molecules/radio-button-card.cjs.map +1 -1
  153. package/dist/molecules/radio-button-card.js +26 -26
  154. package/dist/molecules/stepper.cjs.map +1 -1
  155. package/dist/molecules/stepper.js +3 -3
  156. package/dist/molecules/tag-selector.cjs.map +1 -1
  157. package/dist/molecules/tag-selector.js +27 -27
  158. package/dist/molecules/time-select.cjs.map +1 -1
  159. package/dist/molecules/time-select.js +28 -28
  160. package/dist/utils/index.js +6 -6
  161. package/package.json +1 -1
  162. package/src/icon.ts +6 -0
  163. package/src/icons/call-end.tsx +31 -0
  164. package/src/icons/end-call.tsx +31 -0
  165. package/src/icons/video-disabled.tsx +27 -0
  166. package/src/icons/video.tsx +25 -0
@@ -0,0 +1,277 @@
1
+ import {
2
+ OnOfflineRadioCard
3
+ } from "./chunk-4UV3GA6V.js";
4
+ import {
5
+ DatePickerButton
6
+ } from "./chunk-TLI3ULWV.js";
7
+ import {
8
+ TimeSelect
9
+ } from "./chunk-EVCB4ZZJ.js";
10
+ import {
11
+ getTimeOption,
12
+ parseTimeOption
13
+ } from "./chunk-VAXB7NV2.js";
14
+ import {
15
+ Form
16
+ } from "./chunk-PYR4SVP5.js";
17
+ import {
18
+ Grid
19
+ } from "./chunk-EGEQY3KT.js";
20
+ import {
21
+ Inset
22
+ } from "./chunk-XQOL7UBI.js";
23
+ import {
24
+ Heading
25
+ } from "./chunk-HK224ADT.js";
26
+ import {
27
+ toast
28
+ } from "./chunk-CYYWMYE7.js";
29
+ import {
30
+ Card
31
+ } from "./chunk-2ZQK7NTN.js";
32
+ import {
33
+ Badge
34
+ } from "./chunk-EWD4AO5N.js";
35
+ import {
36
+ Box
37
+ } from "./chunk-4Y5BEXVN.js";
38
+ import {
39
+ BulletText
40
+ } from "./chunk-NAL2USH5.js";
41
+ import {
42
+ Typo
43
+ } from "./chunk-52MVZ6AN.js";
44
+ import {
45
+ Flex
46
+ } from "./chunk-25HMMI7R.js";
47
+ import {
48
+ Button
49
+ } from "./chunk-U7JPP7WJ.js";
50
+ import {
51
+ ArrowRightIcon,
52
+ Cross1Icon
53
+ } from "./chunk-ODI7VQOP.js";
54
+ import {
55
+ __spreadProps,
56
+ __spreadValues
57
+ } from "./chunk-N552FDTV.js";
58
+
59
+ // src/app/platform/reservation-card.tsx
60
+ import { useCallback, useEffect, useMemo, useState } from "react";
61
+ import { setHours, setMinutes } from "date-fns";
62
+ import { jsx, jsxs } from "react/jsx-runtime";
63
+ function ReservationCard(props) {
64
+ const {
65
+ sessionNumber,
66
+ customerName,
67
+ readonly,
68
+ defaultTime,
69
+ defaultType,
70
+ error,
71
+ minTime,
72
+ maxTime,
73
+ onClickReserve,
74
+ onClickCancel,
75
+ onClickCompleteSession
76
+ } = props;
77
+ const [editValues, setEditValues] = useState({
78
+ date: props.defaultTime,
79
+ type: props.defaultType
80
+ });
81
+ const date = readonly ? defaultTime : editValues.date;
82
+ const type = readonly ? defaultType : editValues.type;
83
+ const time = date && getTimeOption(date);
84
+ const onClickSave = useCallback(() => {
85
+ var _a;
86
+ (_a = props.onClickSave) == null ? void 0 : _a.call(props, editValues);
87
+ }, [editValues, props]);
88
+ const onClickReset = useCallback(() => {
89
+ setEditValues({
90
+ date: defaultTime,
91
+ type: defaultType
92
+ });
93
+ }, [defaultTime, defaultType]);
94
+ const ActionButtons = useMemo(() => {
95
+ if (readonly) {
96
+ return /* @__PURE__ */ jsx(Button, { onClick: onClickReserve, size: "small", variant: "surface", children: defaultTime && defaultType ? "\uC608\uC57D \uC218\uC815\uD558\uAE30" : "\uC608\uC57D\uD558\uAE30" });
97
+ }
98
+ return /* @__PURE__ */ jsx(Button, { color: "gray", onClick: onClickCancel, variant: "transparent", children: /* @__PURE__ */ jsx(Cross1Icon, {}) });
99
+ }, [defaultTime, defaultType, onClickCancel, onClickReserve, readonly]);
100
+ const onChangeDate = useCallback(
101
+ (newDate) => {
102
+ if (!newDate)
103
+ return;
104
+ const { hour = 0, minute = 0 } = time ? parseTimeOption(time) : {};
105
+ setEditValues((prev) => {
106
+ return __spreadProps(__spreadValues({}, prev), {
107
+ date: setMinutes(setHours(newDate, hour), minute)
108
+ });
109
+ });
110
+ },
111
+ [time]
112
+ );
113
+ const onChangeType = useCallback((newType) => {
114
+ setEditValues((prev) => {
115
+ return __spreadProps(__spreadValues({}, prev), {
116
+ type: newType
117
+ });
118
+ });
119
+ }, []);
120
+ const onChangeTime = useCallback(
121
+ (v) => {
122
+ const { hour, minute } = parseTimeOption(v);
123
+ setEditValues((prev) => {
124
+ return __spreadProps(__spreadValues({}, prev), {
125
+ date: setMinutes(setHours(date || /* @__PURE__ */ new Date(), hour), minute)
126
+ });
127
+ });
128
+ },
129
+ [date]
130
+ );
131
+ useEffect(() => {
132
+ if (!minTime || !editValues.date || readonly)
133
+ return;
134
+ if (editValues.date < minTime) {
135
+ toast.warn("\uC120\uD0DD \uAC00\uB2A5\uD55C \uC2DC\uAC04\uB300\uB85C \uBCC0\uACBD\uB418\uC5C8\uC2B5\uB2C8\uB2E4.");
136
+ setEditValues((prev) => {
137
+ return __spreadProps(__spreadValues({}, prev), {
138
+ date: minTime
139
+ });
140
+ });
141
+ }
142
+ }, [editValues, minTime, readonly]);
143
+ useEffect(() => {
144
+ if (!maxTime || !editValues.date || readonly)
145
+ return;
146
+ if (editValues.date > maxTime) {
147
+ toast.warn("\uC120\uD0DD \uAC00\uB2A5\uD55C \uC2DC\uAC04\uB300\uB85C \uBCC0\uACBD\uB418\uC5C8\uC2B5\uB2C8\uB2E4.");
148
+ setEditValues((prev) => {
149
+ return __spreadProps(__spreadValues({}, prev), {
150
+ date: maxTime
151
+ });
152
+ });
153
+ }
154
+ }, [editValues, maxTime, readonly]);
155
+ return /* @__PURE__ */ jsxs(
156
+ Card,
157
+ {
158
+ error: Boolean(error),
159
+ size: "3",
160
+ style: { overflow: "visible", contain: "initial" },
161
+ children: [
162
+ /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", justify: "between", mb: "5", children: [
163
+ /* @__PURE__ */ jsxs(
164
+ Grid,
165
+ {
166
+ align: "center",
167
+ columns: { initial: "1", xs: "auto 1fr" },
168
+ gapY: "2",
169
+ children: [
170
+ /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
171
+ /* @__PURE__ */ jsxs(Heading, { variant: "heading4", children: [
172
+ customerName || "-",
173
+ "\uB2D8 ",
174
+ sessionNumber || "-",
175
+ "\uD68C\uCC28 \uC138\uC158"
176
+ ] }),
177
+ /* @__PURE__ */ jsx(Badge, { ml: "2", children: "\uB2E4\uC74C \uC138\uC158" })
178
+ ] }),
179
+ error ? /* @__PURE__ */ jsx(BulletText, { color: "red", variant: "caption", children: error }) : null
180
+ ]
181
+ }
182
+ ),
183
+ /* @__PURE__ */ jsx(Flex, { children: ActionButtons })
184
+ ] }),
185
+ /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
186
+ Form.Root,
187
+ {
188
+ onSubmit: (e) => {
189
+ e.preventDefault();
190
+ },
191
+ children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "5", children: [
192
+ /* @__PURE__ */ jsx(Form.Field, { name: "date", children: /* @__PURE__ */ jsxs(Form.Label, { asChild: true, children: [
193
+ /* @__PURE__ */ jsx(Heading, { mb: "2", variant: "heading5", weight: "regular", children: "\uC138\uC158 \uC77C\uC790\uC640 \uC2DC\uAC01" }),
194
+ /* @__PURE__ */ jsxs(Grid, { columns: "1fr auto", gap: "4", children: [
195
+ /* @__PURE__ */ jsx(
196
+ DatePickerButton,
197
+ {
198
+ disabled: readonly,
199
+ maxDate: maxTime,
200
+ minDate: minTime,
201
+ onChange: onChangeDate,
202
+ placeholder: "\uC77C\uC790\uB97C \uC120\uD0DD\uD574\uC8FC\uC138\uC694",
203
+ selected: date,
204
+ size: "large"
205
+ }
206
+ ),
207
+ /* @__PURE__ */ jsx(
208
+ TimeSelect,
209
+ {
210
+ disabled: readonly,
211
+ maxTime,
212
+ minTime,
213
+ onValueChange: onChangeTime,
214
+ size: "3",
215
+ time: date,
216
+ value: time
217
+ }
218
+ )
219
+ ] })
220
+ ] }) }),
221
+ /* @__PURE__ */ jsxs(Form.Field, { name: "type", children: [
222
+ /* @__PURE__ */ jsx(Form.Label, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { mb: "2", variant: "heading5", weight: "regular", children: "\uC628/\uC624\uD504\uB77C\uC778 \uC9C4\uD589 \uC5EC\uBD80" }) }),
223
+ /* @__PURE__ */ jsx(Form.Control, { asChild: true, children: /* @__PURE__ */ jsx(
224
+ OnOfflineRadioCard,
225
+ {
226
+ disabled: readonly,
227
+ onValueChange: onChangeType,
228
+ size: "1",
229
+ value: type
230
+ }
231
+ ) })
232
+ ] }),
233
+ readonly ? null : /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", justify: "end", children: [
234
+ /* @__PURE__ */ jsx(
235
+ Button,
236
+ {
237
+ color: "gray",
238
+ onClick: onClickReset,
239
+ size: "small",
240
+ variant: "transparent",
241
+ children: "\uCD08\uAE30\uD654\uD558\uAE30"
242
+ }
243
+ ),
244
+ /* @__PURE__ */ jsx(Button, { onClick: onClickSave, size: "small", children: "\uC800\uC7A5\uD558\uAE30" })
245
+ ] })
246
+ ] })
247
+ }
248
+ ) }),
249
+ readonly ? /* @__PURE__ */ jsx(Inset, { clip: "border-box", side: "bottom", children: /* @__PURE__ */ jsx(
250
+ Box,
251
+ {
252
+ mt: "5",
253
+ px: "5",
254
+ py: "4",
255
+ style: { backgroundColor: "var(--accent-a3)" },
256
+ width: "100%",
257
+ children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "4", justify: "center", children: [
258
+ /* @__PURE__ */ jsxs(Typo, { children: [
259
+ sessionNumber || "-",
260
+ "\uD68C\uCC28 \uC138\uC158\uC744 \uC644\uB8CC\uD558\uC168\uB098\uC694?"
261
+ ] }),
262
+ /* @__PURE__ */ jsxs(Button, { onClick: onClickCompleteSession, size: "small", children: [
263
+ "\uC138\uC158 \uC885\uB8CC\uD558\uAE30",
264
+ /* @__PURE__ */ jsx(ArrowRightIcon, {})
265
+ ] })
266
+ ] })
267
+ }
268
+ ) }) : null
269
+ ]
270
+ }
271
+ );
272
+ }
273
+
274
+ export {
275
+ ReservationCard
276
+ };
277
+ //# sourceMappingURL=chunk-66VIPWGA.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/app/platform/reservation-card.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { setHours, setMinutes } from 'date-fns';\nimport {\n Badge,\n Box,\n BulletText,\n Button,\n Card,\n Flex,\n Form,\n Grid,\n Heading,\n Inset,\n toast,\n Typo,\n} from '../../atoms';\nimport { ArrowRightIcon, Cross1Icon } from '../../icon';\nimport { DatePickerButton, TimeSelect } from '../../molecules';\nimport { getTimeOption, parseTimeOption } from '../../utils';\nimport { OnOfflineRadioCard } from './on-offline-radio-card';\n\ntype Type = 'onlineCoaching' | 'offlineCoaching';\n\ninterface Values {\n date?: Date;\n type?: Type;\n}\n\nexport interface ReservationCardProps {\n sessionNumber?: number;\n readonly?: boolean;\n defaultTime?: Date;\n defaultType?: Type;\n customerName?: string;\n error?: string;\n onClickCompleteSession?: () => void;\n onClickReserve?: () => void;\n onClickSave?: (values: Values) => void;\n onClickCancel?: () => void;\n minTime?: Date;\n maxTime?: Date;\n}\n\nexport function ReservationCard(\n props: ReservationCardProps\n): React.ReactElement {\n const {\n sessionNumber,\n customerName,\n readonly,\n defaultTime,\n defaultType,\n error,\n minTime,\n maxTime,\n onClickReserve,\n onClickCancel,\n onClickCompleteSession,\n } = props;\n\n const [editValues, setEditValues] = useState<Values>({\n date: props.defaultTime,\n type: props.defaultType,\n });\n\n const date = readonly ? defaultTime : editValues.date;\n const type = readonly ? defaultType : editValues.type;\n const time = date && getTimeOption(date);\n\n const onClickSave = useCallback(() => {\n props.onClickSave?.(editValues);\n }, [editValues, props]);\n\n const onClickReset = useCallback(() => {\n setEditValues({\n date: defaultTime,\n type: defaultType,\n });\n }, [defaultTime, defaultType]);\n\n const ActionButtons = useMemo(() => {\n if (readonly) {\n return (\n <Button onClick={onClickReserve} size=\"small\" variant=\"surface\">\n {defaultTime && defaultType ? '예약 수정하기' : '예약하기'}\n </Button>\n );\n }\n return (\n <Button color=\"gray\" onClick={onClickCancel} variant=\"transparent\">\n <Cross1Icon />\n </Button>\n );\n }, [defaultTime, defaultType, onClickCancel, onClickReserve, readonly]);\n\n const onChangeDate = useCallback(\n (newDate: Date | null) => {\n if (!newDate) return;\n const { hour = 0, minute = 0 } = time ? parseTimeOption(time) : {};\n setEditValues((prev) => {\n return {\n ...prev,\n date: setMinutes(setHours(newDate, hour), minute),\n };\n });\n },\n [time]\n );\n\n const onChangeType = useCallback((newType: string) => {\n setEditValues((prev) => {\n return {\n ...prev,\n type: newType as Type,\n };\n });\n }, []);\n\n const onChangeTime = useCallback(\n (v: string) => {\n const { hour, minute } = parseTimeOption(v);\n setEditValues((prev) => {\n return {\n ...prev,\n date: setMinutes(setHours(date || new Date(), hour), minute),\n };\n });\n },\n [date]\n );\n\n useEffect(() => {\n if (!minTime || !editValues.date || readonly) return;\n if (editValues.date < minTime) {\n toast.warn('선택 가능한 시간대로 변경되었습니다.');\n setEditValues((prev) => {\n return {\n ...prev,\n date: minTime,\n };\n });\n }\n }, [editValues, minTime, readonly]);\n\n useEffect(() => {\n if (!maxTime || !editValues.date || readonly) return;\n if (editValues.date > maxTime) {\n toast.warn('선택 가능한 시간대로 변경되었습니다.');\n setEditValues((prev) => {\n return {\n ...prev,\n date: maxTime,\n };\n });\n }\n }, [editValues, maxTime, readonly]);\n\n return (\n <Card\n error={Boolean(error)}\n size=\"3\"\n style={{ overflow: 'visible', contain: 'initial' }}\n >\n <Flex align=\"center\" gap=\"3\" justify=\"between\" mb=\"5\">\n <Grid\n align=\"center\"\n columns={{ initial: '1', xs: 'auto 1fr' }}\n gapY=\"2\"\n >\n <Flex align=\"center\">\n <Heading variant=\"heading4\">\n {customerName || '-'}님 {sessionNumber || '-'}회차 세션\n </Heading>\n <Badge ml=\"2\">다음 세션</Badge>\n </Flex>\n {error ? (\n <BulletText color=\"red\" variant=\"caption\">\n {error}\n </BulletText>\n ) : null}\n </Grid>\n <Flex>{ActionButtons}</Flex>\n </Flex>\n\n <Box>\n <Form.Root\n onSubmit={(e) => {\n e.preventDefault();\n }}\n >\n <Flex direction=\"column\" gap=\"5\">\n <Form.Field name=\"date\">\n <Form.Label asChild>\n <Heading mb=\"2\" variant=\"heading5\" weight=\"regular\">\n 세션 일자와 시각\n </Heading>\n <Grid columns=\"1fr auto\" gap=\"4\">\n <DatePickerButton\n disabled={readonly}\n maxDate={maxTime}\n minDate={minTime}\n onChange={onChangeDate}\n placeholder=\"일자를 선택해주세요\"\n selected={date}\n size=\"large\"\n />\n <TimeSelect\n disabled={readonly}\n maxTime={maxTime}\n minTime={minTime}\n onValueChange={onChangeTime}\n size=\"3\"\n time={date}\n value={time}\n />\n </Grid>\n </Form.Label>\n </Form.Field>\n\n <Form.Field name=\"type\">\n <Form.Label asChild>\n <Heading mb=\"2\" variant=\"heading5\" weight=\"regular\">\n 온/오프라인 진행 여부\n </Heading>\n </Form.Label>\n <Form.Control asChild>\n <OnOfflineRadioCard\n disabled={readonly}\n onValueChange={onChangeType}\n size=\"1\"\n value={type}\n />\n </Form.Control>\n </Form.Field>\n\n {readonly ? null : (\n <Flex align=\"center\" gap=\"3\" justify=\"end\">\n <Button\n color=\"gray\"\n onClick={onClickReset}\n size=\"small\"\n variant=\"transparent\"\n >\n 초기화하기\n </Button>\n <Button onClick={onClickSave} size=\"small\">\n 저장하기\n </Button>\n </Flex>\n )}\n </Flex>\n </Form.Root>\n </Box>\n\n {readonly ? (\n <Inset clip=\"border-box\" side=\"bottom\">\n <Box\n mt=\"5\"\n px=\"5\"\n py=\"4\"\n style={{ backgroundColor: 'var(--accent-a3)' }}\n width=\"100%\"\n >\n <Flex align=\"center\" gap=\"4\" justify=\"center\">\n <Typo>{sessionNumber || '-'}회차 세션을 완료하셨나요?</Typo>\n <Button onClick={onClickCompleteSession} size=\"small\">\n 세션 종료하기\n <ArrowRightIcon />\n </Button>\n </Flex>\n </Box>\n </Inset>\n ) : null}\n </Card>\n );\n}\n"],"mappings":"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","names":[]}
@@ -0,0 +1,128 @@
1
+ import {
2
+ IconButton
3
+ } from "./chunk-O3DNDMV3.js";
4
+ import {
5
+ Typo
6
+ } from "./chunk-52MVZ6AN.js";
7
+ import {
8
+ Flex
9
+ } from "./chunk-25HMMI7R.js";
10
+ import {
11
+ ChevronLeftIcon,
12
+ ChevronRightIcon,
13
+ DoubleArrowLeftIcon,
14
+ DoubleArrowRightIcon
15
+ } from "./chunk-TGX7XRZN.js";
16
+ import {
17
+ __spreadProps,
18
+ __spreadValues
19
+ } from "./chunk-N552FDTV.js";
20
+
21
+ // src/atoms/pagination.tsx
22
+ import { useCallback, useEffect, useMemo, useState } from "react";
23
+ import { jsx, jsxs } from "react/jsx-runtime";
24
+ function Pagination(props) {
25
+ const { onChange, count = 0, siblingCount = 2 } = props;
26
+ const [page, setPage] = useState(() => props.page || props.defaultPage || 1);
27
+ const visibleItems = useMemo(() => {
28
+ let start = Math.max(1, page - siblingCount);
29
+ let end = Math.min(count, page + siblingCount);
30
+ if (page - siblingCount <= 0 && end < count) {
31
+ end = Math.min(count, end + Math.abs(page - siblingCount) + 1);
32
+ } else if (page + siblingCount > count && start > 1) {
33
+ start = Math.max(1, start - (page + siblingCount - count));
34
+ }
35
+ return Array.from({ length: end - start + 1 }, (_, i) => i + start);
36
+ }, [count, page, siblingCount]);
37
+ useEffect(() => {
38
+ onChange == null ? void 0 : onChange(page);
39
+ }, [onChange, page]);
40
+ useEffect(() => {
41
+ if (props.page) {
42
+ setPage(props.page);
43
+ }
44
+ }, [props.page]);
45
+ const prev = useMemo(() => {
46
+ const p = page - 1;
47
+ return p < 1 ? void 0 : p;
48
+ }, [page]);
49
+ const next = useMemo(() => {
50
+ const n = page + 1;
51
+ return n > count ? void 0 : n;
52
+ }, [count, page]);
53
+ const onClickPrev = useCallback(() => {
54
+ prev && setPage(prev);
55
+ }, [prev]);
56
+ const onClickNext = useCallback(() => {
57
+ next && setPage(next);
58
+ }, [next]);
59
+ const doublePrev = useMemo(() => {
60
+ if (!visibleItems.length)
61
+ return;
62
+ return Math.max(0, visibleItems[0] - 1);
63
+ }, [visibleItems]);
64
+ const onClickDoublePrev = useCallback(() => {
65
+ doublePrev && setPage(doublePrev);
66
+ }, [doublePrev]);
67
+ const doubleNext = useMemo(() => {
68
+ if (!visibleItems.length)
69
+ return;
70
+ const n = visibleItems[visibleItems.length - 1] + 1;
71
+ if (n > count)
72
+ return;
73
+ return Math.min(count, n);
74
+ }, [count, visibleItems]);
75
+ const onClickDoubleNext = useCallback(() => {
76
+ doubleNext && setPage(doubleNext);
77
+ }, [doubleNext]);
78
+ const iconSize = {
79
+ height: 24,
80
+ width: 24
81
+ };
82
+ const moveButtonProps = {
83
+ variant: "ghost",
84
+ size: "3",
85
+ style: { borderRadius: "50%" }
86
+ };
87
+ return /* @__PURE__ */ jsxs(Flex, { align: "center", className: "tipp-pagination", gap: "4", children: [
88
+ /* @__PURE__ */ jsx(
89
+ IconButton,
90
+ __spreadProps(__spreadValues({
91
+ disabled: !doublePrev,
92
+ onClick: onClickDoublePrev
93
+ }, moveButtonProps), {
94
+ children: /* @__PURE__ */ jsx(DoubleArrowLeftIcon, __spreadValues({}, iconSize))
95
+ })
96
+ ),
97
+ /* @__PURE__ */ jsx(IconButton, __spreadProps(__spreadValues({ disabled: !prev, onClick: onClickPrev }, moveButtonProps), { children: /* @__PURE__ */ jsx(ChevronLeftIcon, __spreadValues({}, iconSize)) })),
98
+ /* @__PURE__ */ jsx(Flex, { gap: "1", children: visibleItems.map((item) => {
99
+ return /* @__PURE__ */ jsx(
100
+ "button",
101
+ {
102
+ className: `page-button ${item === page ? "active" : ""}`,
103
+ onClick: () => {
104
+ setPage(item);
105
+ },
106
+ type: "button",
107
+ children: /* @__PURE__ */ jsx(Typo, { variant: "body", children: item })
108
+ },
109
+ item
110
+ );
111
+ }) }),
112
+ /* @__PURE__ */ jsx(IconButton, __spreadProps(__spreadValues({ disabled: !next, onClick: onClickNext }, moveButtonProps), { children: /* @__PURE__ */ jsx(ChevronRightIcon, __spreadValues({}, iconSize)) })),
113
+ /* @__PURE__ */ jsx(
114
+ IconButton,
115
+ __spreadProps(__spreadValues({
116
+ disabled: !doubleNext,
117
+ onClick: onClickDoubleNext
118
+ }, moveButtonProps), {
119
+ children: /* @__PURE__ */ jsx(DoubleArrowRightIcon, __spreadValues({}, iconSize))
120
+ })
121
+ )
122
+ ] });
123
+ }
124
+
125
+ export {
126
+ Pagination
127
+ };
128
+ //# sourceMappingURL=chunk-7JWQPWWT.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/atoms/pagination.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport {\n ChevronLeftIcon,\n ChevronRightIcon,\n DoubleArrowLeftIcon,\n DoubleArrowRightIcon,\n} from '../icon';\nimport type { IconButtonProps } from './icon-button';\nimport { IconButton } from './icon-button';\nimport { Flex } from './flex';\nimport { Typo } from './typo';\n\nexport interface PaginationProps {\n /** 현재 선택된 페이지, 1부터 시작 */\n page?: number;\n /** 기본 선택 페이지, page보다 낮은 우선 순위를 갖는다 */\n defaultPage?: number;\n /** 선택한 페이지 변경 이벤트 cb */\n onChange?: (page: number) => void;\n /** 전체 페이지의 수 */\n count?: number;\n /** 표시할 페이지 버튼의 개수 */\n siblingCount?: number;\n}\n\nexport function Pagination(props: PaginationProps): React.ReactNode {\n const { onChange, count = 0, siblingCount = 2 } = props;\n\n const [page, setPage] = useState(() => props.page || props.defaultPage || 1);\n\n const visibleItems = useMemo(() => {\n let start = Math.max(1, page - siblingCount);\n let end = Math.min(count, page + siblingCount);\n if (page - siblingCount <= 0 && end < count) {\n end = Math.min(count, end + Math.abs(page - siblingCount) + 1);\n } else if (page + siblingCount > count && start > 1) {\n start = Math.max(1, start - (page + siblingCount - count));\n }\n\n return Array.from({ length: end - start + 1 }, (_, i) => i + start);\n }, [count, page, siblingCount]);\n\n useEffect(() => {\n onChange?.(page);\n }, [onChange, page]);\n\n useEffect(() => {\n if (props.page) {\n setPage(props.page);\n }\n }, [props.page]);\n\n const prev = useMemo<number | undefined>(() => {\n const p = page - 1;\n return p < 1 ? undefined : p;\n }, [page]);\n\n const next = useMemo<number | undefined>(() => {\n const n = page + 1;\n return n > count ? undefined : n;\n }, [count, page]);\n\n const onClickPrev = useCallback(() => {\n prev && setPage(prev);\n }, [prev]);\n\n const onClickNext = useCallback(() => {\n next && setPage(next);\n }, [next]);\n\n const doublePrev = useMemo<number | undefined>(() => {\n if (!visibleItems.length) return;\n return Math.max(0, visibleItems[0] - 1);\n }, [visibleItems]);\n\n const onClickDoublePrev = useCallback(() => {\n doublePrev && setPage(doublePrev);\n }, [doublePrev]);\n\n const doubleNext = useMemo<number | undefined>(() => {\n if (!visibleItems.length) return;\n const n = visibleItems[visibleItems.length - 1] + 1;\n if (n > count) return;\n return Math.min(count, n);\n }, [count, visibleItems]);\n\n const onClickDoubleNext = useCallback(() => {\n doubleNext && setPage(doubleNext);\n }, [doubleNext]);\n\n const iconSize = {\n height: 24,\n width: 24,\n };\n\n const moveButtonProps: IconButtonProps = {\n variant: 'ghost',\n size: '3',\n style: { borderRadius: '50%' },\n };\n\n return (\n <Flex align=\"center\" className=\"tipp-pagination\" gap=\"4\">\n <IconButton\n disabled={!doublePrev}\n onClick={onClickDoublePrev}\n {...moveButtonProps}\n >\n <DoubleArrowLeftIcon {...iconSize} />\n </IconButton>\n <IconButton disabled={!prev} onClick={onClickPrev} {...moveButtonProps}>\n <ChevronLeftIcon {...iconSize} />\n </IconButton>\n <Flex gap=\"1\">\n {visibleItems.map((item) => {\n return (\n <button\n className={`page-button ${item === page ? 'active' : ''}`}\n key={item}\n onClick={() => {\n setPage(item);\n }}\n type=\"button\"\n >\n <Typo variant=\"body\">{item}</Typo>\n </button>\n );\n })}\n </Flex>\n <IconButton disabled={!next} onClick={onClickNext} {...moveButtonProps}>\n <ChevronRightIcon {...iconSize} />\n </IconButton>\n <IconButton\n disabled={!doubleNext}\n onClick={onClickDoubleNext}\n {...moveButtonProps}\n >\n <DoubleArrowRightIcon {...iconSize} />\n </IconButton>\n </Flex>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,aAAa,WAAW,SAAS,gBAAgB;AAsG7D,SAMI,KANJ;AA7EG,SAAS,WAAW,OAAyC;AAClE,QAAM,EAAE,UAAU,QAAQ,GAAG,eAAe,EAAE,IAAI;AAElD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,MAAM,MAAM,QAAQ,MAAM,eAAe,CAAC;AAE3E,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,QAAQ,KAAK,IAAI,GAAG,OAAO,YAAY;AAC3C,QAAI,MAAM,KAAK,IAAI,OAAO,OAAO,YAAY;AAC7C,QAAI,OAAO,gBAAgB,KAAK,MAAM,OAAO;AAC3C,YAAM,KAAK,IAAI,OAAO,MAAM,KAAK,IAAI,OAAO,YAAY,IAAI,CAAC;AAAA,IAC/D,WAAW,OAAO,eAAe,SAAS,QAAQ,GAAG;AACnD,cAAQ,KAAK,IAAI,GAAG,SAAS,OAAO,eAAe,MAAM;AAAA,IAC3D;AAEA,WAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,QAAQ,EAAE,GAAG,CAAC,GAAG,MAAM,IAAI,KAAK;AAAA,EACpE,GAAG,CAAC,OAAO,MAAM,YAAY,CAAC;AAE9B,YAAU,MAAM;AACd,yCAAW;AAAA,EACb,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,YAAU,MAAM;AACd,QAAI,MAAM,MAAM;AACd,cAAQ,MAAM,IAAI;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,MAAM,IAAI,CAAC;AAEf,QAAM,OAAO,QAA4B,MAAM;AAC7C,UAAM,IAAI,OAAO;AACjB,WAAO,IAAI,IAAI,SAAY;AAAA,EAC7B,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,OAAO,QAA4B,MAAM;AAC7C,UAAM,IAAI,OAAO;AACjB,WAAO,IAAI,QAAQ,SAAY;AAAA,EACjC,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,QAAM,cAAc,YAAY,MAAM;AACpC,YAAQ,QAAQ,IAAI;AAAA,EACtB,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,cAAc,YAAY,MAAM;AACpC,YAAQ,QAAQ,IAAI;AAAA,EACtB,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,aAAa,QAA4B,MAAM;AACnD,QAAI,CAAC,aAAa;AAAQ;AAC1B,WAAO,KAAK,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC;AAAA,EACxC,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,oBAAoB,YAAY,MAAM;AAC1C,kBAAc,QAAQ,UAAU;AAAA,EAClC,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,aAAa,QAA4B,MAAM;AACnD,QAAI,CAAC,aAAa;AAAQ;AAC1B,UAAM,IAAI,aAAa,aAAa,SAAS,CAAC,IAAI;AAClD,QAAI,IAAI;AAAO;AACf,WAAO,KAAK,IAAI,OAAO,CAAC;AAAA,EAC1B,GAAG,CAAC,OAAO,YAAY,CAAC;AAExB,QAAM,oBAAoB,YAAY,MAAM;AAC1C,kBAAc,QAAQ,UAAU;AAAA,EAClC,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,WAAW;AAAA,IACf,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAEA,QAAM,kBAAmC;AAAA,IACvC,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO,EAAE,cAAc,MAAM;AAAA,EAC/B;AAEA,SACE,qBAAC,QAAK,OAAM,UAAS,WAAU,mBAAkB,KAAI,KACnD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,CAAC;AAAA,QACX,SAAS;AAAA,SACL,kBAHL;AAAA,QAKC,8BAAC,wCAAwB,SAAU;AAAA;AAAA,IACrC;AAAA,IACA,oBAAC,2CAAW,UAAU,CAAC,MAAM,SAAS,eAAiB,kBAAtD,EACC,8BAAC,oCAAoB,SAAU,IACjC;AAAA,IACA,oBAAC,QAAK,KAAI,KACP,uBAAa,IAAI,CAAC,SAAS;AAC1B,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,eAAe,SAAS,OAAO,WAAW,EAAE;AAAA,UAEvD,SAAS,MAAM;AACb,oBAAQ,IAAI;AAAA,UACd;AAAA,UACA,MAAK;AAAA,UAEL,8BAAC,QAAK,SAAQ,QAAQ,gBAAK;AAAA;AAAA,QANtB;AAAA,MAOP;AAAA,IAEJ,CAAC,GACH;AAAA,IACA,oBAAC,2CAAW,UAAU,CAAC,MAAM,SAAS,eAAiB,kBAAtD,EACC,8BAAC,qCAAqB,SAAU,IAClC;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,CAAC;AAAA,QACX,SAAS;AAAA,SACL,kBAHL;AAAA,QAKC,8BAAC,yCAAyB,SAAU;AAAA;AAAA,IACtC;AAAA,KACF;AAEJ;","names":[]}
@@ -0,0 +1,62 @@
1
+ import {
2
+ DatePicker
3
+ } from "./chunk-JVJCM2Q5.js";
4
+ import {
5
+ Box
6
+ } from "./chunk-4Y5BEXVN.js";
7
+ import {
8
+ Flex
9
+ } from "./chunk-25HMMI7R.js";
10
+ import {
11
+ Button
12
+ } from "./chunk-U7JPP7WJ.js";
13
+ import {
14
+ CalendarIcon
15
+ } from "./chunk-TGX7XRZN.js";
16
+ import {
17
+ __objRest,
18
+ __spreadProps,
19
+ __spreadValues
20
+ } from "./chunk-N552FDTV.js";
21
+
22
+ // src/molecules/date-picker/date-picker-button.tsx
23
+ import { useMemo } from "react";
24
+ import { format } from "date-fns";
25
+ import { clsx } from "clsx";
26
+ import { jsx, jsxs } from "react/jsx-runtime";
27
+ function DatePickerButton(props) {
28
+ const _a = props, { size, placeholder, format: formatProps, disabled } = _a, rest = __objRest(_a, ["size", "placeholder", "format", "disabled"]);
29
+ const buttonProps = useMemo(() => {
30
+ const variant = "outline";
31
+ const color = "gray";
32
+ return { size, color, variant, disabled };
33
+ }, [disabled, size]);
34
+ const selectFormat = useMemo(() => {
35
+ if (formatProps)
36
+ return formatProps;
37
+ return (date) => date ? format(date, "yyyy\uB144 MM\uC6D4 dd\uC77C") : placeholder;
38
+ }, [formatProps, placeholder]);
39
+ const className = useMemo(() => {
40
+ return clsx(
41
+ "date-picker-button",
42
+ (disabled || props.readOnly) && "disabled"
43
+ );
44
+ }, [disabled, props.readOnly]);
45
+ return /* @__PURE__ */ jsx(Box, { p: "0", width: "100%", children: /* @__PURE__ */ jsx(
46
+ DatePicker,
47
+ __spreadProps(__spreadValues({
48
+ customInput: /* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({ className, type: "button" }, buttonProps), { children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", justify: "between", width: "100%", children: [
49
+ rest.selected ? selectFormat(rest.selected) : placeholder,
50
+ /* @__PURE__ */ jsx(CalendarIcon, {})
51
+ ] }) })),
52
+ wrapperClassName: "full-width"
53
+ }, rest), {
54
+ disabled
55
+ })
56
+ ) });
57
+ }
58
+
59
+ export {
60
+ DatePickerButton
61
+ };
62
+ //# sourceMappingURL=chunk-AKFBMQXZ.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/molecules/date-picker/date-picker-button.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { format } from 'date-fns';\nimport { clsx } from 'clsx';\nimport type { ButtonProps } from '../../atoms';\nimport { Box, Button, Flex } from '../../atoms';\nimport { CalendarIcon } from '../../icon';\nimport type { DatePickerProps } from '.';\nimport { DatePicker } from '.';\n\nexport type DatePickerButtonProps = DatePickerProps & {\n placeholder?: React.ReactNode;\n format?: (date: Date) => string;\n size?: ButtonProps['size'];\n};\n\nexport function DatePickerButton(\n props: DatePickerButtonProps\n): React.ReactElement {\n const { size, placeholder, format: formatProps, disabled, ...rest } = props;\n\n const buttonProps = useMemo(() => {\n const variant: ButtonProps['variant'] = 'outline';\n const color: ButtonProps['color'] = 'gray';\n return { size, color, variant, disabled };\n }, [disabled, size]);\n\n const selectFormat = useMemo(() => {\n if (formatProps) return formatProps;\n return (date?: Date) =>\n date ? format(date, 'yyyy년 MM월 dd일') : placeholder;\n }, [formatProps, placeholder]);\n\n const className = useMemo(() => {\n return clsx(\n 'date-picker-button',\n (disabled || props.readOnly) && 'disabled'\n );\n }, [disabled, props.readOnly]);\n\n return (\n <Box p=\"0\" width=\"100%\">\n <DatePicker\n customInput={\n <Button className={className} type=\"button\" {...buttonProps}>\n <Flex align=\"center\" gap=\"3\" justify=\"between\" width=\"100%\">\n {rest.selected ? selectFormat(rest.selected) : placeholder}\n <CalendarIcon />\n </Flex>\n </Button>\n }\n wrapperClassName=\"full-width\"\n {...rest}\n disabled={disabled}\n />\n </Box>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,eAAe;AAC/B,SAAS,cAAc;AACvB,SAAS,YAAY;AA0CT,SAEE,KAFF;AA7BL,SAAS,iBACd,OACoB;AACpB,QAAsE,YAA9D,QAAM,aAAa,QAAQ,aAAa,SAlBlD,IAkBwE,IAAT,iBAAS,IAAT,CAArD,QAAM,eAAa,UAAqB;AAEhD,QAAM,cAAc,QAAQ,MAAM;AAChC,UAAM,UAAkC;AACxC,UAAM,QAA8B;AACpC,WAAO,EAAE,MAAM,OAAO,SAAS,SAAS;AAAA,EAC1C,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI;AAAa,aAAO;AACxB,WAAO,CAAC,SACN,OAAO,OAAO,MAAM,8BAAe,IAAI;AAAA,EAC3C,GAAG,CAAC,aAAa,WAAW,CAAC;AAE7B,QAAM,YAAY,QAAQ,MAAM;AAC9B,WAAO;AAAA,MACL;AAAA,OACC,YAAY,MAAM,aAAa;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,UAAU,MAAM,QAAQ,CAAC;AAE7B,SACE,oBAAC,OAAI,GAAE,KAAI,OAAM,QACf;AAAA,IAAC;AAAA;AAAA,MACC,aACE,oBAAC,uCAAO,WAAsB,MAAK,YAAa,cAA/C,EACC,+BAAC,QAAK,OAAM,UAAS,KAAI,KAAI,SAAQ,WAAU,OAAM,QAClD;AAAA,aAAK,WAAW,aAAa,KAAK,QAAQ,IAAI;AAAA,QAC/C,oBAAC,gBAAa;AAAA,SAChB,IACF;AAAA,MAEF,kBAAiB;AAAA,OACb,OAVL;AAAA,MAWC;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}