@exem-ui/react 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (264) hide show
  1. package/LICENSE +190 -0
  2. package/README.en.md +142 -0
  3. package/README.md +156 -18
  4. package/dist/index.d.mts +1166 -37
  5. package/dist/index.d.ts +1166 -37
  6. package/dist/index.js +3055 -130
  7. package/dist/index.js.map +1 -1
  8. package/dist/index.mjs +3016 -27
  9. package/dist/index.mjs.map +1 -1
  10. package/package.json +24 -143
  11. package/dist/Button-CMenVfb7.d.mts +0 -35
  12. package/dist/Button-CMenVfb7.d.ts +0 -35
  13. package/dist/Select-DMvWV_rF.d.mts +0 -94
  14. package/dist/Select-DMvWV_rF.d.ts +0 -94
  15. package/dist/avatar/index.d.mts +0 -37
  16. package/dist/avatar/index.d.ts +0 -37
  17. package/dist/avatar/index.js +0 -13
  18. package/dist/avatar/index.js.map +0 -1
  19. package/dist/avatar/index.mjs +0 -4
  20. package/dist/avatar/index.mjs.map +0 -1
  21. package/dist/badge/index.d.mts +0 -29
  22. package/dist/badge/index.d.ts +0 -29
  23. package/dist/badge/index.js +0 -12
  24. package/dist/badge/index.js.map +0 -1
  25. package/dist/badge/index.mjs +0 -3
  26. package/dist/badge/index.mjs.map +0 -1
  27. package/dist/breadcrumb/index.d.mts +0 -43
  28. package/dist/breadcrumb/index.d.ts +0 -43
  29. package/dist/breadcrumb/index.js +0 -13
  30. package/dist/breadcrumb/index.js.map +0 -1
  31. package/dist/breadcrumb/index.mjs +0 -4
  32. package/dist/breadcrumb/index.mjs.map +0 -1
  33. package/dist/button/index.d.mts +0 -9
  34. package/dist/button/index.d.ts +0 -9
  35. package/dist/button/index.js +0 -29
  36. package/dist/button/index.js.map +0 -1
  37. package/dist/button/index.mjs +0 -12
  38. package/dist/button/index.mjs.map +0 -1
  39. package/dist/checkbox/index.d.mts +0 -54
  40. package/dist/checkbox/index.d.ts +0 -54
  41. package/dist/checkbox/index.js +0 -13
  42. package/dist/checkbox/index.js.map +0 -1
  43. package/dist/checkbox/index.mjs +0 -4
  44. package/dist/checkbox/index.mjs.map +0 -1
  45. package/dist/chunk-34QIGWCT.mjs +0 -10
  46. package/dist/chunk-34QIGWCT.mjs.map +0 -1
  47. package/dist/chunk-3FPMWAQT.js +0 -30
  48. package/dist/chunk-3FPMWAQT.js.map +0 -1
  49. package/dist/chunk-3HMT3DQV.js +0 -104
  50. package/dist/chunk-3HMT3DQV.js.map +0 -1
  51. package/dist/chunk-4WAO7CUT.mjs +0 -95
  52. package/dist/chunk-4WAO7CUT.mjs.map +0 -1
  53. package/dist/chunk-5QX4TO4F.js +0 -61
  54. package/dist/chunk-5QX4TO4F.js.map +0 -1
  55. package/dist/chunk-5TEFN2CW.js +0 -97
  56. package/dist/chunk-5TEFN2CW.js.map +0 -1
  57. package/dist/chunk-5TES5PG6.js +0 -41
  58. package/dist/chunk-5TES5PG6.js.map +0 -1
  59. package/dist/chunk-5TVMECVF.js +0 -148
  60. package/dist/chunk-5TVMECVF.js.map +0 -1
  61. package/dist/chunk-5WGNZX7Z.mjs +0 -27
  62. package/dist/chunk-5WGNZX7Z.mjs.map +0 -1
  63. package/dist/chunk-AQ3OIM2T.js +0 -103
  64. package/dist/chunk-AQ3OIM2T.js.map +0 -1
  65. package/dist/chunk-AU5NTBK3.js +0 -361
  66. package/dist/chunk-AU5NTBK3.js.map +0 -1
  67. package/dist/chunk-DJHGCJR4.mjs +0 -224
  68. package/dist/chunk-DJHGCJR4.mjs.map +0 -1
  69. package/dist/chunk-DPUTW5KD.mjs +0 -74
  70. package/dist/chunk-DPUTW5KD.mjs.map +0 -1
  71. package/dist/chunk-E53FHDVN.mjs +0 -336
  72. package/dist/chunk-E53FHDVN.mjs.map +0 -1
  73. package/dist/chunk-ECRQD7UU.js +0 -82
  74. package/dist/chunk-ECRQD7UU.js.map +0 -1
  75. package/dist/chunk-FB4ESGOX.mjs +0 -59
  76. package/dist/chunk-FB4ESGOX.mjs.map +0 -1
  77. package/dist/chunk-FDX4IQK5.js +0 -76
  78. package/dist/chunk-FDX4IQK5.js.map +0 -1
  79. package/dist/chunk-FOMIUDRM.js +0 -96
  80. package/dist/chunk-FOMIUDRM.js.map +0 -1
  81. package/dist/chunk-FR5F3VTU.js +0 -139
  82. package/dist/chunk-FR5F3VTU.js.map +0 -1
  83. package/dist/chunk-GW53LH3I.mjs +0 -81
  84. package/dist/chunk-GW53LH3I.mjs.map +0 -1
  85. package/dist/chunk-GXMRIT5E.mjs +0 -94
  86. package/dist/chunk-GXMRIT5E.mjs.map +0 -1
  87. package/dist/chunk-IANSI7F7.mjs +0 -393
  88. package/dist/chunk-IANSI7F7.mjs.map +0 -1
  89. package/dist/chunk-IDM6MZHF.js +0 -415
  90. package/dist/chunk-IDM6MZHF.js.map +0 -1
  91. package/dist/chunk-J5ZYQ3TP.js +0 -104
  92. package/dist/chunk-J5ZYQ3TP.js.map +0 -1
  93. package/dist/chunk-KPAUBWZA.mjs +0 -39
  94. package/dist/chunk-KPAUBWZA.mjs.map +0 -1
  95. package/dist/chunk-L7P2NDST.mjs +0 -124
  96. package/dist/chunk-L7P2NDST.mjs.map +0 -1
  97. package/dist/chunk-M6OWN7QH.js +0 -118
  98. package/dist/chunk-M6OWN7QH.js.map +0 -1
  99. package/dist/chunk-MQVHREEI.js +0 -448
  100. package/dist/chunk-MQVHREEI.js.map +0 -1
  101. package/dist/chunk-MT47ECUN.js +0 -127
  102. package/dist/chunk-MT47ECUN.js.map +0 -1
  103. package/dist/chunk-N6U54JI4.mjs +0 -126
  104. package/dist/chunk-N6U54JI4.mjs.map +0 -1
  105. package/dist/chunk-NDG4LR3Q.js +0 -139
  106. package/dist/chunk-NDG4LR3Q.js.map +0 -1
  107. package/dist/chunk-PPD4BU4W.mjs +0 -80
  108. package/dist/chunk-PPD4BU4W.mjs.map +0 -1
  109. package/dist/chunk-PU5NO5EZ.js +0 -4
  110. package/dist/chunk-PU5NO5EZ.js.map +0 -1
  111. package/dist/chunk-Q442ZDTI.mjs +0 -117
  112. package/dist/chunk-Q442ZDTI.mjs.map +0 -1
  113. package/dist/chunk-QH23RO3C.mjs +0 -137
  114. package/dist/chunk-QH23RO3C.mjs.map +0 -1
  115. package/dist/chunk-REBHUF4L.js +0 -226
  116. package/dist/chunk-REBHUF4L.js.map +0 -1
  117. package/dist/chunk-RGB3QLQT.js +0 -275
  118. package/dist/chunk-RGB3QLQT.js.map +0 -1
  119. package/dist/chunk-T7U2QRLC.js +0 -94
  120. package/dist/chunk-T7U2QRLC.js.map +0 -1
  121. package/dist/chunk-TEHHJ3CS.mjs +0 -73
  122. package/dist/chunk-TEHHJ3CS.mjs.map +0 -1
  123. package/dist/chunk-TJY4MIBC.js +0 -117
  124. package/dist/chunk-TJY4MIBC.js.map +0 -1
  125. package/dist/chunk-VCMZQOQM.mjs +0 -102
  126. package/dist/chunk-VCMZQOQM.mjs.map +0 -1
  127. package/dist/chunk-VKN4H4WI.mjs +0 -3
  128. package/dist/chunk-VKN4H4WI.mjs.map +0 -1
  129. package/dist/chunk-VSB25XTY.js +0 -12
  130. package/dist/chunk-VSB25XTY.js.map +0 -1
  131. package/dist/chunk-VWTE74UT.mjs +0 -96
  132. package/dist/chunk-VWTE74UT.mjs.map +0 -1
  133. package/dist/chunk-WBTL7PBV.js +0 -105
  134. package/dist/chunk-WBTL7PBV.js.map +0 -1
  135. package/dist/chunk-WOK3EP3O.js +0 -83
  136. package/dist/chunk-WOK3EP3O.js.map +0 -1
  137. package/dist/chunk-WWT73GGM.mjs +0 -83
  138. package/dist/chunk-WWT73GGM.mjs.map +0 -1
  139. package/dist/chunk-XBDXTRK3.mjs +0 -102
  140. package/dist/chunk-XBDXTRK3.mjs.map +0 -1
  141. package/dist/chunk-YGBEKZWU.mjs +0 -81
  142. package/dist/chunk-YGBEKZWU.mjs.map +0 -1
  143. package/dist/chunk-YVFLRPFV.mjs +0 -72
  144. package/dist/chunk-YVFLRPFV.mjs.map +0 -1
  145. package/dist/chunk-ZMVBIQ2Z.mjs +0 -253
  146. package/dist/chunk-ZMVBIQ2Z.mjs.map +0 -1
  147. package/dist/chunk-ZWCMSHDP.mjs +0 -425
  148. package/dist/chunk-ZWCMSHDP.mjs.map +0 -1
  149. package/dist/flat/index.d.mts +0 -13
  150. package/dist/flat/index.d.ts +0 -13
  151. package/dist/flat/index.js +0 -31
  152. package/dist/flat/index.js.map +0 -1
  153. package/dist/flat/index.mjs +0 -10
  154. package/dist/flat/index.mjs.map +0 -1
  155. package/dist/flat/segment.d.mts +0 -39
  156. package/dist/flat/segment.d.ts +0 -39
  157. package/dist/flat/segment.js +0 -13
  158. package/dist/flat/segment.js.map +0 -1
  159. package/dist/flat/segment.mjs +0 -4
  160. package/dist/flat/segment.mjs.map +0 -1
  161. package/dist/flat/select.d.mts +0 -58
  162. package/dist/flat/select.d.ts +0 -58
  163. package/dist/flat/select.js +0 -14
  164. package/dist/flat/select.js.map +0 -1
  165. package/dist/flat/select.mjs +0 -5
  166. package/dist/flat/select.mjs.map +0 -1
  167. package/dist/flat/tooltip.d.mts +0 -98
  168. package/dist/flat/tooltip.d.ts +0 -98
  169. package/dist/flat/tooltip.js +0 -17
  170. package/dist/flat/tooltip.js.map +0 -1
  171. package/dist/flat/tooltip.mjs +0 -4
  172. package/dist/flat/tooltip.mjs.map +0 -1
  173. package/dist/index-CXip5Wb1.d.mts +0 -62
  174. package/dist/index-Drz3P-6Y.d.ts +0 -62
  175. package/dist/input/index.d.mts +0 -82
  176. package/dist/input/index.d.ts +0 -82
  177. package/dist/input/index.js +0 -22
  178. package/dist/input/index.js.map +0 -1
  179. package/dist/input/index.mjs +0 -5
  180. package/dist/input/index.mjs.map +0 -1
  181. package/dist/loading/index.d.mts +0 -54
  182. package/dist/loading/index.d.ts +0 -54
  183. package/dist/loading/index.js +0 -12
  184. package/dist/loading/index.js.map +0 -1
  185. package/dist/loading/index.mjs +0 -3
  186. package/dist/loading/index.mjs.map +0 -1
  187. package/dist/messageBox/index.d.mts +0 -33
  188. package/dist/messageBox/index.d.ts +0 -33
  189. package/dist/messageBox/index.js +0 -13
  190. package/dist/messageBox/index.js.map +0 -1
  191. package/dist/messageBox/index.mjs +0 -4
  192. package/dist/messageBox/index.mjs.map +0 -1
  193. package/dist/modal/index.d.mts +0 -97
  194. package/dist/modal/index.d.ts +0 -97
  195. package/dist/modal/index.js +0 -15
  196. package/dist/modal/index.js.map +0 -1
  197. package/dist/modal/index.mjs +0 -6
  198. package/dist/modal/index.mjs.map +0 -1
  199. package/dist/picker/index.d.mts +0 -12
  200. package/dist/picker/index.d.ts +0 -12
  201. package/dist/picker/index.js +0 -13
  202. package/dist/picker/index.js.map +0 -1
  203. package/dist/picker/index.mjs +0 -4
  204. package/dist/picker/index.mjs.map +0 -1
  205. package/dist/progress/index.d.mts +0 -36
  206. package/dist/progress/index.d.ts +0 -36
  207. package/dist/progress/index.js +0 -12
  208. package/dist/progress/index.js.map +0 -1
  209. package/dist/progress/index.mjs +0 -3
  210. package/dist/progress/index.mjs.map +0 -1
  211. package/dist/radio/index.d.mts +0 -39
  212. package/dist/radio/index.d.ts +0 -39
  213. package/dist/radio/index.js +0 -12
  214. package/dist/radio/index.js.map +0 -1
  215. package/dist/radio/index.mjs +0 -3
  216. package/dist/radio/index.mjs.map +0 -1
  217. package/dist/scrollArea/index.d.mts +0 -31
  218. package/dist/scrollArea/index.d.ts +0 -31
  219. package/dist/scrollArea/index.js +0 -16
  220. package/dist/scrollArea/index.js.map +0 -1
  221. package/dist/scrollArea/index.mjs +0 -3
  222. package/dist/scrollArea/index.mjs.map +0 -1
  223. package/dist/segment/index.d.mts +0 -46
  224. package/dist/segment/index.d.ts +0 -46
  225. package/dist/segment/index.js +0 -12
  226. package/dist/segment/index.js.map +0 -1
  227. package/dist/segment/index.mjs +0 -3
  228. package/dist/segment/index.mjs.map +0 -1
  229. package/dist/star/index.d.mts +0 -30
  230. package/dist/star/index.d.ts +0 -30
  231. package/dist/star/index.js +0 -12
  232. package/dist/star/index.js.map +0 -1
  233. package/dist/star/index.mjs +0 -3
  234. package/dist/star/index.mjs.map +0 -1
  235. package/dist/switch/index.d.mts +0 -32
  236. package/dist/switch/index.d.ts +0 -32
  237. package/dist/switch/index.js +0 -12
  238. package/dist/switch/index.js.map +0 -1
  239. package/dist/switch/index.mjs +0 -3
  240. package/dist/switch/index.mjs.map +0 -1
  241. package/dist/tabs/index.d.mts +0 -52
  242. package/dist/tabs/index.d.ts +0 -52
  243. package/dist/tabs/index.js +0 -12
  244. package/dist/tabs/index.js.map +0 -1
  245. package/dist/tabs/index.mjs +0 -3
  246. package/dist/tabs/index.mjs.map +0 -1
  247. package/dist/tag/index.d.mts +0 -68
  248. package/dist/tag/index.d.ts +0 -68
  249. package/dist/tag/index.js +0 -17
  250. package/dist/tag/index.js.map +0 -1
  251. package/dist/tag/index.mjs +0 -4
  252. package/dist/tag/index.mjs.map +0 -1
  253. package/dist/toast/index.d.mts +0 -175
  254. package/dist/toast/index.d.ts +0 -175
  255. package/dist/toast/index.js +0 -25
  256. package/dist/toast/index.js.map +0 -1
  257. package/dist/toast/index.mjs +0 -4
  258. package/dist/toast/index.mjs.map +0 -1
  259. package/dist/tooltip/index.d.mts +0 -26
  260. package/dist/tooltip/index.d.ts +0 -26
  261. package/dist/tooltip/index.js +0 -12
  262. package/dist/tooltip/index.js.map +0 -1
  263. package/dist/tooltip/index.mjs +0 -3
  264. package/dist/tooltip/index.mjs.map +0 -1
@@ -1,76 +0,0 @@
1
- 'use strict';
2
-
3
- var chunkMQVHREEI_js = require('./chunk-MQVHREEI.js');
4
- var react = require('react');
5
- var jsxRuntime = require('react/jsx-runtime');
6
-
7
- function FlatSelect({
8
- options,
9
- placeholder,
10
- onBlur,
11
- onFocus,
12
- onOpenChange,
13
- label,
14
- description,
15
- required,
16
- listClassName,
17
- leftIcon,
18
- ...props
19
- }) {
20
- const { className, ...selectProps } = props;
21
- const selectRef = react.useRef(null);
22
- const { handleBlur, handleFocus } = useFocusWithin(selectRef, {
23
- onBlur,
24
- onFocus
25
- });
26
- const handleOpenChange = (open) => {
27
- if (open) {
28
- handleFocus();
29
- }
30
- onOpenChange?.(open);
31
- };
32
- return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: selectRef, className, children: /* @__PURE__ */ jsxRuntime.jsxs(chunkMQVHREEI_js.Select, { ...selectProps, onOpenChange: handleOpenChange, children: [
33
- label && /* @__PURE__ */ jsxRuntime.jsx(chunkMQVHREEI_js.Select.Label, { required, children: label }),
34
- /* @__PURE__ */ jsxRuntime.jsx(chunkMQVHREEI_js.Select.Trigger, { onBlur: handleBlur, onFocus: handleFocus, leftIcon, children: /* @__PURE__ */ jsxRuntime.jsx(chunkMQVHREEI_js.Select.Value, { placeholder, className: "truncate" }) }),
35
- description && /* @__PURE__ */ jsxRuntime.jsx(chunkMQVHREEI_js.Select.Description, { children: description }),
36
- /* @__PURE__ */ jsxRuntime.jsxs(chunkMQVHREEI_js.Select.List, { className: listClassName, children: [
37
- options.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(chunkMQVHREEI_js.Select.Empty, { children: placeholder }),
38
- options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
39
- chunkMQVHREEI_js.Select.Item,
40
- {
41
- value: option.value,
42
- disabled: option.disabled,
43
- className: "flex max-w-full items-center justify-between",
44
- children: [
45
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "block flex-1 truncate", children: option.label }),
46
- option.rightSlot
47
- ]
48
- },
49
- option.value
50
- ))
51
- ] })
52
- ] }) });
53
- }
54
- function useFocusWithin(containerRef, callbacks) {
55
- const [isFocused, setIsFocused] = react.useState(false);
56
- const handleBlur = (event) => {
57
- if (containerRef.current?.contains(event.relatedTarget)) {
58
- return;
59
- }
60
- setIsFocused(false);
61
- callbacks?.onBlur?.();
62
- };
63
- const handleFocus = () => {
64
- if (isFocused) {
65
- return;
66
- }
67
- setIsFocused(true);
68
- callbacks?.onFocus?.();
69
- };
70
- return { handleBlur, handleFocus, isFocused };
71
- }
72
- FlatSelect.displayName = "FlatSelect";
73
-
74
- exports.FlatSelect = FlatSelect;
75
- //# sourceMappingURL=chunk-FDX4IQK5.js.map
76
- //# sourceMappingURL=chunk-FDX4IQK5.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/flat/FlatSelect.tsx"],"names":["useRef","jsx","Select","jsxs","useState"],"mappings":";;;;;;AAqDA,SAAS,UAAA,CAAW;AAAA,EAClB,OAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAoB;AAClB,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,WAAA,EAAY,GAAI,KAAA;AACtC,EAAA,MAAM,SAAA,GAAYA,aAAuB,IAAI,CAAA;AAC7C,EAAA,MAAM,EAAE,UAAA,EAAY,WAAA,EAAY,GAAI,eAAe,SAAA,EAAW;AAAA,IAC5D,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,gBAAA,GAAmB,CAAC,IAAA,KAAkB;AAC1C,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,WAAA,EAAY;AAAA,IACd;AACA,IAAA,YAAA,GAAe,IAAI,CAAA;AAAA,EACrB,CAAA;AAEA,EAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAK,SAAA,EAAW,SAAA,EACnB,0CAACC,uBAAA,EAAA,EAAQ,GAAG,WAAA,EAAa,YAAA,EAAc,gBAAA,EACpC,QAAA,EAAA;AAAA,IAAA,KAAA,oBAASD,cAAA,CAACC,uBAAA,CAAO,KAAA,EAAP,EAAa,UAAqB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,mCAClDA,uBAAA,CAAO,OAAA,EAAP,EAAe,MAAA,EAAQ,YAAY,OAAA,EAAS,WAAA,EAAa,QAAA,EACxD,QAAA,kBAAAD,cAAA,CAACC,wBAAO,KAAA,EAAP,EAAa,WAAA,EAA0B,SAAA,EAAU,YAAW,CAAA,EAC/D,CAAA;AAAA,IACC,WAAA,oBAAeD,cAAA,CAACC,uBAAA,CAAO,WAAA,EAAP,EAAoB,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,oBACjDC,eAAA,CAACD,uBAAA,CAAO,IAAA,EAAP,EAAY,WAAW,aAAA,EACrB,QAAA,EAAA;AAAA,MAAA,OAAA,CAAQ,WAAW,CAAA,oBAAKD,cAAA,CAACC,uBAAA,CAAO,KAAA,EAAP,EAAc,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,MACnD,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,qBACZC,eAAA;AAAA,QAACD,uBAAA,CAAO,IAAA;AAAA,QAAP;AAAA,UAEC,OAAO,MAAA,CAAO,KAAA;AAAA,UACd,UAAU,MAAA,CAAO,QAAA;AAAA,UACjB,SAAA,EAAU,8CAAA;AAAA,UAEV,QAAA,EAAA;AAAA,4BAAAD,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBAAA,EAAyB,QAAA,EAAA,MAAA,CAAO,KAAA,EAAM,CAAA;AAAA,YACpD,MAAA,CAAO;AAAA;AAAA,SAAA;AAAA,QANH,MAAA,CAAO;AAAA,OAQf;AAAA,KAAA,EACH;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ;AAEA,SAAS,cAAA,CACP,cACA,SAAA,EACA;AACA,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIG,eAAS,KAAK,CAAA;AAEhD,EAAA,MAAM,UAAA,GAAa,CAAC,KAAA,KAA4B;AAC9C,IAAA,IAAI,YAAA,CAAa,OAAA,EAAS,QAAA,CAAS,KAAA,CAAM,aAAqB,CAAA,EAAG;AAC/D,MAAA;AAAA,IACF;AACA,IAAA,YAAA,CAAa,KAAK,CAAA;AAClB,IAAA,SAAA,EAAW,MAAA,IAAS;AAAA,EACtB,CAAA;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,IAAI,SAAA,EAAW;AACb,MAAA;AAAA,IACF;AACA,IAAA,YAAA,CAAa,IAAI,CAAA;AACjB,IAAA,SAAA,EAAW,OAAA,IAAU;AAAA,EACvB,CAAA;AAEA,EAAA,OAAO,EAAE,UAAA,EAAY,WAAA,EAAa,SAAA,EAAU;AAC9C;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA","file":"chunk-FDX4IQK5.js","sourcesContent":["import type { ComponentProps, RefObject } from 'react';\nimport { useRef, useState } from 'react';\nimport { Select } from '../input/Select';\n\ntype FlatSelectOption = {\n value: string;\n label: string | React.ReactNode;\n /** 아이템 오른쪽에 표시할 슬롯 요소 */\n rightSlot?: React.ReactNode;\n disabled?: boolean;\n};\n\ninterface FlatSelectProps extends React.ComponentProps<typeof Select> {\n /** 선택 가능한 옵션 배열 */\n options: FlatSelectOption[];\n /** 값이 선택되지 않았을 때 표시할 텍스트 */\n placeholder?: string;\n /** 드롭다운 열림/닫힘 상태 변경 핸들러 */\n onOpenChange?: (open: boolean) => void;\n /** 포커스 획득 핸들러 */\n onFocus?: () => void;\n /** 포커스 해제 핸들러 */\n onBlur?: () => void;\n /** 트리거 왼쪽에 표시할 아이콘 */\n leftIcon?: ComponentProps<typeof Select.Trigger>['leftIcon'];\n /** 라벨 텍스트 */\n label?: ComponentProps<typeof Select.Label>['children'];\n /** 필수 입력 여부 */\n required?: ComponentProps<typeof Select.Label>['required'];\n /** 설명 텍스트 */\n description?: ComponentProps<typeof Select.Description>['children'];\n /** 드롭다운 리스트 className */\n listClassName?: string;\n}\n\n/**\n * Select 컴포넌트의 간소화된 Flat API입니다.\n * options 배열만 전달하면 Compound Component 없이 간편하게 사용할 수 있습니다.\n *\n * @example\n * ```tsx\n * <FlatSelect\n * options={[\n * { value: '1', label: '옵션 1' },\n * { value: '2', label: '옵션 2' },\n * ]}\n * placeholder=\"선택하세요\"\n * label=\"항목\"\n * />\n * ```\n *\n * @see {@link FlatSelectProps} props 상세\n */\nfunction FlatSelect({\n options,\n placeholder,\n onBlur,\n onFocus,\n onOpenChange,\n label,\n description,\n required,\n listClassName,\n leftIcon,\n ...props\n}: FlatSelectProps) {\n const { className, ...selectProps } = props;\n const selectRef = useRef<HTMLDivElement>(null);\n const { handleBlur, handleFocus } = useFocusWithin(selectRef, {\n onBlur,\n onFocus,\n });\n\n const handleOpenChange = (open: boolean) => {\n if (open) {\n handleFocus();\n }\n onOpenChange?.(open);\n };\n\n return (\n <div ref={selectRef} className={className}>\n <Select {...selectProps} onOpenChange={handleOpenChange}>\n {label && <Select.Label required={required}>{label}</Select.Label>}\n <Select.Trigger onBlur={handleBlur} onFocus={handleFocus} leftIcon={leftIcon}>\n <Select.Value placeholder={placeholder} className=\"truncate\" />\n </Select.Trigger>\n {description && <Select.Description>{description}</Select.Description>}\n <Select.List className={listClassName}>\n {options.length === 0 && <Select.Empty>{placeholder}</Select.Empty>}\n {options.map((option) => (\n <Select.Item\n key={option.value}\n value={option.value}\n disabled={option.disabled}\n className=\"flex max-w-full items-center justify-between\"\n >\n <div className=\"block flex-1 truncate\">{option.label}</div>\n {option.rightSlot}\n </Select.Item>\n ))}\n </Select.List>\n </Select>\n </div>\n );\n}\n\nfunction useFocusWithin(\n containerRef: RefObject<HTMLElement | null>,\n callbacks?: { onFocus?: () => void; onBlur?: () => void },\n) {\n const [isFocused, setIsFocused] = useState(false);\n\n const handleBlur = (event: React.FocusEvent) => {\n if (containerRef.current?.contains(event.relatedTarget as Node)) {\n return;\n }\n setIsFocused(false);\n callbacks?.onBlur?.();\n };\n\n const handleFocus = () => {\n if (isFocused) {\n return;\n }\n setIsFocused(true);\n callbacks?.onFocus?.();\n };\n\n return { handleBlur, handleFocus, isFocused };\n}\n\nFlatSelect.displayName = 'FlatSelect';\n\nexport { FlatSelect };\nexport type { FlatSelectProps, FlatSelectOption };\n"]}
@@ -1,96 +0,0 @@
1
- 'use strict';
2
-
3
- var utils = require('@exem-ui/core/utils');
4
- var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
5
- var jsxRuntime = require('react/jsx-runtime');
6
-
7
- function _interopNamespace(e) {
8
- if (e && e.__esModule) return e;
9
- var n = Object.create(null);
10
- if (e) {
11
- Object.keys(e).forEach(function (k) {
12
- if (k !== 'default') {
13
- var d = Object.getOwnPropertyDescriptor(e, k);
14
- Object.defineProperty(n, k, d.get ? d : {
15
- enumerable: true,
16
- get: function () { return e[k]; }
17
- });
18
- }
19
- });
20
- }
21
- n.default = e;
22
- return Object.freeze(n);
23
- }
24
-
25
- var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
26
-
27
- // src/scrollArea/ScrollArea.tsx
28
- function ScrollBar({
29
- className,
30
- orientation = "vertical",
31
- ...props
32
- }) {
33
- return /* @__PURE__ */ jsxRuntime.jsx(
34
- ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
35
- {
36
- "data-slot": "scroll-area-scrollbar",
37
- orientation,
38
- className: utils.cn(
39
- "flex touch-none select-none transition-opacity",
40
- orientation === "vertical" && "w-[10px] p-[2px] opacity-0 duration-300 ease-out group-hover:opacity-100",
41
- orientation === "horizontal" && "h-[10px] flex-col px-[3px] py-[2px]",
42
- className
43
- ),
44
- ...props,
45
- children: /* @__PURE__ */ jsxRuntime.jsx(
46
- ScrollAreaPrimitive__namespace.ScrollAreaThumb,
47
- {
48
- "data-slot": "scroll-area-thumb",
49
- className: "relative flex-1 rounded-full bg-component-scroll"
50
- }
51
- )
52
- }
53
- );
54
- }
55
- function ScrollArea({
56
- className,
57
- children,
58
- onScroll,
59
- scrollRef,
60
- hideVerticalScrollbar = false,
61
- hideHorizontalScrollbar = false,
62
- disableHorizontalScroll = false,
63
- ...props
64
- }) {
65
- return /* @__PURE__ */ jsxRuntime.jsxs(
66
- ScrollAreaPrimitive__namespace.Root,
67
- {
68
- "data-slot": "scroll-area",
69
- className: utils.cn("group relative overflow-hidden", className),
70
- ...props,
71
- children: [
72
- /* @__PURE__ */ jsxRuntime.jsx(
73
- ScrollAreaPrimitive__namespace.Viewport,
74
- {
75
- "data-slot": "scroll-area-viewport",
76
- ref: scrollRef,
77
- onScroll,
78
- className: utils.cn(
79
- "size-full rounded-[inherit]",
80
- disableHorizontalScroll && "!overflow-x-hidden"
81
- ),
82
- children
83
- }
84
- ),
85
- !hideVerticalScrollbar && /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, { orientation: "vertical", forceMount: true }),
86
- !(hideHorizontalScrollbar || disableHorizontalScroll) && /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, { orientation: "horizontal", forceMount: true }),
87
- /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.Corner, {})
88
- ]
89
- }
90
- );
91
- }
92
-
93
- exports.ScrollArea = ScrollArea;
94
- exports.ScrollBar = ScrollBar;
95
- //# sourceMappingURL=chunk-FOMIUDRM.js.map
96
- //# sourceMappingURL=chunk-FOMIUDRM.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/scrollArea/ScrollArea.tsx"],"names":["jsx","ScrollAreaPrimitive","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,SAAS,SAAA,CAAU;AAAA,EACjB,SAAA;AAAA,EACA,WAAA,GAAc,UAAA;AAAA,EACd,GAAG;AACL,CAAA,EAAyE;AACvE,EAAA,uBACEA,cAAA;AAAA,IAAqBC,8BAAA,CAAA,mBAAA;AAAA,IAApB;AAAA,MACC,WAAA,EAAU,uBAAA;AAAA,MACV,WAAA;AAAA,MACA,SAAA,EAAWC,QAAA;AAAA,QACT,gDAAA;AAAA,QACA,gBAAgB,UAAA,IACd,0EAAA;AAAA,QACF,gBAAgB,YAAA,IAAgB,qCAAA;AAAA,QAChC;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAAF,cAAA;AAAA,QAAqBC,8BAAA,CAAA,eAAA;AAAA,QAApB;AAAA,UACC,WAAA,EAAU,mBAAA;AAAA,UACV,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA,GACF;AAEJ;AAeA,SAAS,UAAA,CAAW;AAAA,EAClB,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,qBAAA,GAAwB,KAAA;AAAA,EACxB,uBAAA,GAA0B,KAAA;AAAA,EAC1B,uBAAA,GAA0B,KAAA;AAAA,EAC1B,GAAG;AACL,CAAA,EAAoB;AAClB,EAAA,uBACEE,eAAA;AAAA,IAAqBF,8BAAA,CAAA,IAAA;AAAA,IAApB;AAAA,MACC,WAAA,EAAU,aAAA;AAAA,MACV,SAAA,EAAWC,QAAA,CAAG,gCAAA,EAAkC,SAAS,CAAA;AAAA,MACxD,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAF,cAAA;AAAA,UAAqBC,8BAAA,CAAA,QAAA;AAAA,UAApB;AAAA,YACC,WAAA,EAAU,sBAAA;AAAA,YACV,GAAA,EAAK,SAAA;AAAA,YACL,QAAA;AAAA,YACA,SAAA,EAAWC,QAAA;AAAA,cACT,6BAAA;AAAA,cACA,uBAAA,IAA2B;AAAA,aAC7B;AAAA,YAEC;AAAA;AAAA,SACH;AAAA,QACC,CAAC,qBAAA,oBAAyBF,cAAA,CAAC,aAAU,WAAA,EAAY,UAAA,EAAW,YAAU,IAAA,EAAC,CAAA;AAAA,QACvE,EAAE,2BAA2B,uBAAA,CAAA,oBAC5BA,cAAA,CAAC,aAAU,WAAA,EAAY,YAAA,EAAa,YAAU,IAAA,EAAC,CAAA;AAAA,wBAEjDA,cAAA,CAAqBC,uCAApB,EAA2B;AAAA;AAAA;AAAA,GAC9B;AAEJ","file":"chunk-FOMIUDRM.js","sourcesContent":["import { cn } from '@exem-ui/core/utils';\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';\nimport type React from 'react';\n\ninterface ScrollAreaProps extends React.ComponentProps<typeof ScrollAreaPrimitive.Root> {\n /** 스크롤 뷰포트의 ref. 스크롤 위치 제어 시 사용합니다. */\n scrollRef?: React.ComponentProps<typeof ScrollAreaPrimitive.Viewport>['ref'];\n /** 세로 스크롤바 숨김 여부 */\n hideVerticalScrollbar?: boolean;\n /** 가로 스크롤바 숨김 여부 */\n hideHorizontalScrollbar?: boolean;\n /** 가로 스크롤 비활성화 (overflow-x: hidden) */\n disableHorizontalScroll?: boolean;\n}\n\nfunction ScrollBar({\n className,\n orientation = 'vertical',\n ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n return (\n <ScrollAreaPrimitive.ScrollAreaScrollbar\n data-slot=\"scroll-area-scrollbar\"\n orientation={orientation}\n className={cn(\n 'flex touch-none select-none transition-opacity',\n orientation === 'vertical' &&\n 'w-[10px] p-[2px] opacity-0 duration-300 ease-out group-hover:opacity-100',\n orientation === 'horizontal' && 'h-[10px] flex-col px-[3px] py-[2px]',\n className,\n )}\n {...props}\n >\n <ScrollAreaPrimitive.ScrollAreaThumb\n data-slot=\"scroll-area-thumb\"\n className=\"relative flex-1 rounded-full bg-component-scroll\"\n />\n </ScrollAreaPrimitive.ScrollAreaScrollbar>\n );\n}\n\n/**\n * 커스텀 스크롤바를 제공하는 스크롤 영역 컴포넌트입니다.\n * 마우스 호버 시 스크롤바가 나타나는 UX를 제공합니다.\n *\n * @example\n * ```tsx\n * <ScrollArea className=\"h-[300px]\">\n * <div>스크롤 가능한 콘텐츠</div>\n * </ScrollArea>\n * ```\n *\n * @see {@link ScrollAreaProps} props 상세\n */\nfunction ScrollArea({\n className,\n children,\n onScroll,\n scrollRef,\n hideVerticalScrollbar = false,\n hideHorizontalScrollbar = false,\n disableHorizontalScroll = false,\n ...props\n}: ScrollAreaProps) {\n return (\n <ScrollAreaPrimitive.Root\n data-slot=\"scroll-area\"\n className={cn('group relative overflow-hidden', className)}\n {...props}\n >\n <ScrollAreaPrimitive.Viewport\n data-slot=\"scroll-area-viewport\"\n ref={scrollRef}\n onScroll={onScroll}\n className={cn(\n 'size-full rounded-[inherit]',\n disableHorizontalScroll && '!overflow-x-hidden',\n )}\n >\n {children}\n </ScrollAreaPrimitive.Viewport>\n {!hideVerticalScrollbar && <ScrollBar orientation=\"vertical\" forceMount />}\n {!(hideHorizontalScrollbar || disableHorizontalScroll) && (\n <ScrollBar orientation=\"horizontal\" forceMount />\n )}\n <ScrollAreaPrimitive.Corner />\n </ScrollAreaPrimitive.Root>\n );\n}\n\nexport { ScrollArea, ScrollBar };\nexport type { ScrollAreaProps };\n"]}
@@ -1,139 +0,0 @@
1
- 'use strict';
2
-
3
- var chunk5M47B2XJ_js = require('./chunk-5M47B2XJ.js');
4
- var utils = require('@exem-ui/core/utils');
5
- var react = require('react');
6
- var reactDayPicker = require('react-day-picker');
7
- var jsxRuntime = require('react/jsx-runtime');
8
-
9
- function DatePickerChevron({ orientation }) {
10
- if (orientation === "left") {
11
- return /* @__PURE__ */ jsxRuntime.jsx(chunk5M47B2XJ_js.ChevronLeft, { type: "regular", className: "size-5" });
12
- }
13
- return /* @__PURE__ */ jsxRuntime.jsx(chunk5M47B2XJ_js.ChevronRight, { type: "regular", className: "size-5" });
14
- }
15
- function DatePickerDayButton({
16
- day,
17
- modifiers,
18
- children,
19
- className,
20
- ...buttonProps
21
- }) {
22
- return /* @__PURE__ */ jsxRuntime.jsxs("button", { className: utils.cn(className, "relative"), ...buttonProps, children: [
23
- children,
24
- modifiers.today && /* @__PURE__ */ jsxRuntime.jsx(
25
- "span",
26
- {
27
- className: utils.cn(
28
- "absolute bottom-[3px] left-1/2 size-1 -translate-x-1/2 rounded-full",
29
- modifiers.selected ? "bg-text-inverse" : "bg-icon-critical"
30
- )
31
- }
32
- )
33
- ] });
34
- }
35
- function DatePicker({ type = "single", showOutsideDays = true, ...rest }) {
36
- const dayPickerProps = { ...rest, mode: type };
37
- const defaultClassNames = reactDayPicker.getDefaultClassNames();
38
- const [month, setMonth] = react.useState(
39
- dayPickerProps.month ?? dayPickerProps.defaultMonth ?? /* @__PURE__ */ new Date()
40
- );
41
- const rangeSelected = type === "range" ? rest.selected : void 0;
42
- const isRangeComplete = rangeSelected?.from != null && rangeSelected?.to != null;
43
- const handleMonthChange = (newMonth) => {
44
- setMonth(newMonth);
45
- dayPickerProps.onMonthChange?.(newMonth);
46
- };
47
- const handleDayClick = (day, modifiers, e) => {
48
- if (modifiers.outside) {
49
- setMonth(new Date(day.getFullYear(), day.getMonth()));
50
- }
51
- dayPickerProps.onDayClick?.(day, modifiers, e);
52
- };
53
- return /* @__PURE__ */ jsxRuntime.jsx(
54
- reactDayPicker.DayPicker,
55
- {
56
- ...dayPickerProps,
57
- month,
58
- onMonthChange: handleMonthChange,
59
- onDayClick: handleDayClick,
60
- showOutsideDays,
61
- formatters: {
62
- formatCaption: (date) => {
63
- const year = date.getFullYear();
64
- const month2 = String(date.getMonth() + 1).padStart(2, "0");
65
- return `${year}\uB144 ${month2}\uC6D4`;
66
- },
67
- formatWeekdayName: (date) => date.toLocaleDateString("en-US", { weekday: "short" }),
68
- ...dayPickerProps.formatters
69
- },
70
- components: {
71
- Chevron: DatePickerChevron,
72
- DayButton: DatePickerDayButton,
73
- ...dayPickerProps.components
74
- },
75
- classNames: {
76
- root: utils.cn(
77
- defaultClassNames.root,
78
- "rounded-medium border border-border-primary bg-background-overlay p-4 shadow-medium"
79
- ),
80
- months: utils.cn(defaultClassNames.months, "relative"),
81
- month: utils.cn(defaultClassNames.month, "flex flex-col gap-2"),
82
- month_caption: utils.cn(defaultClassNames.month_caption, "flex h-7 items-center px-0.5"),
83
- caption_label: "text-body-2 font-semibold text-text-primary",
84
- nav: utils.cn(defaultClassNames.nav, "absolute right-0 top-0 flex h-7 items-center gap-2"),
85
- button_previous: utils.cn(
86
- defaultClassNames.button_previous,
87
- "flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2"
88
- ),
89
- button_next: utils.cn(
90
- defaultClassNames.button_next,
91
- "flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2"
92
- ),
93
- weekday: utils.cn(
94
- defaultClassNames.weekday,
95
- "size-8 text-body-3 font-regular text-text-tertiary"
96
- ),
97
- month_grid: utils.cn(
98
- defaultClassNames.month_grid,
99
- "border-separate border-spacing-x-0 border-spacing-y-1"
100
- ),
101
- week: utils.cn(defaultClassNames.week, "overflow-hidden rounded-medium"),
102
- day: utils.cn(defaultClassNames.day, "size-8 text-body-2 font-medium text-text-secondary"),
103
- day_button: utils.cn(
104
- defaultClassNames.day_button,
105
- "size-8 cursor-pointer rounded-full hover:border hover:border-border-focused"
106
- ),
107
- outside: "!text-text-disabled",
108
- selected: utils.cn(
109
- "[&>button]:bg-solid-primary-default",
110
- "[&>button]:text-text-inverse",
111
- "[&>button]:border-0",
112
- "[&>button]:hover:border-0"
113
- ),
114
- range_start: utils.cn(
115
- "rounded-none",
116
- isRangeComplete && "[background:linear-gradient(to_right,transparent_50%,var(--color-elevation-elevation-2)_50%)]"
117
- ),
118
- range_end: utils.cn(
119
- "rounded-none",
120
- isRangeComplete && "[background:linear-gradient(to_left,transparent_50%,var(--color-elevation-elevation-2)_50%)]"
121
- ),
122
- range_middle: utils.cn(
123
- "bg-elevation-elevation-2 rounded-none",
124
- "[&>button]:!bg-transparent",
125
- "[&>button]:!text-text-secondary"
126
- ),
127
- ...dayPickerProps.classNames
128
- },
129
- modifiersClassNames: {
130
- today: "rdp-calendar-today",
131
- ...dayPickerProps.modifiersClassNames
132
- }
133
- }
134
- );
135
- }
136
-
137
- exports.DatePicker = DatePicker;
138
- //# sourceMappingURL=chunk-FR5F3VTU.js.map
139
- //# sourceMappingURL=chunk-FR5F3VTU.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/picker/DatePicker.tsx"],"names":["jsx","ChevronLeft","ChevronRight","jsxs","cn","getDefaultClassNames","useState","DayPicker","month"],"mappings":"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","file":"chunk-FR5F3VTU.js","sourcesContent":["import { cn } from '@exem-ui/core/utils';\nimport { type ComponentProps, useState } from 'react';\nimport { type DayButtonProps, DayPicker, getDefaultClassNames } from 'react-day-picker';\n\nimport { ChevronLeft, ChevronRight } from '../icon';\n\ntype DistributiveOmit<T, K extends string> = T extends unknown ? Omit<T, K> : never;\n\ntype DatePickerProps = DistributiveOmit<ComponentProps<typeof DayPicker>, 'mode'> & {\n /** 날짜 선택 유형 */\n type?: 'single' | 'range';\n};\n\nfunction DatePickerChevron({ orientation }: { orientation?: string }) {\n if (orientation === 'left') {\n return <ChevronLeft type=\"regular\" className=\"size-5\" />;\n }\n return <ChevronRight type=\"regular\" className=\"size-5\" />;\n}\n\nfunction DatePickerDayButton({\n day,\n modifiers,\n children,\n className,\n ...buttonProps\n}: DayButtonProps) {\n return (\n <button className={cn(className, 'relative')} {...buttonProps}>\n {children}\n {modifiers.today && (\n <span\n className={cn(\n 'absolute bottom-[3px] left-1/2 size-1 -translate-x-1/2 rounded-full',\n modifiers.selected ? 'bg-text-inverse' : 'bg-icon-critical',\n )}\n />\n )}\n </button>\n );\n}\n\nfunction DatePicker({ type = 'single', showOutsideDays = true, ...rest }: DatePickerProps) {\n const dayPickerProps = { ...rest, mode: type } as ComponentProps<typeof DayPicker>;\n const defaultClassNames = getDefaultClassNames();\n const [month, setMonth] = useState(\n dayPickerProps.month ?? dayPickerProps.defaultMonth ?? new Date(),\n );\n\n const rangeSelected =\n type === 'range' ? (rest as { selected?: { from?: Date; to?: Date } }).selected : undefined;\n const isRangeComplete = rangeSelected?.from != null && rangeSelected?.to != null;\n\n const handleMonthChange = (newMonth: Date) => {\n setMonth(newMonth);\n dayPickerProps.onMonthChange?.(newMonth);\n };\n\n const handleDayClick: ComponentProps<typeof DayPicker>['onDayClick'] = (day, modifiers, e) => {\n if (modifiers.outside) {\n setMonth(new Date(day.getFullYear(), day.getMonth()));\n }\n dayPickerProps.onDayClick?.(day, modifiers, e);\n };\n\n return (\n <DayPicker\n {...dayPickerProps}\n month={month}\n onMonthChange={handleMonthChange}\n onDayClick={handleDayClick}\n showOutsideDays={showOutsideDays}\n formatters={{\n formatCaption: (date) => {\n const year = date.getFullYear();\n const month = String(date.getMonth() + 1).padStart(2, '0');\n return `${year}년 ${month}월`;\n },\n formatWeekdayName: (date) => date.toLocaleDateString('en-US', { weekday: 'short' }),\n ...dayPickerProps.formatters,\n }}\n components={{\n Chevron: DatePickerChevron,\n DayButton: DatePickerDayButton,\n ...dayPickerProps.components,\n }}\n classNames={{\n root: cn(\n defaultClassNames.root,\n 'rounded-medium border border-border-primary bg-background-overlay p-4 shadow-medium',\n ),\n months: cn(defaultClassNames.months, 'relative'),\n month: cn(defaultClassNames.month, 'flex flex-col gap-2'),\n month_caption: cn(defaultClassNames.month_caption, 'flex h-7 items-center px-0.5'),\n caption_label: 'text-body-2 font-semibold text-text-primary',\n nav: cn(defaultClassNames.nav, 'absolute right-0 top-0 flex h-7 items-center gap-2'),\n button_previous: cn(\n defaultClassNames.button_previous,\n 'flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2',\n ),\n button_next: cn(\n defaultClassNames.button_next,\n 'flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2',\n ),\n weekday: cn(\n defaultClassNames.weekday,\n 'size-8 text-body-3 font-regular text-text-tertiary',\n ),\n month_grid: cn(\n defaultClassNames.month_grid,\n 'border-separate border-spacing-x-0 border-spacing-y-1',\n ),\n week: cn(defaultClassNames.week, 'overflow-hidden rounded-medium'),\n day: cn(defaultClassNames.day, 'size-8 text-body-2 font-medium text-text-secondary'),\n day_button: cn(\n defaultClassNames.day_button,\n 'size-8 cursor-pointer rounded-full hover:border hover:border-border-focused',\n ),\n outside: '!text-text-disabled',\n selected: cn(\n '[&>button]:bg-solid-primary-default',\n '[&>button]:text-text-inverse',\n '[&>button]:border-0',\n '[&>button]:hover:border-0',\n ),\n range_start: cn(\n 'rounded-none',\n isRangeComplete &&\n '[background:linear-gradient(to_right,transparent_50%,var(--color-elevation-elevation-2)_50%)]',\n ),\n range_end: cn(\n 'rounded-none',\n isRangeComplete &&\n '[background:linear-gradient(to_left,transparent_50%,var(--color-elevation-elevation-2)_50%)]',\n ),\n range_middle: cn(\n 'bg-elevation-elevation-2 rounded-none',\n '[&>button]:!bg-transparent',\n '[&>button]:!text-text-secondary',\n ),\n ...dayPickerProps.classNames,\n }}\n modifiersClassNames={{\n today: 'rdp-calendar-today',\n ...dayPickerProps.modifiersClassNames,\n }}\n />\n );\n}\n\nexport { DatePicker };\nexport type { DatePickerProps };\n"]}
@@ -1,81 +0,0 @@
1
- import { Button } from './chunk-DJHGCJR4.mjs';
2
- import { cn } from '@exem-ui/core/utils';
3
- import * as DialogPrimitive from '@radix-ui/react-dialog';
4
- import { createContext, forwardRef, useContext } from 'react';
5
- import { jsx, jsxs } from 'react/jsx-runtime';
6
-
7
- var MessageBoxContext = createContext({ variant: "default" });
8
- var MessageBoxRoot = (props) => /* @__PURE__ */ jsx(DialogPrimitive.Root, { ...props });
9
- var MessageBox = MessageBoxRoot;
10
- MessageBox.Trigger = DialogPrimitive.Trigger;
11
- MessageBox.Content = forwardRef(({ className, children, variant = "default", ...props }, ref) => /* @__PURE__ */ jsx(MessageBoxContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
12
- /* @__PURE__ */ jsx(
13
- DialogPrimitive.Overlay,
14
- {
15
- className: cn(
16
- "fixed inset-0 z-50 bg-component-dim data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
17
- )
18
- }
19
- ),
20
- /* @__PURE__ */ jsx(
21
- DialogPrimitive.Content,
22
- {
23
- ref,
24
- className: cn(
25
- "fixed left-[50%] top-[50%] z-50 flex w-[400px] translate-x-[-50%] translate-y-[-50%] flex-col items-end gap-4 rounded-medium border border-border-primary bg-elevation-elevation-0 p-4 shadow-strong duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
26
- className
27
- ),
28
- ...props,
29
- children
30
- }
31
- )
32
- ] }) }));
33
- MessageBox.Title = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
34
- DialogPrimitive.Title,
35
- {
36
- ref,
37
- className: cn("w-full text-title-2 font-semibold text-text-primary", className),
38
- ...props
39
- }
40
- ));
41
- MessageBox.Description = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
42
- DialogPrimitive.Description,
43
- {
44
- ref,
45
- className: cn("w-full text-body-2 text-text-secondary", className),
46
- ...props
47
- }
48
- ));
49
- MessageBox.Actions = forwardRef(
50
- ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-row gap-2", className), ...props })
51
- );
52
- MessageBox.Cancel = forwardRef(
53
- ({ size = "medium", ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { ref, color: "assistive", variant: "contained", size, ...props }) })
54
- );
55
- MessageBox.Action = forwardRef(
56
- ({ size = "medium", ...props }, ref) => {
57
- const { variant } = useContext(MessageBoxContext);
58
- return /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(
59
- Button,
60
- {
61
- ref,
62
- color: variant === "critical" ? "critical" : "primary",
63
- variant: "contained",
64
- size,
65
- ...props
66
- }
67
- ) });
68
- }
69
- );
70
- MessageBox.displayName = "MessageBox";
71
- MessageBox.Trigger.displayName = "MessageBox.Trigger";
72
- MessageBox.Content.displayName = "MessageBox.Content";
73
- MessageBox.Title.displayName = "MessageBox.Title";
74
- MessageBox.Description.displayName = "MessageBox.Description";
75
- MessageBox.Actions.displayName = "MessageBox.Actions";
76
- MessageBox.Cancel.displayName = "MessageBox.Cancel";
77
- MessageBox.Action.displayName = "MessageBox.Action";
78
-
79
- export { MessageBox };
80
- //# sourceMappingURL=chunk-GW53LH3I.mjs.map
81
- //# sourceMappingURL=chunk-GW53LH3I.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/messageBox/MessageBox.tsx"],"names":[],"mappings":"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","file":"chunk-GW53LH3I.mjs","sourcesContent":["import { cn } from '@exem-ui/core/utils';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport type React from 'react';\nimport { createContext, forwardRef, useContext } from 'react';\nimport type { ButtonProps } from '../button/Button';\nimport { Button } from '../button/Button';\n\ntype MessageBoxVariant = 'default' | 'critical';\n\ntype MessageBoxRootProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;\n\ntype MessageBoxTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\n\ntype MessageBoxContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n /**\n * 메시지 박스 variant\n * @default 'default'\n */\n variant?: MessageBoxVariant;\n};\n\ntype MessageBoxTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;\n\ntype MessageBoxDescriptionProps = React.ComponentPropsWithoutRef<\n typeof DialogPrimitive.Description\n>;\n\ntype MessageBoxActionsProps = React.HTMLAttributes<HTMLDivElement>;\n\ntype MessageBoxCancelProps = Omit<ButtonProps, 'color' | 'variant'>;\n\ntype MessageBoxActionProps = Omit<ButtonProps, 'color' | 'variant'>;\n\ntype MessageBoxComponent = React.FC<MessageBoxRootProps> & {\n Trigger: typeof DialogPrimitive.Trigger;\n Content: React.ForwardRefExoticComponent<\n React.PropsWithoutRef<MessageBoxContentProps> &\n React.RefAttributes<React.ElementRef<typeof DialogPrimitive.Content>>\n >;\n Title: React.ForwardRefExoticComponent<\n React.PropsWithoutRef<MessageBoxTitleProps> &\n React.RefAttributes<React.ElementRef<typeof DialogPrimitive.Title>>\n >;\n Description: React.ForwardRefExoticComponent<\n React.PropsWithoutRef<MessageBoxDescriptionProps> &\n React.RefAttributes<React.ElementRef<typeof DialogPrimitive.Description>>\n >;\n Actions: React.ForwardRefExoticComponent<\n React.PropsWithoutRef<MessageBoxActionsProps> & React.RefAttributes<HTMLDivElement>\n >;\n Cancel: React.ForwardRefExoticComponent<\n React.PropsWithoutRef<MessageBoxCancelProps> & React.RefAttributes<HTMLButtonElement>\n >;\n Action: React.ForwardRefExoticComponent<\n React.PropsWithoutRef<MessageBoxActionProps> & React.RefAttributes<HTMLButtonElement>\n >;\n};\n\nconst MessageBoxContext = createContext<{ variant: MessageBoxVariant }>({ variant: 'default' });\n\n/**\n * 확인/경고 다이얼로그 컴포넌트입니다.\n * Modal보다 단순한 구조로, title + description + 버튼(취소/확인)으로 구성됩니다.\n *\n * @example\n * ```tsx\n * <MessageBox>\n * <MessageBox.Trigger>열기</MessageBox.Trigger>\n * <MessageBox.Content variant=\"default\">\n * <MessageBox.Title>상태를 확인하시겠습니까?</MessageBox.Title>\n * <MessageBox.Description>현재 상태에 대한 추가 확인이 필요합니다.</MessageBox.Description>\n * <MessageBox.Actions>\n * <MessageBox.Cancel>취소</MessageBox.Cancel>\n * <MessageBox.Action>확인</MessageBox.Action>\n * </MessageBox.Actions>\n * </MessageBox.Content>\n * </MessageBox>\n * ```\n */\nconst MessageBoxRoot: React.FC<MessageBoxRootProps> = (props) => (\n <DialogPrimitive.Root {...props} />\n);\n\nconst MessageBox = MessageBoxRoot as MessageBoxComponent;\n\nMessageBox.Trigger = DialogPrimitive.Trigger;\n\nMessageBox.Content = forwardRef<\n React.ComponentRef<typeof DialogPrimitive.Content>,\n MessageBoxContentProps\n>(({ className, children, variant = 'default', ...props }, ref) => (\n <MessageBoxContext.Provider value={{ variant }}>\n <DialogPrimitive.Portal>\n <DialogPrimitive.Overlay\n className={cn(\n 'fixed inset-0 z-50 bg-component-dim data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n )}\n />\n <DialogPrimitive.Content\n ref={ref}\n className={cn(\n 'fixed left-[50%] top-[50%] z-50 flex w-[400px] translate-x-[-50%] translate-y-[-50%] flex-col items-end gap-4 rounded-medium border border-border-primary bg-elevation-elevation-0 p-4 shadow-strong duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',\n className,\n )}\n {...props}\n >\n {children}\n </DialogPrimitive.Content>\n </DialogPrimitive.Portal>\n </MessageBoxContext.Provider>\n)) as MessageBoxComponent['Content'];\n\nMessageBox.Title = forwardRef<\n React.ComponentRef<typeof DialogPrimitive.Title>,\n MessageBoxTitleProps\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title\n ref={ref}\n className={cn('w-full text-title-2 font-semibold text-text-primary', className)}\n {...props}\n />\n)) as MessageBoxComponent['Title'];\n\nMessageBox.Description = forwardRef<\n React.ComponentRef<typeof DialogPrimitive.Description>,\n MessageBoxDescriptionProps\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Description\n ref={ref}\n className={cn('w-full text-body-2 text-text-secondary', className)}\n {...props}\n />\n)) as MessageBoxComponent['Description'];\n\nMessageBox.Actions = forwardRef<HTMLDivElement, MessageBoxActionsProps>(\n ({ className, ...props }, ref) => (\n <div ref={ref} className={cn('flex flex-row gap-2', className)} {...props} />\n ),\n) as MessageBoxComponent['Actions'];\n\nMessageBox.Cancel = forwardRef<HTMLButtonElement, MessageBoxCancelProps>(\n ({ size = 'medium', ...props }, ref) => (\n <DialogPrimitive.Close asChild>\n <Button ref={ref} color=\"assistive\" variant=\"contained\" size={size} {...props} />\n </DialogPrimitive.Close>\n ),\n) as MessageBoxComponent['Cancel'];\n\nMessageBox.Action = forwardRef<HTMLButtonElement, MessageBoxActionProps>(\n ({ size = 'medium', ...props }, ref) => {\n const { variant } = useContext(MessageBoxContext);\n\n return (\n <DialogPrimitive.Close asChild>\n <Button\n ref={ref}\n color={variant === 'critical' ? 'critical' : 'primary'}\n variant=\"contained\"\n size={size}\n {...props}\n />\n </DialogPrimitive.Close>\n );\n },\n) as MessageBoxComponent['Action'];\n\nMessageBox.displayName = 'MessageBox';\nMessageBox.Trigger.displayName = 'MessageBox.Trigger';\nMessageBox.Content.displayName = 'MessageBox.Content';\nMessageBox.Title.displayName = 'MessageBox.Title';\nMessageBox.Description.displayName = 'MessageBox.Description';\nMessageBox.Actions.displayName = 'MessageBox.Actions';\nMessageBox.Cancel.displayName = 'MessageBox.Cancel';\nMessageBox.Action.displayName = 'MessageBox.Action';\n\nexport { MessageBox };\nexport type {\n MessageBoxActionProps,\n MessageBoxActionsProps,\n MessageBoxCancelProps,\n MessageBoxComponent,\n MessageBoxContentProps,\n MessageBoxDescriptionProps,\n MessageBoxRootProps,\n MessageBoxTitleProps,\n MessageBoxTriggerProps,\n MessageBoxVariant,\n};\n"]}
@@ -1,94 +0,0 @@
1
- import { Button } from './chunk-DJHGCJR4.mjs';
2
- import { ConditionalTooltip } from './chunk-5WGNZX7Z.mjs';
3
- import { cn } from '@exem-ui/core/utils';
4
- import { forwardRef } from 'react';
5
- import { jsx } from 'react/jsx-runtime';
6
-
7
- var iconButtonSizeClasses = {
8
- xsmall: "size-6",
9
- small: "size-7",
10
- medium: "size-8",
11
- large: "size-10",
12
- xlarge: "size-12"
13
- };
14
- var IconButton = forwardRef(
15
- ({
16
- className,
17
- tooltip,
18
- variant = "contained",
19
- icon,
20
- size = "medium",
21
- color = "primary",
22
- ...props
23
- }, ref) => {
24
- const buttonProps = {
25
- className: cn(iconButtonSizeClasses[size], "px-0", className),
26
- color,
27
- icon,
28
- size,
29
- variant,
30
- ...props
31
- };
32
- return /* @__PURE__ */ jsx(ConditionalTooltip, { tooltip, children: /* @__PURE__ */ jsx(Button, { ref, ...buttonProps }) });
33
- }
34
- );
35
- IconButton.displayName = "IconButton";
36
- var ButtonGroup = forwardRef(
37
- ({
38
- variant = "contained",
39
- iconOnly = false,
40
- hasBackground = false,
41
- size = "medium",
42
- items,
43
- className
44
- }, ref) => {
45
- if (items.length === 0) {
46
- return null;
47
- }
48
- const isOutlined = variant === "outlined";
49
- return /* @__PURE__ */ jsx(
50
- "div",
51
- {
52
- ref,
53
- className: cn(
54
- "inline-flex items-center overflow-hidden rounded-medium",
55
- hasBackground && "bg-elevation-elevation-0",
56
- className
57
- ),
58
- role: "group",
59
- children: items.map((item, index) => {
60
- const isFirst = index === 0;
61
- const isLast = index === items.length - 1;
62
- const roundedClasses = cn("rounded-none", {
63
- "rounded-l-medium": isFirst,
64
- "rounded-r-medium": isLast
65
- });
66
- const dividerClasses = !isOutlined && !isLast ? "border-r border-border-primary" : "";
67
- const mergeClasses = isOutlined && !isFirst ? "-ml-px" : "";
68
- const hoverClasses = isOutlined ? "relative hover:z-10" : "";
69
- if (iconOnly) {
70
- const iconBaseProps = {
71
- className: cn(roundedClasses, dividerClasses, mergeClasses, hoverClasses),
72
- icon: item.icon,
73
- onClick: item.onClick,
74
- size
75
- };
76
- return /* @__PURE__ */ jsx(ConditionalTooltip, { tooltip: item.tooltip, children: variant === "contained" ? /* @__PURE__ */ jsx(IconButton, { ...iconBaseProps, color: "assistive", variant: "contained" }) : /* @__PURE__ */ jsx(IconButton, { ...iconBaseProps, color: "primary", variant: "outlined" }) }, item.id);
77
- }
78
- const buttonBaseProps = {
79
- className: cn(roundedClasses, dividerClasses, mergeClasses, hoverClasses),
80
- icon: item.icon,
81
- onClick: item.onClick,
82
- size
83
- };
84
- return /* @__PURE__ */ jsx(ConditionalTooltip, { tooltip: item.tooltip, children: variant === "contained" ? /* @__PURE__ */ jsx(Button, { ...buttonBaseProps, color: "assistive", variant: "contained", children: item.label }) : /* @__PURE__ */ jsx(Button, { ...buttonBaseProps, color: "primary", variant: "outlined", children: item.label }) }, item.id);
85
- })
86
- }
87
- );
88
- }
89
- );
90
- ButtonGroup.displayName = "ButtonGroup";
91
-
92
- export { ButtonGroup, IconButton };
93
- //# sourceMappingURL=chunk-GXMRIT5E.mjs.map
94
- //# sourceMappingURL=chunk-GXMRIT5E.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/button/IconButton.tsx","../src/button/ButtonGroup.tsx"],"names":["forwardRef","jsx","cn"],"mappings":";;;;;;AA6BA,IAAM,qBAAA,GAAwB;AAAA,EAC5B,MAAA,EAAQ,QAAA;AAAA,EACR,KAAA,EAAO,QAAA;AAAA,EACP,MAAA,EAAQ,QAAA;AAAA,EACR,KAAA,EAAO,SAAA;AAAA,EACP,MAAA,EAAQ;AACV,CAAA;AAEA,IAAM,UAAA,GAAa,UAAA;AAAA,EACjB,CACE;AAAA,IACE,SAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA,GAAU,WAAA;AAAA,IACV,IAAA;AAAA,IACA,IAAA,GAAO,QAAA;AAAA,IACP,KAAA,GAAQ,SAAA;AAAA,IACR,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,WAAA,GAAc;AAAA,MAClB,WAAW,EAAA,CAAG,qBAAA,CAAsB,IAAI,CAAA,EAAG,QAAQ,SAAS,CAAA;AAAA,MAC5D,KAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,GAAG;AAAA,KACL;AAEA,IAAA,uBACE,GAAA,CAAC,sBAAmB,OAAA,EAClB,QAAA,kBAAA,GAAA,CAAC,UAAO,GAAA,EAAW,GAAI,aAAqD,CAAA,EAC9E,CAAA;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;AC7BzB,IAAM,WAAA,GAAcA,UAAAA;AAAA,EAClB,CACE;AAAA,IACE,OAAA,GAAU,WAAA;AAAA,IACV,QAAA,GAAW,KAAA;AAAA,IACX,aAAA,GAAgB,KAAA;AAAA,IAChB,IAAA,GAAO,QAAA;AAAA,IACP,KAAA;AAAA,IACA;AAAA,KAEF,GAAA,KACG;AACH,IAAA,IAAI,KAAA,CAAM,WAAW,CAAA,EAAG;AACtB,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,MAAM,aAAa,OAAA,KAAY,UAAA;AAE/B,IAAA,uBACEC,GAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAWC,EAAAA;AAAA,UACT,yDAAA;AAAA,UACA,aAAA,IAAiB,0BAAA;AAAA,UACjB;AAAA,SACF;AAAA,QACA,IAAA,EAAK,OAAA;AAAA,QAEJ,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,KAAU;AAC1B,UAAA,MAAM,UAAU,KAAA,KAAU,CAAA;AAC1B,UAAA,MAAM,MAAA,GAAS,KAAA,KAAU,KAAA,CAAM,MAAA,GAAS,CAAA;AAExC,UAAA,MAAM,cAAA,GAAiBA,GAAG,cAAA,EAAgB;AAAA,YACxC,kBAAA,EAAoB,OAAA;AAAA,YACpB,kBAAA,EAAoB;AAAA,WACrB,CAAA;AAGD,UAAA,MAAM,cAAA,GAAiB,CAAC,UAAA,IAAc,CAAC,SAAS,gCAAA,GAAmC,EAAA;AACnF,UAAA,MAAM,YAAA,GAAe,UAAA,IAAc,CAAC,OAAA,GAAU,QAAA,GAAW,EAAA;AACzD,UAAA,MAAM,YAAA,GAAe,aAAa,qBAAA,GAAwB,EAAA;AAE1D,UAAA,IAAI,QAAA,EAAU;AACZ,YAAA,MAAM,aAAA,GAAgB;AAAA,cACpB,SAAA,EAAWA,EAAAA,CAAG,cAAA,EAAgB,cAAA,EAAgB,cAAc,YAAY,CAAA;AAAA,cACxE,MAAM,IAAA,CAAK,IAAA;AAAA,cACX,SAAS,IAAA,CAAK,OAAA;AAAA,cACd;AAAA,aACF;AAEA,YAAA,uBACED,GAAAA,CAAC,kBAAA,EAAA,EAAiC,OAAA,EAAS,IAAA,CAAK,OAAA,EAC7C,QAAA,EAAA,OAAA,KAAY,WAAA,mBACXA,GAAAA,CAAC,UAAA,EAAA,EAAY,GAAG,aAAA,EAAe,KAAA,EAAM,WAAA,EAAY,OAAA,EAAQ,WAAA,EAAY,CAAA,mBAErEA,GAAAA,CAAC,UAAA,EAAA,EAAY,GAAG,aAAA,EAAe,KAAA,EAAM,SAAA,EAAU,OAAA,EAAQ,UAAA,EAAW,CAAA,EAAA,EAJ7C,KAAK,EAM9B,CAAA;AAAA,UAEJ;AAEA,UAAA,MAAM,eAAA,GAAkB;AAAA,YACtB,SAAA,EAAWC,EAAAA,CAAG,cAAA,EAAgB,cAAA,EAAgB,cAAc,YAAY,CAAA;AAAA,YACxE,MAAM,IAAA,CAAK,IAAA;AAAA,YACX,SAAS,IAAA,CAAK,OAAA;AAAA,YACd;AAAA,WACF;AAEA,UAAA,uBACED,GAAAA,CAAC,kBAAA,EAAA,EAAiC,OAAA,EAAS,KAAK,OAAA,EAC7C,QAAA,EAAA,OAAA,KAAY,WAAA,mBACXA,GAAAA,CAAC,MAAA,EAAA,EAAQ,GAAG,eAAA,EAAiB,OAAM,WAAA,EAAY,OAAA,EAAQ,WAAA,EACpD,QAAA,EAAA,IAAA,CAAK,KAAA,EACR,CAAA,mBAEAA,GAAAA,CAAC,UAAQ,GAAG,eAAA,EAAiB,KAAA,EAAM,SAAA,EAAU,SAAQ,UAAA,EAClD,QAAA,EAAA,IAAA,CAAK,KAAA,EACR,CAAA,EAAA,EARqB,KAAK,EAU9B,CAAA;AAAA,QAEJ,CAAC;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-GXMRIT5E.mjs","sourcesContent":["import { cn } from '@exem-ui/core/utils';\nimport type React from 'react';\nimport type { ComponentProps } from 'react';\nimport { forwardRef } from 'react';\nimport { ConditionalTooltip } from '../flat';\nimport { Button } from './Button';\n\ntype IconButtonVariant = 'contained' | 'outlined' | 'invisible';\n\ntype IconButtonColorVariantCombination =\n | { color?: 'primary'; variant?: 'contained' | 'outlined' | 'invisible' }\n | { color?: 'accent'; variant?: 'contained' | 'outlined' | 'invisible' }\n | { color?: 'critical'; variant?: 'contained' | 'outlined' | 'invisible' }\n | { color?: 'assistive'; variant?: 'contained' }\n | { color?: 'inverse'; variant?: 'contained' };\n\ntype IconButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> &\n IconButtonColorVariantCombination & {\n icon: React.ReactElement<{ className?: string }>;\n variant?: IconButtonVariant;\n size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';\n /** 툴팁 설정 (문자열 또는 FlatTooltip 설정 객체) */\n tooltip?: ComponentProps<typeof ConditionalTooltip>['tooltip'];\n };\n\ntype IconButtonComponent = React.ForwardRefExoticComponent<\n IconButtonProps & React.RefAttributes<HTMLButtonElement>\n>;\n\nconst iconButtonSizeClasses = {\n xsmall: 'size-6',\n small: 'size-7',\n medium: 'size-8',\n large: 'size-10',\n xlarge: 'size-12',\n};\n\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n (\n {\n className,\n tooltip,\n variant = 'contained',\n icon,\n size = 'medium',\n color = 'primary',\n ...props\n },\n ref,\n ) => {\n const buttonProps = {\n className: cn(iconButtonSizeClasses[size], 'px-0', className),\n color,\n icon,\n size,\n variant,\n ...props,\n };\n\n return (\n <ConditionalTooltip tooltip={tooltip}>\n <Button ref={ref} {...(buttonProps as React.ComponentProps<typeof Button>)} />\n </ConditionalTooltip>\n );\n },\n) as IconButtonComponent;\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton };\nexport type { IconButtonComponent, IconButtonProps };\n","import { cn } from '@exem-ui/core/utils';\nimport type React from 'react';\nimport type { ComponentProps } from 'react';\nimport { forwardRef } from 'react';\nimport { ConditionalTooltip } from '../flat';\nimport { Button } from './Button';\nimport { IconButton } from './IconButton';\n\ntype ButtonGroupSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';\n\ninterface ButtonGroupItem {\n id: string;\n label?: string;\n icon?: React.ReactElement<{ className?: string }>;\n /** 툴팁 설정 (문자열 또는 FlatTooltip 설정 객체) */\n tooltip?: ComponentProps<typeof ConditionalTooltip>['tooltip'];\n onClick?: () => void;\n}\n\ninterface ButtonGroupProps {\n /** 버튼 그룹 스타일 변형 */\n variant?: 'contained' | 'outlined';\n /** 아이콘만 표시 */\n iconOnly?: boolean;\n /** 배경색 표시 여부 (뒷 레이어가 보이지 않아야 할 때) */\n hasBackground?: boolean;\n /** 버튼 크기 */\n size?: ButtonGroupSize;\n /** 버튼 항목 목록 */\n items: ButtonGroupItem[];\n /** 커스텀 className */\n className?: string;\n}\n\ntype ButtonGroupComponent = React.ForwardRefExoticComponent<\n ButtonGroupProps & React.RefAttributes<HTMLDivElement>\n>;\n\nconst ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(\n (\n {\n variant = 'contained',\n iconOnly = false,\n hasBackground = false,\n size = 'medium',\n items,\n className,\n },\n ref,\n ) => {\n if (items.length === 0) {\n return null;\n }\n\n const isOutlined = variant === 'outlined';\n\n return (\n <div\n ref={ref}\n className={cn(\n 'inline-flex items-center overflow-hidden rounded-medium',\n hasBackground && 'bg-elevation-elevation-0',\n className,\n )}\n role=\"group\"\n >\n {items.map((item, index) => {\n const isFirst = index === 0;\n const isLast = index === items.length - 1;\n\n const roundedClasses = cn('rounded-none', {\n 'rounded-l-medium': isFirst,\n 'rounded-r-medium': isLast,\n });\n\n // contained: 버튼 사이 divider, outlined: -ml-px로 border 병합\n const dividerClasses = !isOutlined && !isLast ? 'border-r border-border-primary' : '';\n const mergeClasses = isOutlined && !isFirst ? '-ml-px' : '';\n const hoverClasses = isOutlined ? 'relative hover:z-10' : '';\n\n if (iconOnly) {\n const iconBaseProps = {\n className: cn(roundedClasses, dividerClasses, mergeClasses, hoverClasses),\n icon: item.icon!,\n onClick: item.onClick,\n size,\n };\n\n return (\n <ConditionalTooltip key={item.id} tooltip={item.tooltip}>\n {variant === 'contained' ? (\n <IconButton {...iconBaseProps} color=\"assistive\" variant=\"contained\" />\n ) : (\n <IconButton {...iconBaseProps} color=\"primary\" variant=\"outlined\" />\n )}\n </ConditionalTooltip>\n );\n }\n\n const buttonBaseProps = {\n className: cn(roundedClasses, dividerClasses, mergeClasses, hoverClasses),\n icon: item.icon as React.ReactElement<{ className?: string }>,\n onClick: item.onClick,\n size,\n };\n\n return (\n <ConditionalTooltip key={item.id} tooltip={item.tooltip}>\n {variant === 'contained' ? (\n <Button {...buttonBaseProps} color=\"assistive\" variant=\"contained\">\n {item.label}\n </Button>\n ) : (\n <Button {...buttonBaseProps} color=\"primary\" variant=\"outlined\">\n {item.label}\n </Button>\n )}\n </ConditionalTooltip>\n );\n })}\n </div>\n );\n },\n) as ButtonGroupComponent;\n\nButtonGroup.displayName = 'ButtonGroup';\n\nexport { ButtonGroup };\nexport type { ButtonGroupComponent, ButtonGroupItem, ButtonGroupProps };\n"]}