@loword/loword-design-system 0.0.3 → 0.0.5

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 (239) hide show
  1. package/README.md +77 -3
  2. package/dist/components/LDEditor/LDEditor.js +6 -6
  3. package/dist/components/{FileUpload/FileUploadBase.d.ts → LDFileUpload/LDFileUploadBase.d.ts} +3 -3
  4. package/dist/components/LDFileUpload/LDFileUploadBase.d.ts.map +1 -0
  5. package/dist/components/{FileUpload/FileUploadBase.js → LDFileUpload/LDFileUploadBase.js} +7 -7
  6. package/dist/components/{LNB/LNBBase.d.ts → LDLNB/LDLNBBase.d.ts} +3 -3
  7. package/dist/components/LDLNB/LDLNBBase.d.ts.map +1 -0
  8. package/dist/components/{LNB/LNBBase.js → LDLNB/LDLNBBase.js} +3 -3
  9. package/dist/components/{Toast/Toast.d.ts → LDToast/LDToast.d.ts} +3 -3
  10. package/dist/components/LDToast/LDToast.d.ts.map +1 -0
  11. package/dist/components/{Toast/Toast.js → LDToast/LDToast.js} +2 -2
  12. package/dist/components/LDToast/LDToaster.d.ts +7 -0
  13. package/dist/components/LDToast/LDToaster.d.ts.map +1 -0
  14. package/dist/components/{Toast/Toaster.js → LDToast/LDToaster.js} +2 -2
  15. package/dist/index.d.ts +4 -4
  16. package/dist/index.d.ts.map +1 -1
  17. package/dist/index.js +7 -7
  18. package/package.json +2 -2
  19. package/dist/components/Avatar/Avatar.d.ts +0 -11
  20. package/dist/components/Avatar/Avatar.d.ts.map +0 -1
  21. package/dist/components/Avatar/Avatar.js +0 -24
  22. package/dist/components/Avatar/AvatarBase.d.ts +0 -32
  23. package/dist/components/Avatar/AvatarBase.d.ts.map +0 -1
  24. package/dist/components/Avatar/AvatarBase.js +0 -49
  25. package/dist/components/Badge/Badge.d.ts +0 -25
  26. package/dist/components/Badge/Badge.d.ts.map +0 -1
  27. package/dist/components/Badge/Badge.js +0 -36
  28. package/dist/components/Badge/BadgeBase.d.ts +0 -10
  29. package/dist/components/Badge/BadgeBase.d.ts.map +0 -1
  30. package/dist/components/Badge/BadgeBase.js +0 -9
  31. package/dist/components/BreadCrumb/BreadCrumb.d.ts +0 -17
  32. package/dist/components/BreadCrumb/BreadCrumb.d.ts.map +0 -1
  33. package/dist/components/BreadCrumb/BreadCrumb.js +0 -37
  34. package/dist/components/BreadCrumb/BreadCrumbBase.d.ts +0 -9
  35. package/dist/components/BreadCrumb/BreadCrumbBase.d.ts.map +0 -1
  36. package/dist/components/BreadCrumb/BreadCrumbBase.js +0 -17
  37. package/dist/components/Button/Button.d.ts +0 -26
  38. package/dist/components/Button/Button.d.ts.map +0 -1
  39. package/dist/components/Button/Button.js +0 -102
  40. package/dist/components/Button/ButtonBase.d.ts +0 -5
  41. package/dist/components/Button/ButtonBase.d.ts.map +0 -1
  42. package/dist/components/Button/ButtonBase.js +0 -10
  43. package/dist/components/Button/ButtonSpinner.d.ts +0 -8
  44. package/dist/components/Button/ButtonSpinner.d.ts.map +0 -1
  45. package/dist/components/Button/ButtonSpinner.js +0 -15
  46. package/dist/components/Calendar/Calendar.d.ts +0 -16
  47. package/dist/components/Calendar/Calendar.d.ts.map +0 -1
  48. package/dist/components/Calendar/Calendar.js +0 -75
  49. package/dist/components/Callout/Callout.d.ts +0 -10
  50. package/dist/components/Callout/Callout.d.ts.map +0 -1
  51. package/dist/components/Callout/Callout.js +0 -6
  52. package/dist/components/Callout/CalloutBase.d.ts +0 -18
  53. package/dist/components/Callout/CalloutBase.d.ts.map +0 -1
  54. package/dist/components/Callout/CalloutBase.js +0 -21
  55. package/dist/components/Carousel/Carousel.d.ts +0 -50
  56. package/dist/components/Carousel/Carousel.d.ts.map +0 -1
  57. package/dist/components/Carousel/Carousel.js +0 -22
  58. package/dist/components/Carousel/CarouselBase.d.ts +0 -98
  59. package/dist/components/Carousel/CarouselBase.d.ts.map +0 -1
  60. package/dist/components/Carousel/CarouselBase.js +0 -144
  61. package/dist/components/Checkbox/Checkbox.d.ts +0 -27
  62. package/dist/components/Checkbox/Checkbox.d.ts.map +0 -1
  63. package/dist/components/Checkbox/Checkbox.js +0 -30
  64. package/dist/components/Checkbox/CheckboxBase.d.ts +0 -40
  65. package/dist/components/Checkbox/CheckboxBase.d.ts.map +0 -1
  66. package/dist/components/Checkbox/CheckboxBase.js +0 -57
  67. package/dist/components/Checkbox/CheckboxGroup.d.ts +0 -22
  68. package/dist/components/Checkbox/CheckboxGroup.d.ts.map +0 -1
  69. package/dist/components/Checkbox/CheckboxGroup.js +0 -13
  70. package/dist/components/Checkbox/FormCheckbox.d.ts +0 -14
  71. package/dist/components/Checkbox/FormCheckbox.d.ts.map +0 -1
  72. package/dist/components/Checkbox/FormCheckbox.js +0 -9
  73. package/dist/components/Checkbox/FormCheckboxGroup.d.ts +0 -13
  74. package/dist/components/Checkbox/FormCheckboxGroup.d.ts.map +0 -1
  75. package/dist/components/Checkbox/FormCheckboxGroup.js +0 -9
  76. package/dist/components/DataCalendar/DataCalendar.d.ts +0 -12
  77. package/dist/components/DataCalendar/DataCalendar.d.ts.map +0 -1
  78. package/dist/components/DataCalendar/DataCalendar.js +0 -13
  79. package/dist/components/DataCalendar/DataCalendarBase.d.ts +0 -45
  80. package/dist/components/DataCalendar/DataCalendarBase.d.ts.map +0 -1
  81. package/dist/components/DataCalendar/DataCalendarBase.js +0 -57
  82. package/dist/components/DatePicker/DatePicker.d.ts +0 -34
  83. package/dist/components/DatePicker/DatePicker.d.ts.map +0 -1
  84. package/dist/components/DatePicker/DatePicker.js +0 -44
  85. package/dist/components/DatePicker/FormDatePicker.d.ts +0 -12
  86. package/dist/components/DatePicker/FormDatePicker.d.ts.map +0 -1
  87. package/dist/components/DatePicker/FormDatePicker.js +0 -12
  88. package/dist/components/DateRangePicker/DateRangePicker.d.ts +0 -49
  89. package/dist/components/DateRangePicker/DateRangePicker.d.ts.map +0 -1
  90. package/dist/components/DateRangePicker/DateRangePicker.js +0 -197
  91. package/dist/components/DateRangePicker/FormDateRangePicker.d.ts +0 -12
  92. package/dist/components/DateRangePicker/FormDateRangePicker.d.ts.map +0 -1
  93. package/dist/components/DateRangePicker/FormDateRangePicker.js +0 -10
  94. package/dist/components/Divider/Divider.d.ts +0 -9
  95. package/dist/components/Divider/Divider.d.ts.map +0 -1
  96. package/dist/components/Divider/Divider.js +0 -11
  97. package/dist/components/Divider/DividerBase.d.ts +0 -9
  98. package/dist/components/Divider/DividerBase.d.ts.map +0 -1
  99. package/dist/components/Divider/DividerBase.js +0 -9
  100. package/dist/components/Drawer/Drawer.d.ts +0 -51
  101. package/dist/components/Drawer/Drawer.d.ts.map +0 -1
  102. package/dist/components/Drawer/Drawer.js +0 -30
  103. package/dist/components/Drawer/DrawerBase.d.ts +0 -52
  104. package/dist/components/Drawer/DrawerBase.d.ts.map +0 -1
  105. package/dist/components/Drawer/DrawerBase.js +0 -38
  106. package/dist/components/Editor/Editor.d.ts +0 -12
  107. package/dist/components/Editor/Editor.d.ts.map +0 -1
  108. package/dist/components/Editor/Editor.js +0 -162
  109. package/dist/components/Editor/EditorBase.d.ts +0 -52
  110. package/dist/components/Editor/EditorBase.d.ts.map +0 -1
  111. package/dist/components/Editor/EditorBase.js +0 -89
  112. package/dist/components/Editor/Viewer.d.ts +0 -7
  113. package/dist/components/Editor/Viewer.d.ts.map +0 -1
  114. package/dist/components/Editor/Viewer.js +0 -9
  115. package/dist/components/Editor/extensions.d.ts +0 -6
  116. package/dist/components/Editor/extensions.d.ts.map +0 -1
  117. package/dist/components/Editor/extensions.js +0 -38
  118. package/dist/components/FileUpload/FileUploadBase.d.ts.map +0 -1
  119. package/dist/components/Input/FormInput.d.ts +0 -15
  120. package/dist/components/Input/FormInput.d.ts.map +0 -1
  121. package/dist/components/Input/FormInput.js +0 -19
  122. package/dist/components/Input/Input.d.ts +0 -24
  123. package/dist/components/Input/Input.d.ts.map +0 -1
  124. package/dist/components/Input/Input.js +0 -71
  125. package/dist/components/Input/InputBase.d.ts +0 -22
  126. package/dist/components/Input/InputBase.d.ts.map +0 -1
  127. package/dist/components/Input/InputBase.js +0 -17
  128. package/dist/components/LNB/LNBBase.d.ts.map +0 -1
  129. package/dist/components/LoadingDots/LoadingDots.d.ts +0 -8
  130. package/dist/components/LoadingDots/LoadingDots.d.ts.map +0 -1
  131. package/dist/components/LoadingDots/LoadingDots.js +0 -29
  132. package/dist/components/MenuBar/MenuBar.d.ts +0 -21
  133. package/dist/components/MenuBar/MenuBar.d.ts.map +0 -1
  134. package/dist/components/MenuBar/MenuBar.js +0 -33
  135. package/dist/components/MenuBar/MenuBarBase.d.ts +0 -43
  136. package/dist/components/MenuBar/MenuBarBase.d.ts.map +0 -1
  137. package/dist/components/MenuBar/MenuBarBase.js +0 -69
  138. package/dist/components/Modal/Modal.d.ts +0 -51
  139. package/dist/components/Modal/Modal.d.ts.map +0 -1
  140. package/dist/components/Modal/Modal.js +0 -72
  141. package/dist/components/Modal/ModalBase.d.ts +0 -42
  142. package/dist/components/Modal/ModalBase.d.ts.map +0 -1
  143. package/dist/components/Modal/ModalBase.js +0 -30
  144. package/dist/components/Modal/openModal.d.ts +0 -24
  145. package/dist/components/Modal/openModal.d.ts.map +0 -1
  146. package/dist/components/Modal/openModal.js +0 -52
  147. package/dist/components/OTPInput/OTPInput.d.ts +0 -46
  148. package/dist/components/OTPInput/OTPInput.d.ts.map +0 -1
  149. package/dist/components/OTPInput/OTPInput.js +0 -87
  150. package/dist/components/Pagination/Pagination.d.ts +0 -12
  151. package/dist/components/Pagination/Pagination.d.ts.map +0 -1
  152. package/dist/components/Pagination/Pagination.js +0 -5
  153. package/dist/components/Pagination/PaginationBase.d.ts +0 -36
  154. package/dist/components/Pagination/PaginationBase.d.ts.map +0 -1
  155. package/dist/components/Pagination/PaginationBase.js +0 -44
  156. package/dist/components/Pagination/paginationUtils.d.ts +0 -2
  157. package/dist/components/Pagination/paginationUtils.d.ts.map +0 -1
  158. package/dist/components/Pagination/paginationUtils.js +0 -18
  159. package/dist/components/Popover/Popover.d.ts +0 -42
  160. package/dist/components/Popover/Popover.d.ts.map +0 -1
  161. package/dist/components/Popover/Popover.js +0 -31
  162. package/dist/components/Popover/PopoverBase.d.ts +0 -31
  163. package/dist/components/Popover/PopoverBase.d.ts.map +0 -1
  164. package/dist/components/Popover/PopoverBase.js +0 -18
  165. package/dist/components/Radio/FormRadioGroup.d.ts +0 -13
  166. package/dist/components/Radio/FormRadioGroup.d.ts.map +0 -1
  167. package/dist/components/Radio/FormRadioGroup.js +0 -9
  168. package/dist/components/Radio/Radio.d.ts +0 -24
  169. package/dist/components/Radio/Radio.d.ts.map +0 -1
  170. package/dist/components/Radio/Radio.js +0 -39
  171. package/dist/components/Radio/RadioBase.d.ts +0 -38
  172. package/dist/components/Radio/RadioBase.d.ts.map +0 -1
  173. package/dist/components/Radio/RadioBase.js +0 -46
  174. package/dist/components/Radio/RadioGroup.d.ts +0 -22
  175. package/dist/components/Radio/RadioGroup.d.ts.map +0 -1
  176. package/dist/components/Radio/RadioGroup.js +0 -7
  177. package/dist/components/ScrollArea/ScrollArea.d.ts +0 -15
  178. package/dist/components/ScrollArea/ScrollArea.d.ts.map +0 -1
  179. package/dist/components/ScrollArea/ScrollArea.js +0 -10
  180. package/dist/components/Select/FormMultiSelect.d.ts +0 -13
  181. package/dist/components/Select/FormMultiSelect.d.ts.map +0 -1
  182. package/dist/components/Select/FormMultiSelect.js +0 -14
  183. package/dist/components/Select/FormSelect.d.ts +0 -13
  184. package/dist/components/Select/FormSelect.d.ts.map +0 -1
  185. package/dist/components/Select/FormSelect.js +0 -10
  186. package/dist/components/Select/MultiSelect.d.ts +0 -31
  187. package/dist/components/Select/MultiSelect.d.ts.map +0 -1
  188. package/dist/components/Select/MultiSelect.js +0 -59
  189. package/dist/components/Select/Select.d.ts +0 -41
  190. package/dist/components/Select/Select.d.ts.map +0 -1
  191. package/dist/components/Select/Select.js +0 -55
  192. package/dist/components/Select/SelectBase.d.ts +0 -59
  193. package/dist/components/Select/SelectBase.d.ts.map +0 -1
  194. package/dist/components/Select/SelectBase.js +0 -211
  195. package/dist/components/Skeleton/Skeleton.d.ts +0 -10
  196. package/dist/components/Skeleton/Skeleton.d.ts.map +0 -1
  197. package/dist/components/Skeleton/Skeleton.js +0 -8
  198. package/dist/components/Slider/Slider.d.ts +0 -23
  199. package/dist/components/Slider/Slider.d.ts.map +0 -1
  200. package/dist/components/Slider/Slider.js +0 -195
  201. package/dist/components/Spinner/Spinner.d.ts +0 -25
  202. package/dist/components/Spinner/Spinner.d.ts.map +0 -1
  203. package/dist/components/Spinner/Spinner.js +0 -20
  204. package/dist/components/Table/Table.d.ts +0 -34
  205. package/dist/components/Table/Table.d.ts.map +0 -1
  206. package/dist/components/Table/Table.js +0 -29
  207. package/dist/components/Table/TableBase.d.ts +0 -37
  208. package/dist/components/Table/TableBase.d.ts.map +0 -1
  209. package/dist/components/Table/TableBase.js +0 -39
  210. package/dist/components/Table/TableField.d.ts +0 -64
  211. package/dist/components/Table/TableField.d.ts.map +0 -1
  212. package/dist/components/Table/TableField.js +0 -87
  213. package/dist/components/Table/TanstackTable.d.ts +0 -23
  214. package/dist/components/Table/TanstackTable.d.ts.map +0 -1
  215. package/dist/components/Table/TanstackTable.js +0 -35
  216. package/dist/components/TimePicker/FormTimePicker.d.ts +0 -12
  217. package/dist/components/TimePicker/FormTimePicker.d.ts.map +0 -1
  218. package/dist/components/TimePicker/FormTimePicker.js +0 -12
  219. package/dist/components/TimePicker/TimePicker.d.ts +0 -27
  220. package/dist/components/TimePicker/TimePicker.d.ts.map +0 -1
  221. package/dist/components/TimePicker/TimePicker.js +0 -120
  222. package/dist/components/Toast/Toast.d.ts.map +0 -1
  223. package/dist/components/Toast/Toaster.d.ts +0 -7
  224. package/dist/components/Toast/Toaster.d.ts.map +0 -1
  225. package/dist/components/ToggleButton/FormToggleButton.d.ts +0 -12
  226. package/dist/components/ToggleButton/FormToggleButton.d.ts.map +0 -1
  227. package/dist/components/ToggleButton/FormToggleButton.js +0 -9
  228. package/dist/components/ToggleButton/ToggleButton.d.ts +0 -31
  229. package/dist/components/ToggleButton/ToggleButton.d.ts.map +0 -1
  230. package/dist/components/ToggleButton/ToggleButton.js +0 -42
  231. package/dist/components/ToggleButton/ToggleButtonBase.d.ts +0 -41
  232. package/dist/components/ToggleButton/ToggleButtonBase.d.ts.map +0 -1
  233. package/dist/components/ToggleButton/ToggleButtonBase.js +0 -59
  234. package/dist/components/Tooltip/Tooltip.d.ts +0 -18
  235. package/dist/components/Tooltip/Tooltip.d.ts.map +0 -1
  236. package/dist/components/Tooltip/Tooltip.js +0 -13
  237. package/dist/components/Tooltip/TooltipBase.d.ts +0 -39
  238. package/dist/components/Tooltip/TooltipBase.d.ts.map +0 -1
  239. package/dist/components/Tooltip/TooltipBase.js +0 -46
@@ -1,71 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useState, } from 'react';
3
- import InputBase from './InputBase.js';
4
- import LucideIcon from '../Icon/LucideIcon.js';
5
- import cn from '../../utils/cn.js';
6
- // ── 스타일 매핑 ──
7
- const variantColorClasses = {
8
- filled: {
9
- neutral: 'bg-mono100 text-neutral900 outline-2 outline-transparent focus:bg-tintBlue focus:outline-lb500',
10
- point: 'bg-mono100 text-neutral900 outline-2 outline-transparent focus:bg-tintBlue focus:outline-lb500',
11
- danger: 'bg-tintRed text-neutral900 outline-2 outline-red500',
12
- },
13
- outline: {
14
- neutral: 'bg-transparent text-neutral900 border border-mono200 focus:border-lb500',
15
- point: 'bg-transparent text-neutral900 border border-mono200 focus:border-lb500',
16
- danger: 'bg-transparent text-neutral900 border border-danger100 focus:border-red500',
17
- },
18
- ghost: {
19
- neutral: 'bg-transparent text-neutral900 outline-2 outline-transparent hover:bg-mono50 focus:bg-mono100 focus:outline-lb500',
20
- point: 'bg-transparent text-neutral900 outline-2 outline-transparent hover:bg-mono50 focus:bg-mono100 focus:outline-lb500',
21
- danger: 'bg-transparent text-danger500 outline-2 outline-transparent hover:bg-tintRed focus:bg-tintRed focus:outline-red500',
22
- },
23
- };
24
- const disabledVariantClasses = {
25
- filled: 'bg-mono100 text-mono400',
26
- outline: 'bg-transparent text-mono400 border border-mono200',
27
- ghost: 'bg-transparent text-mono400',
28
- };
29
- const sizeClasses = {
30
- xSmall: 'input-2xs',
31
- small: 'input-xs',
32
- medium: 'input-sm',
33
- large: 'input-md',
34
- big: 'input-lg',
35
- xLarge: 'input-xl',
36
- };
37
- const addonRightPaddingClasses = {
38
- xSmall: 'pr-8',
39
- small: 'pr-8',
40
- medium: 'pr-8',
41
- large: 'pr-10',
42
- big: 'pr-11',
43
- xLarge: 'pr-12',
44
- };
45
- export const iconSizes = {
46
- xSmall: 10,
47
- small: 12,
48
- medium: 14,
49
- large: 16,
50
- big: 18,
51
- xLarge: 20,
52
- };
53
- const Input = ({ variant, color = 'neutral', size, showPasswordToggle = false, block = false, type = 'text', disabled = false, className, style, rightAddon, ref, ...props }) => {
54
- const [passwordVisible, setPasswordVisible] = useState(false);
55
- const resolvedType = showPasswordToggle
56
- ? passwordVisible
57
- ? 'text'
58
- : 'password'
59
- : type;
60
- const iconSize = iconSizes[size ?? 'medium'];
61
- const passwordToggleAddon = showPasswordToggle ? (_jsx("button", { type: "button", "aria-label": passwordVisible ? '비밀번호 숨기기' : '비밀번호 표시', "aria-pressed": passwordVisible, onClick: () => setPasswordVisible(!passwordVisible), disabled: disabled, className: cn('text-neutral40 ld-transition', disabled ? 'cursor-not-allowed' : 'cursor-pointer hover:text-lb500'), children: _jsx(LucideIcon, { name: passwordVisible ? 'eye' : 'eyeOff', size: iconSize }) })) : null;
62
- const resolvedRightAddon = rightAddon ?? passwordToggleAddon;
63
- const { width, height, minWidth, maxWidth, minHeight, maxHeight, ...fieldStyle } = style ?? {};
64
- const rootStyle = { width, height, minWidth, maxWidth, minHeight, maxHeight };
65
- const fieldClassName = cn('w-full bold placeholder-mono400 ld-transition outline-none', variant &&
66
- (disabled
67
- ? disabledVariantClasses[variant]
68
- : variantColorClasses[variant][color]), size && !height && sizeClasses[size], height && 'h-full', disabled && 'cursor-not-allowed', 'read-only:cursor-not-allowed', resolvedRightAddon && size && addonRightPaddingClasses[size], className);
69
- return (_jsxs(InputBase.Root, { block: block, style: rootStyle, children: [_jsx(InputBase.Field, { ref: ref, type: resolvedType, disabled: disabled, className: fieldClassName, style: fieldStyle, ...props }), resolvedRightAddon && (_jsx(InputBase.Addon, { position: "right", className: "right-2.5 text-neutral40", children: resolvedRightAddon }))] }));
70
- };
71
- export default Input;
@@ -1,22 +0,0 @@
1
- import { type InputHTMLAttributes, type ReactNode, type Ref } from 'react';
2
- interface RootProps {
3
- block?: boolean;
4
- className?: string;
5
- style?: React.CSSProperties;
6
- children?: ReactNode;
7
- }
8
- interface FieldProps extends InputHTMLAttributes<HTMLInputElement> {
9
- ref?: Ref<HTMLInputElement>;
10
- }
11
- interface AddonProps {
12
- position?: 'left' | 'right';
13
- className?: string;
14
- children?: ReactNode;
15
- }
16
- export declare const InputBase: {
17
- Root: ({ block, className, style, children }: RootProps) => import("react/jsx-runtime").JSX.Element;
18
- Field: ({ ref, ...props }: FieldProps) => import("react/jsx-runtime").JSX.Element;
19
- Addon: ({ position, className, children }: AddonProps) => import("react/jsx-runtime").JSX.Element;
20
- };
21
- export default InputBase;
22
- //# sourceMappingURL=InputBase.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"InputBase.d.ts","sourceRoot":"","sources":["../../../src/components/Input/InputBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAI3E,UAAU,SAAS;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAcD,UAAU,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IAChE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAOD,UAAU,UAAU;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAgBD,eAAO,MAAM,SAAS;kDAzCuC,SAAS;+BAgBpC,UAAU;+CAWgB,UAAU;CAkBrE,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -1,17 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import cn from '../../utils/cn.js';
3
- const Root = ({ block = false, className, style, children }) => {
4
- return (_jsx("div", { style: style, className: cn('relative flex group', block && 'w-full', className), children: children }));
5
- };
6
- const Field = ({ ref, ...props }) => {
7
- return _jsx("input", { ref: ref, ...props });
8
- };
9
- const Addon = ({ position = 'right', className, children }) => {
10
- return (_jsx("span", { className: cn('absolute top-1/2 -translate-y-1/2 flex items-center', position === 'left' ? 'left-0' : 'right-0', className), children: children }));
11
- };
12
- export const InputBase = {
13
- Root,
14
- Field,
15
- Addon,
16
- };
17
- export default InputBase;
@@ -1 +0,0 @@
1
- {"version":3,"file":"LNBBase.d.ts","sourceRoot":"","sources":["../../../src/components/LNB/LNBBase.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAapD,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA0BD,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAyDD,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2BD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0BD,UAAU,WAAW;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAqCD,UAAU,YAAY;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkBD,UAAU,UAAU;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAqCD,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA6BD,UAAU,aAAa;IACrB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAiCD,UAAU,YAAY;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD,UAAU,gBAAgB;IACxB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA2BD,QAAA,MAAM,OAAO;2EA/UV,aAAa;oCAsDuB,SAAS;6BA6BhB,YAAY;0DA+BiB,WAAW;uCAwC9B,YAAY;2CAsBR,UAAU;oDA0CG,SAAS;iFA6CjE,aAAa;uCA4B0B,YAAY;8EA0BnD,gBAAgB;CA6BlB,CAAC;AAEF,eAAe,OAAO,CAAC"}
@@ -1,8 +0,0 @@
1
- interface LoadingDotsProps {
2
- size?: LoadingDotsSize;
3
- className?: string;
4
- }
5
- type LoadingDotsSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
6
- declare const LoadingDots: ({ size, className }: LoadingDotsProps) => import("react/jsx-runtime").JSX.Element;
7
- export default LoadingDots;
8
- //# sourceMappingURL=LoadingDots.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LoadingDots.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingDots/LoadingDots.tsx"],"names":[],"mappings":"AAEA,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,KAAK,eAAe,GAChB,SAAS,GACT,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AAEb,QAAA,MAAM,WAAW,GAAI,qBAA+B,gBAAgB,4CA4CnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
@@ -1,29 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import cn from '../../utils/cn.js';
3
- const LoadingDots = ({ size = 'small', className }) => {
4
- const sizeMap = {
5
- '2xsmall': 2,
6
- xsmall: 2,
7
- small: 2,
8
- medium: 2,
9
- large: 3,
10
- xlarge: 4,
11
- };
12
- return (_jsxs("div", { className: cn('flex items-center justify-center gap-1', className), style: { height: sizeMap[size] }, children: [_jsx("div", { className: "bg-current rounded-full animate-pulse", style: {
13
- width: sizeMap[size],
14
- height: sizeMap[size],
15
- animationDelay: '0ms',
16
- animationDuration: '1000ms',
17
- } }), _jsx("div", { className: "bg-current rounded-full animate-pulse", style: {
18
- width: sizeMap[size],
19
- height: sizeMap[size],
20
- animationDelay: '200ms',
21
- animationDuration: '1000ms',
22
- } }), _jsx("div", { className: "bg-current rounded-full animate-pulse", style: {
23
- width: sizeMap[size],
24
- height: sizeMap[size],
25
- animationDelay: '400ms',
26
- animationDuration: '1000ms',
27
- } })] }));
28
- };
29
- export default LoadingDots;
@@ -1,21 +0,0 @@
1
- import type { ComponentProps } from 'react';
2
- import MenuBarBase from './MenuBarBase.js';
3
- declare const MenuBar: {
4
- Root: ({ className, ...props }: ComponentProps<typeof MenuBarBase.Root>) => import("react/jsx-runtime").JSX.Element;
5
- Logo: ({ className, ...props }: ComponentProps<typeof MenuBarBase.Logo>) => import("react/jsx-runtime").JSX.Element;
6
- Nav: ({ className, ...props }: ComponentProps<typeof MenuBarBase.Nav>) => import("react/jsx-runtime").JSX.Element;
7
- Item: ({ className, ...props }: ComponentProps<typeof MenuBarBase.Item>) => import("react/jsx-runtime").JSX.Element;
8
- Trigger: ({ className, ...props }: ComponentProps<typeof MenuBarBase.Trigger>) => import("react/jsx-runtime").JSX.Element;
9
- Content: {
10
- ({ className, ...props }: ComponentProps<typeof MenuBarBase.Content>): import("react/jsx-runtime").JSX.Element;
11
- displayName: string;
12
- };
13
- MegaContent: {
14
- ({ className, ...props }: ComponentProps<typeof MenuBarBase.Content>): import("react/jsx-runtime").JSX.Element;
15
- displayName: string;
16
- };
17
- Actions: ({ className, ...props }: ComponentProps<typeof MenuBarBase.Actions>) => import("react/jsx-runtime").JSX.Element;
18
- Separator: ({ className, }: ComponentProps<typeof MenuBarBase.Separator>) => import("react/jsx-runtime").JSX.Element;
19
- };
20
- export default MenuBar;
21
- //# sourceMappingURL=MenuBar.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MenuBar.d.ts","sourceRoot":"","sources":["../../../src/components/MenuBar/MenuBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,WAAW,MAAM,eAAe,CAAC;AAkHxC,QAAA,MAAM,OAAO;oCA1GV,cAAc,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC;oCAcvC,cAAc,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC;mCAUvC,cAAc,CAAC,OAAO,WAAW,CAAC,GAAG,CAAC;oCAUtC,cAAc,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC;uCAOvC,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC;;kCAgB1C,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC;;;;kCAgB1C,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC;;;uCAoB1C,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC;gCAS1C,cAAc,CAAC,OAAO,WAAW,CAAC,SAAS,CAAC;CAc9C,CAAC;AAEF,eAAe,OAAO,CAAC"}
@@ -1,33 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx } from "react/jsx-runtime";
3
- import cn from '../../utils/cn.js';
4
- import MenuBarBase from './MenuBarBase.js';
5
- // 스타일 래퍼: Base 골격에 디자인 토큰 클래스를 입혀 재노출.
6
- // className을 주면 cn으로 머지되어 소비측 오버라이드 우선.
7
- const Root = ({ className, ...props }) => (_jsx(MenuBarBase.Root, { className: cn('relative flex items-center justify-between w-full h-[64px] min-h-[64px]', 'px-md gap-10 bg-white border-b border-mono100 sticky top-0 z-50', className), ...props }));
8
- const Logo = ({ className, ...props }) => (_jsx(MenuBarBase.Logo, { className: cn('flex items-center shrink-0', className), ...props }));
9
- const Nav = ({ className, ...props }) => (_jsx(MenuBarBase.Nav, { className: cn('flex flex-1 items-center justify-start gap-xs', className), ...props }));
10
- const Item = ({ className, ...props }) => (_jsx(MenuBarBase.Item, { className: className, ...props }));
11
- const Trigger = ({ className, ...props }) => (_jsx(MenuBarBase.Trigger, { className: cn('flex items-center gap-xs px-sm py-xs rounded-[5px] cursor-pointer', 'display16 bold text-mono700 hover:bg-mono100 hover:text-mono900 ld-transition', 'aria-expanded:bg-tintBlue aria-expanded:text-blue400', className), ...props }));
12
- // item 모드: 항목 바로 아래 작은 드롭다운
13
- const Content = ({ className, ...props }) => (_jsx(MenuBarBase.Content, { className: cn('absolute top-full left-0 mt-xs min-w-[180px] z-50', 'flex flex-col gap-xs p-xs rounded-[8px] bg-white border border-mono100 shadow-lg', className), ...props }));
14
- // mega 모드: 헤더 전체 폭 패널 + 뒤쪽 딤(클릭 시 닫기)
15
- // fixed로 부모 li(relative)를 벗어나 뷰포트(=헤더) 전체 폭을 차지. top-16 = 헤더 높이 64px.
16
- const MegaContent = ({ className, ...props }) => (_jsx(MenuBarBase.Content, { backdrop: true, backdropClassName: "fixed left-0 right-0 top-16 bottom-0 z-40 bg-black/40", className: cn('fixed left-0 right-0 top-16 z-50', 'p-lg bg-white border-b border-mono100 shadow-lg', className), ...props }));
17
- // Item의 드롭다운 자동 판정이 래퍼를 통과하도록 Base와 동일한 displayName 부여
18
- Content.displayName = MenuBarBase.Content.displayName;
19
- MegaContent.displayName = MenuBarBase.Content.displayName;
20
- const Actions = ({ className, ...props }) => (_jsx(MenuBarBase.Actions, { className: cn('flex items-center gap-sm shrink-0', className), ...props }));
21
- const Separator = ({ className, }) => (_jsx(MenuBarBase.Separator, { className: cn('w-px h-5 bg-mono200', className) }));
22
- const MenuBar = {
23
- Root,
24
- Logo,
25
- Nav,
26
- Item,
27
- Trigger,
28
- Content,
29
- MegaContent,
30
- Actions,
31
- Separator,
32
- };
33
- export default MenuBar;
@@ -1,43 +0,0 @@
1
- import type { ElementType, ReactNode } from 'react';
2
- interface RootProps {
3
- children: ReactNode;
4
- className?: string;
5
- trigger?: 'hover' | 'click';
6
- }
7
- interface SlotProps {
8
- children?: ReactNode;
9
- className?: string;
10
- }
11
- interface ItemProps {
12
- value: string;
13
- children: ReactNode;
14
- className?: string;
15
- }
16
- interface TriggerProps {
17
- as?: ElementType;
18
- children: ReactNode;
19
- className?: string;
20
- [key: string]: unknown;
21
- }
22
- interface ContentProps extends SlotProps {
23
- /** 뒤쪽 딤 + 클릭 시 닫기 */
24
- backdrop?: boolean;
25
- backdropClassName?: string;
26
- }
27
- declare const MenuBarBase: {
28
- Root: ({ children, className, trigger }: RootProps) => import("react/jsx-runtime").JSX.Element;
29
- Logo: ({ children, className }: SlotProps) => import("react/jsx-runtime").JSX.Element;
30
- Nav: ({ children, className }: SlotProps) => import("react/jsx-runtime").JSX.Element;
31
- Item: ({ value, children, className }: ItemProps) => import("react/jsx-runtime").JSX.Element;
32
- Trigger: ({ as: Comp, children, className, ...rest }: TriggerProps) => import("react/jsx-runtime").JSX.Element;
33
- Content: {
34
- ({ children, className, backdrop, backdropClassName, }: ContentProps): import("react/jsx-runtime").JSX.Element | null;
35
- displayName: string;
36
- };
37
- Actions: ({ children, className }: SlotProps) => import("react/jsx-runtime").JSX.Element;
38
- Separator: ({ className }: {
39
- className?: string;
40
- }) => import("react/jsx-runtime").JSX.Element;
41
- };
42
- export default MenuBarBase;
43
- //# sourceMappingURL=MenuBarBase.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MenuBarBase.d.ts","sourceRoot":"","sources":["../../../src/components/MenuBar/MenuBarBase.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA0CpD,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC7B;AAqBD,UAAU,SAAS;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmBD,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0BD,UAAU,YAAY;IACpB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAuCD,UAAU,YAAa,SAAQ,SAAS;IACtC,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AA0BD,QAAA,MAAM,WAAW;6CAjJyC,SAAS;oCAwB5B,SAAS;mCAIV,SAAS;2CAmBD,SAAS;0DAoCpD,YAAY;;gEA2CZ,YAAY;;;uCA9F2B,SAAS;+BAIjB;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE;CAsHvD,CAAC;AAEF,eAAe,WAAW,CAAC"}
@@ -1,69 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { Children, createContext, isValidElement, useContext, useState, } from 'react';
4
- import cn from '../../utils/cn.js';
5
- const CONTENT_NAME = 'MenuBarContent';
6
- const MenuBarContext = createContext(null);
7
- const useMenuBarContext = () => {
8
- const ctx = useContext(MenuBarContext);
9
- if (!ctx)
10
- throw new Error('MenuBarBase 서브컴포넌트는 MenuBarBase.Root 내부에서 사용해야 합니다.');
11
- return ctx;
12
- };
13
- const ItemContext = createContext(null);
14
- const useItemContext = () => {
15
- const ctx = useContext(ItemContext);
16
- if (!ctx)
17
- throw new Error('MenuBarBase.Trigger / Content는 MenuBarBase.Item 내부에서 사용해야 합니다.');
18
- return ctx;
19
- };
20
- const Root = ({ children, className, trigger = 'hover' }) => {
21
- const [openValue, setOpenValue] = useState(null);
22
- const isOpen = (v) => openValue === v;
23
- return (_jsx(MenuBarContext, { value: { openValue, setOpenValue, isOpen, trigger }, children: _jsx("header", { className: className, onMouseLeave: trigger === 'hover' ? () => setOpenValue(null) : undefined, children: children }) }));
24
- };
25
- const Logo = ({ children, className }) => (_jsx("div", { className: className, children: children }));
26
- const Nav = ({ children, className }) => (_jsx("ul", { className: className, children: children }));
27
- const Actions = ({ children, className }) => (_jsx("div", { className: className, children: children }));
28
- const Separator = ({ className }) => (_jsx("span", { "aria-hidden": true, className: className }));
29
- const Item = ({ value, children, className }) => {
30
- const { trigger, setOpenValue } = useMenuBarContext();
31
- // Content 존재 여부로 드롭다운 항목인지 자동 판정 (스타일 래퍼도 같은 displayName을 가짐)
32
- const hasContent = Children.toArray(children).some((c) => isValidElement(c) &&
33
- c.type?.displayName === CONTENT_NAME);
34
- const hoverProps = trigger === 'hover' && hasContent
35
- ? { onMouseEnter: () => setOpenValue(value) }
36
- : {};
37
- return (_jsx(ItemContext, { value: { value, hasContent }, children: _jsx("li", { className: cn('relative', className), ...hoverProps, children: children }) }));
38
- };
39
- const Trigger = ({ as: Comp = 'button', children, className, ...rest }) => {
40
- const { trigger, setOpenValue, isOpen } = useMenuBarContext();
41
- const { value, hasContent } = useItemContext();
42
- // 드롭다운 없는 항목 → 순수 링크/버튼 (토글 안 함)
43
- if (!hasContent) {
44
- return (_jsx(Comp, { className: className, ...rest, children: children }));
45
- }
46
- const handleClick = trigger === 'click'
47
- ? () => setOpenValue(isOpen(value) ? null : value)
48
- : undefined;
49
- return (_jsx(Comp, { type: Comp === 'button' ? 'button' : undefined, "aria-expanded": isOpen(value), onClick: handleClick, className: className, ...rest, children: children }));
50
- };
51
- const Content = ({ children, className, backdrop, backdropClassName, }) => {
52
- const { isOpen, setOpenValue } = useMenuBarContext();
53
- const { value } = useItemContext();
54
- if (!isOpen(value))
55
- return null;
56
- return (_jsxs(_Fragment, { children: [backdrop && (_jsx("div", { "aria-hidden": true, onClick: () => setOpenValue(null), className: backdropClassName })), _jsx("div", { className: className, children: children })] }));
57
- };
58
- Content.displayName = CONTENT_NAME;
59
- const MenuBarBase = {
60
- Root,
61
- Logo,
62
- Nav,
63
- Item,
64
- Trigger,
65
- Content,
66
- Actions,
67
- Separator,
68
- };
69
- export default MenuBarBase;
@@ -1,51 +0,0 @@
1
- import { type ReactNode } from 'react';
2
- export type ModalSize = 'small' | 'medium' | 'large' | 'xlarge';
3
- export interface ModalButtons {
4
- direction?: 'row' | 'column';
5
- list?: ModalButton[];
6
- }
7
- export interface ModalButton<T = unknown> {
8
- /** 버튼 텍스트 */
9
- label: string;
10
- /** 버튼 식별 값 (onButtonClick에 전달) */
11
- value: T;
12
- /** 버튼 스타일 유형 */
13
- variant?: 'solid' | 'outline' | 'ghost';
14
- /** 버튼 색상 테마 */
15
- color?: 'neutral' | 'point' | 'danger';
16
- /** 클릭 핸들러 (false 반환 시 모달 닫힘 방지) */
17
- onClick?: () => void | boolean | Promise<void | boolean>;
18
- }
19
- export interface ModalProps {
20
- /** 모달 열림 상태 (제어 컴포넌트) */
21
- open?: boolean;
22
- /** 초기 열림 상태 (비제어 컴포넌트) */
23
- defaultOpen?: boolean;
24
- /** 열림 상태 변경 시 호출되는 콜백 */
25
- onOpenChange?: (open: boolean) => void;
26
- /** 서브 타이틀 (title 위에 표시) */
27
- name?: string;
28
- /** 모달 제목 */
29
- title?: string;
30
- /** 모달 설명 텍스트 */
31
- description?: string;
32
- /** 본문 콘텐츠 */
33
- children?: ReactNode;
34
- /** 모달 너비 프리셋 */
35
- size?: ModalSize;
36
- /** 너비 직접 지정 (size보다 우선) */
37
- icon?: 'success' | 'fail';
38
- /** 하단 버튼 목록 */
39
- buttons?: ModalButtons;
40
- /** 스크롤 동작 */
41
- scrollBehavior?: 'inside' | 'outside';
42
- /** 추가 CSS 클래스 (모달 패널에 적용) */
43
- className?: string;
44
- /** 인라인 스타일 (모달 패널에 적용) */
45
- style?: React.CSSProperties;
46
- /** 버튼 클릭 시 해당 버튼의 value를 전달하는 콜백 */
47
- onButtonClick?: (value: unknown) => void;
48
- }
49
- declare const Modal: ({ open, defaultOpen, onOpenChange, name, title, description, children, size, icon, buttons, scrollBehavior, className, style, onButtonClick, }: ModalProps) => import("react/jsx-runtime").JSX.Element;
50
- export default Modal;
51
- //# sourceMappingURL=Modal.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAO/C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEhE,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,OAAO;IACtC,aAAa;IACb,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,KAAK,EAAE,CAAC,CAAC;IACT,gBAAgB;IAChB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACxC,eAAe;IACf,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;IACvC,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,CAAC;CAC1D;AAED,MAAM,WAAW,UAAU;IACzB,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0BAA0B;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yBAAyB;IACzB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa;IACb,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gBAAgB;IAChB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,eAAe;IACf,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,aAAa;IACb,cAAc,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACtC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AA6CD,QAAA,MAAM,KAAK,GAAI,gJAeZ,UAAU,4CA0JZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
@@ -1,72 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useRef } from 'react';
3
- import ModalBase from './ModalBase.js';
4
- import LucideIcon from '../Icon/LucideIcon.js';
5
- import cn from '../../utils/cn.js';
6
- import Button from '../Button/Button.js';
7
- // ── 스타일 매핑 ──
8
- const sizeClasses = {
9
- small: 'modal-sm',
10
- medium: 'modal-md',
11
- large: 'modal-lg',
12
- xlarge: 'modal-xl',
13
- };
14
- const buttonSizeClasses = {
15
- small: 'medium',
16
- medium: 'large',
17
- large: 'large',
18
- xlarge: 'large',
19
- };
20
- const buttonsGapSizeClasses = {
21
- small: 'gap-xs',
22
- medium: 'gap-sm',
23
- large: 'gap-sm',
24
- xlarge: 'gap-sm',
25
- };
26
- const layoutGapSizeClasses = {
27
- small: 'gap-lg',
28
- medium: 'gap-xl',
29
- large: 'gap-xl',
30
- xlarge: 'gap-xl',
31
- };
32
- const noHeaderPaddingTopSizeClasses = {
33
- small: 'pt-lg',
34
- medium: 'pt-xl',
35
- large: 'pt-xl',
36
- xlarge: 'pt-xl',
37
- };
38
- const statusIconSizeClasses = {
39
- small: 'size-10',
40
- medium: 'size-12.5',
41
- large: 'size-12.5',
42
- xlarge: 'size-12.5',
43
- };
44
- const Modal = ({ open, defaultOpen, onOpenChange, name, title, description, children, size = 'small', icon, buttons, scrollBehavior = 'inside', className, style, onButtonClick, }) => {
45
- const overlayRef = useRef(false);
46
- const hasHeader = name || title || description || icon;
47
- const handleClick = async (button) => {
48
- if (button.onClick) {
49
- const res = await button.onClick();
50
- if (res === false)
51
- return;
52
- }
53
- onButtonClick?.(button.value);
54
- onOpenChange?.(false);
55
- };
56
- return (_jsxs(ModalBase.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [_jsx(ModalBase.Overlay, {}), _jsx(ModalBase.Content, { className: cn({
57
- ['top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2']: scrollBehavior === 'inside',
58
- ['inset-0 overflow-y-auto flex justify-center items-start py-20']: scrollBehavior === 'outside',
59
- }), onMouseDown: (e) => (overlayRef.current = e.target === e.currentTarget), onClick: (e) => {
60
- if (scrollBehavior === 'outside' &&
61
- e.target === e.currentTarget &&
62
- overlayRef.current)
63
- onOpenChange?.(false);
64
- overlayRef.current = false;
65
- }, children: _jsxs("div", { className: cn('relative bg-white rounded-2xl p-5', sizeClasses[size], 'mobile:max-w-[calc(100vw-40px)]', scrollBehavior === 'inside' &&
66
- 'flex flex-col overflow-y-auto max-h-[90dvh]', className), style: style, onClick: (e) => e.stopPropagation(), children: [_jsx(ModalBase.Close, { className: "absolute top-4 right-5 text-neutral500 cursor-pointer outline-hidden", children: _jsx(Button, { variant: "ghost", color: "neutral", leftIcon: "x", compact: true }) }), _jsxs("div", { className: cn('w-full flex flex-col shrink-0', scrollBehavior === 'inside' && 'flex-1 min-h-0', layoutGapSizeClasses[size], !hasHeader && noHeaderPaddingTopSizeClasses[size]), children: [hasHeader && (_jsxs("div", { className: "w-full flex gap-5 py-5 items-center flex-col text-center shrink-0", children: [icon === 'success' && (_jsx("div", { className: cn('flex items-center justify-center rounded-full bg-hyper-blue', statusIconSizeClasses[size]), children: _jsx(LucideIcon, { name: "check", className: "text-white" }) })), icon === 'fail' && (_jsx("div", { className: cn('flex items-center justify-center rounded-full bg-danger600', statusIconSizeClasses[size]), children: _jsx(LucideIcon, { name: "circleAlert", className: "text-white" }) })), name && (_jsx("span", { className: "display16 bold text-neutral500 whitespace-pre-wrap", children: name })), title && (_jsx(ModalBase.Title, { className: "display28 bold whitespace-pre-wrap text-center", children: title })), description && (_jsx(ModalBase.Description, { className: "display14 text-neutral500 whitespace-pre-wrap text-center", children: description }))] })), children && (_jsx("div", { className: cn(scrollBehavior === 'inside' &&
67
- 'flex-1 min-h-10 overflow-y-auto'), children: children })), buttons?.list && buttons?.list?.length > 0 && (_jsx("div", { className: cn('flex mobile:flex-1 mobile:flex-col mobile:items-center', buttons.direction === 'column' ? 'flex-col' : 'flex-row', buttonsGapSizeClasses[size]), children: buttons?.list?.map((button, index) => {
68
- const isFirst = index === 0;
69
- return (_jsx("div", { className: "flex flex-1 w-full", children: _jsx(Button, { type: "button", onClick: () => handleClick(button), variant: button.variant ?? (isFirst ? 'solid' : 'outline'), color: button.color ?? (isFirst ? 'point' : 'neutral'), size: buttonSizeClasses[size], block: true, children: button.label }) }, String(button.value)));
70
- }) }))] })] }) })] }));
71
- };
72
- export default Modal;
@@ -1,42 +0,0 @@
1
- import { type ReactNode } from 'react';
2
- interface RootProps {
3
- open?: boolean;
4
- defaultOpen?: boolean;
5
- onOpenChange?: (open: boolean) => void;
6
- children?: ReactNode;
7
- }
8
- interface OverlayProps {
9
- className?: string;
10
- }
11
- interface ContentProps {
12
- className?: string;
13
- children?: ReactNode;
14
- style?: React.CSSProperties;
15
- onClick?: React.MouseEventHandler<HTMLElement>;
16
- onMouseDown?: React.MouseEventHandler<HTMLElement>;
17
- onPointerDownOutside?: (e: Event) => void;
18
- onEscapeKeyDown?: (e: KeyboardEvent) => void;
19
- }
20
- interface CloseProps {
21
- asChild?: boolean;
22
- className?: string;
23
- children?: ReactNode;
24
- }
25
- interface TitleProps {
26
- className?: string;
27
- children?: ReactNode;
28
- }
29
- interface DescriptionProps {
30
- className?: string;
31
- children?: ReactNode;
32
- }
33
- export declare const ModalBase: {
34
- Root: ({ open, defaultOpen, onOpenChange, children }: RootProps) => import("react/jsx-runtime").JSX.Element;
35
- Overlay: ({ className }: OverlayProps) => import("react/jsx-runtime").JSX.Element;
36
- Content: ({ className, children, style, onClick, onMouseDown, onPointerDownOutside, onEscapeKeyDown, }: ContentProps) => import("react/jsx-runtime").JSX.Element;
37
- Close: ({ asChild, className, children }: CloseProps) => import("react/jsx-runtime").JSX.Element;
38
- Title: ({ className, children }: TitleProps) => import("react/jsx-runtime").JSX.Element;
39
- Description: ({ className, children }: DescriptionProps) => import("react/jsx-runtime").JSX.Element;
40
- };
41
- export default ModalBase;
42
- //# sourceMappingURL=ModalBase.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ModalBase.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAeD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC/C,WAAW,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACnD,oBAAoB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CAC9C;AAgCD,UAAU,UAAU;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAWD,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAOD,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAQD,eAAO,MAAM,SAAS;0DA5GuC,SAAS;6BAiBtC,YAAY;4GAiCzC,YAAY;8CA4BkC,UAAU;qCAcnB,UAAU;2CAUJ,gBAAgB;CAa7D,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -1,30 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import * as Dialog from '@radix-ui/react-dialog';
3
- import cn from '../../utils/cn.js';
4
- const Root = ({ open, defaultOpen, onOpenChange, children }) => {
5
- return (_jsx(Dialog.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: children }));
6
- };
7
- const Overlay = ({ className }) => {
8
- return (_jsx(Dialog.Portal, { children: _jsx(Dialog.Overlay, { className: cn('fixed inset-0 z-50 bg-black/30', 'data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out', className) }) }));
9
- };
10
- const Content = ({ className, children, style, onClick, onMouseDown, onPointerDownOutside, onEscapeKeyDown, }) => {
11
- return (_jsx(Dialog.Portal, { children: _jsx(Dialog.Content, { className: cn('fixed z-50', 'data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out', className), style: style, onClick: onClick, onMouseDown: onMouseDown, onPointerDownOutside: onPointerDownOutside, onEscapeKeyDown: onEscapeKeyDown, children: children }) }));
12
- };
13
- const Close = ({ asChild, className, children }) => {
14
- return (_jsx(Dialog.Close, { asChild: asChild, className: className, children: children }));
15
- };
16
- const Title = ({ className, children }) => {
17
- return _jsx(Dialog.Title, { className: className, children: children });
18
- };
19
- const Description = ({ className, children }) => {
20
- return (_jsx(Dialog.Description, { className: className, children: children }));
21
- };
22
- export const ModalBase = {
23
- Root,
24
- Overlay,
25
- Content,
26
- Close,
27
- Title,
28
- Description,
29
- };
30
- export default ModalBase;
@@ -1,24 +0,0 @@
1
- import { type ModalSize } from './Modal.js';
2
- interface ModalOptions<T = undefined> {
3
- name?: string;
4
- title?: string;
5
- description?: string;
6
- content?: React.ReactNode | ((args: {
7
- onClose: (value?: T) => void;
8
- }) => React.ReactNode);
9
- buttons?: {
10
- value: T;
11
- label: string;
12
- variant?: 'solid' | 'outline' | 'ghost';
13
- color?: 'neutral' | 'point' | 'danger';
14
- onClick?: () => void | boolean | Promise<void | boolean>;
15
- }[];
16
- /** 버튼 배치 방향 */
17
- buttonsDirection?: 'row' | 'column';
18
- size?: ModalSize;
19
- icon?: 'success' | 'fail';
20
- onBeforeClose?: () => Promise<boolean> | boolean;
21
- }
22
- declare const modal: <T = undefined>(options: ModalOptions<T>) => Promise<T | undefined>;
23
- export default modal;
24
- //# sourceMappingURL=openModal.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"openModal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/openModal.tsx"],"names":[],"mappings":"AACA,OAAc,EAAoB,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAElE,UAAU,YAAY,CAAC,CAAC,GAAG,SAAS;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EACJ,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,IAAI,EAAE;QAAE,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAClE,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,CAAC,CAAC;QACT,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;QACxC,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;QACvC,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,CAAC;KAC1D,EAAE,CAAC;IACJ,eAAe;IACf,gBAAgB,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACpC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;CAClD;AAED,QAAA,MAAM,KAAK,GAAI,CAAC,GAAG,SAAS,EAC1B,SAAS,YAAY,CAAC,CAAC,CAAC,KACvB,OAAO,CAAC,CAAC,GAAG,SAAS,CAgEvB,CAAC;AAEF,eAAe,KAAK,CAAC"}