@loword/loword-design-system 0.0.11 → 0.0.14

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 (188) hide show
  1. package/dist/components/LDAccordion/AccordionBase.d.ts +41 -0
  2. package/dist/components/LDAccordion/AccordionBase.d.ts.map +1 -0
  3. package/dist/components/LDAccordion/AccordionBase.js +24 -0
  4. package/dist/components/LDAccordion/LDAccordion.d.ts +31 -0
  5. package/dist/components/LDAccordion/LDAccordion.d.ts.map +1 -0
  6. package/dist/components/LDAccordion/LDAccordion.js +21 -0
  7. package/dist/components/LDAvatar/LDAvatar.d.ts +1 -1
  8. package/dist/components/LDAvatar/LDAvatar.d.ts.map +1 -1
  9. package/dist/components/LDAvatar/LDAvatar.js +19 -10
  10. package/dist/components/LDButton/ButtonBase.d.ts.map +1 -1
  11. package/dist/components/LDButton/ButtonBase.js +5 -3
  12. package/dist/components/LDButton/LDButton.d.ts.map +1 -1
  13. package/dist/components/LDButton/LDButton.js +5 -5
  14. package/dist/components/LDCalendar/CalendarBase.d.ts +17 -0
  15. package/dist/components/LDCalendar/CalendarBase.d.ts.map +1 -0
  16. package/dist/components/LDCalendar/CalendarBase.js +49 -0
  17. package/dist/components/LDCalendar/LDCalendar.d.ts +4 -11
  18. package/dist/components/LDCalendar/LDCalendar.d.ts.map +1 -1
  19. package/dist/components/LDCalendar/LDCalendar.js +9 -40
  20. package/dist/components/LDCarousel/CarouselBase.d.ts +3 -3
  21. package/dist/components/LDCarousel/CarouselBase.d.ts.map +1 -1
  22. package/dist/components/LDCarousel/CarouselBase.js +9 -7
  23. package/dist/components/LDCarousel/LDCarousel.d.ts +7 -8
  24. package/dist/components/LDCarousel/LDCarousel.d.ts.map +1 -1
  25. package/dist/components/LDCarousel/LDCarousel.js +2 -2
  26. package/dist/components/LDCheckbox/CheckboxBase.js +1 -1
  27. package/dist/components/LDCheckbox/LDCheckbox.d.ts +2 -5
  28. package/dist/components/LDCheckbox/LDCheckbox.d.ts.map +1 -1
  29. package/dist/components/LDCheckbox/LDCheckbox.js +65 -7
  30. package/dist/components/LDCheckbox/LDCheckboxGroup.d.ts +3 -3
  31. package/dist/components/LDCheckbox/LDCheckboxGroup.d.ts.map +1 -1
  32. package/dist/components/LDCheckbox/LDCheckboxGroup.js +11 -2
  33. package/dist/components/LDCheckbox/LDFormCheckbox.d.ts +1 -3
  34. package/dist/components/LDCheckbox/LDFormCheckbox.d.ts.map +1 -1
  35. package/dist/components/LDCheckbox/LDFormCheckbox.js +3 -4
  36. package/dist/components/LDCheckbox/LDFormCheckboxGroup.d.ts +1 -3
  37. package/dist/components/LDCheckbox/LDFormCheckboxGroup.d.ts.map +1 -1
  38. package/dist/components/LDCheckbox/LDFormCheckboxGroup.js +3 -4
  39. package/dist/components/LDDataCalendar/DataCalendarBase.d.ts +17 -1
  40. package/dist/components/LDDataCalendar/DataCalendarBase.d.ts.map +1 -1
  41. package/dist/components/LDDataCalendar/DataCalendarBase.js +34 -4
  42. package/dist/components/LDDataCalendar/LDDataCalendar.d.ts +27 -10
  43. package/dist/components/LDDataCalendar/LDDataCalendar.d.ts.map +1 -1
  44. package/dist/components/LDDataCalendar/LDDataCalendar.js +8 -8
  45. package/dist/components/LDDatePicker/LDDatePicker.d.ts.map +1 -1
  46. package/dist/components/LDDatePicker/LDDatePicker.js +1 -1
  47. package/dist/components/LDDateRangePicker/LDDateRangePicker.d.ts.map +1 -1
  48. package/dist/components/LDDateRangePicker/LDDateRangePicker.js +1 -1
  49. package/dist/components/LDDrawer/LDDrawer.d.ts +2 -0
  50. package/dist/components/LDDrawer/LDDrawer.d.ts.map +1 -1
  51. package/dist/components/LDDrawer/LDDrawer.js +1 -1
  52. package/dist/components/LDEditor/LDEditor.d.ts.map +1 -1
  53. package/dist/components/LDEditor/LDEditor.js +94 -54
  54. package/dist/components/LDEmpty/EmptyBase.d.ts +19 -0
  55. package/dist/components/LDEmpty/EmptyBase.d.ts.map +1 -0
  56. package/dist/components/LDEmpty/EmptyBase.js +18 -0
  57. package/dist/components/LDEmpty/LDEmpty.d.ts +35 -0
  58. package/dist/components/LDEmpty/LDEmpty.d.ts.map +1 -0
  59. package/dist/components/LDEmpty/LDEmpty.js +30 -0
  60. package/dist/components/LDFileUpload/FileUploadBase.d.ts.map +1 -1
  61. package/dist/components/LDFileUpload/FileUploadBase.js +6 -6
  62. package/dist/components/LDFileUpload/LDFileUpload.d.ts +3 -0
  63. package/dist/components/LDFileUpload/LDFileUpload.d.ts.map +1 -1
  64. package/dist/components/LDFileUpload/LDFileUpload.js +2 -4
  65. package/dist/components/LDFileUpload/LDFileUploadList.d.ts +3 -0
  66. package/dist/components/LDFileUpload/LDFileUploadList.d.ts.map +1 -1
  67. package/dist/components/LDFileUpload/LDFileUploadList.js +1 -3
  68. package/dist/components/LDFileUpload/LDImageUpload.d.ts +3 -0
  69. package/dist/components/LDFileUpload/LDImageUpload.d.ts.map +1 -1
  70. package/dist/components/LDFileUpload/LDImageUpload.js +2 -4
  71. package/dist/components/LDFileUpload/LDImageUploadList.d.ts +3 -0
  72. package/dist/components/LDFileUpload/LDImageUploadList.d.ts.map +1 -1
  73. package/dist/components/LDFileUpload/LDImageUploadList.js +1 -3
  74. package/dist/components/LDInput/InputBase.d.ts +5 -3
  75. package/dist/components/LDInput/InputBase.d.ts.map +1 -1
  76. package/dist/components/LDInput/InputBase.js +4 -4
  77. package/dist/components/LDInput/LDFormInput.d.ts.map +1 -1
  78. package/dist/components/LDInput/LDFormInput.js +7 -27
  79. package/dist/components/LDInput/LDInput.d.ts +8 -2
  80. package/dist/components/LDInput/LDInput.d.ts.map +1 -1
  81. package/dist/components/LDInput/LDInput.js +91 -28
  82. package/dist/components/LDLNB/LDLNB.d.ts +42 -0
  83. package/dist/components/LDLNB/LDLNB.d.ts.map +1 -0
  84. package/dist/components/LDLNB/LDLNB.js +34 -0
  85. package/dist/components/LDLNB/LDLNBBase.d.ts +5 -13
  86. package/dist/components/LDLNB/LDLNBBase.d.ts.map +1 -1
  87. package/dist/components/LDLNB/LDLNBBase.js +52 -18
  88. package/dist/components/LDMenuBar/LDMenuBar.d.ts +33 -19
  89. package/dist/components/LDMenuBar/LDMenuBar.d.ts.map +1 -1
  90. package/dist/components/LDMenuBar/LDMenuBar.js +13 -27
  91. package/dist/components/LDMenuBar/MenuBarBase.d.ts +4 -5
  92. package/dist/components/LDMenuBar/MenuBarBase.d.ts.map +1 -1
  93. package/dist/components/LDMenuBar/MenuBarBase.js +12 -14
  94. package/dist/components/LDModal/LDModal.d.ts +2 -1
  95. package/dist/components/LDModal/LDModal.d.ts.map +1 -1
  96. package/dist/components/LDModal/LDModal.js +1 -1
  97. package/dist/components/LDModal/LDModalView.d.ts +11 -3
  98. package/dist/components/LDModal/LDModalView.d.ts.map +1 -1
  99. package/dist/components/LDModal/LDModalView.js +4 -4
  100. package/dist/components/LDNotification/LDNotification.d.ts +40 -0
  101. package/dist/components/LDNotification/LDNotification.d.ts.map +1 -0
  102. package/dist/components/LDNotification/LDNotification.js +76 -0
  103. package/dist/components/LDNotification/NotificationBase.d.ts +29 -0
  104. package/dist/components/LDNotification/NotificationBase.d.ts.map +1 -0
  105. package/dist/components/LDNotification/NotificationBase.js +27 -0
  106. package/dist/components/LDOTPInput/LDFormOTPInput.d.ts +15 -0
  107. package/dist/components/LDOTPInput/LDFormOTPInput.d.ts.map +1 -0
  108. package/dist/components/LDOTPInput/LDFormOTPInput.js +8 -0
  109. package/dist/components/LDOTPInput/LDOTPInput.d.ts +10 -22
  110. package/dist/components/LDOTPInput/LDOTPInput.d.ts.map +1 -1
  111. package/dist/components/LDOTPInput/LDOTPInput.js +44 -73
  112. package/dist/components/LDOTPInput/OTPInputBase.d.ts +46 -0
  113. package/dist/components/LDOTPInput/OTPInputBase.d.ts.map +1 -0
  114. package/dist/components/LDOTPInput/OTPInputBase.js +48 -0
  115. package/dist/components/LDPagination/LDPagination.d.ts +1 -1
  116. package/dist/components/LDPagination/LDPagination.d.ts.map +1 -1
  117. package/dist/components/LDPagination/LDPagination.js +1 -8
  118. package/dist/components/LDPopover/LDPopover.d.ts +1 -1
  119. package/dist/components/LDPopover/LDPopover.d.ts.map +1 -1
  120. package/dist/components/LDPopover/LDPopover.js +5 -4
  121. package/dist/components/LDProgressBar/LDProgressBar.d.ts +16 -0
  122. package/dist/components/LDProgressBar/LDProgressBar.d.ts.map +1 -0
  123. package/dist/components/LDProgressBar/LDProgressBar.js +9 -0
  124. package/dist/components/LDProgressBar/ProgressBarBase.d.ts +11 -0
  125. package/dist/components/LDProgressBar/ProgressBarBase.d.ts.map +1 -0
  126. package/dist/components/LDProgressBar/ProgressBarBase.js +10 -0
  127. package/dist/components/LDRadio/LDFormRadioGroup.d.ts +1 -3
  128. package/dist/components/LDRadio/LDFormRadioGroup.d.ts.map +1 -1
  129. package/dist/components/LDRadio/LDFormRadioGroup.js +3 -4
  130. package/dist/components/LDRadio/LDRadio.d.ts +1 -1
  131. package/dist/components/LDRadio/LDRadio.d.ts.map +1 -1
  132. package/dist/components/LDRadio/LDRadio.js +58 -12
  133. package/dist/components/LDRadio/LDRadioGroup.d.ts +5 -3
  134. package/dist/components/LDRadio/LDRadioGroup.d.ts.map +1 -1
  135. package/dist/components/LDRadio/LDRadioGroup.js +11 -2
  136. package/dist/components/LDRate/LDFormRate.d.ts +10 -0
  137. package/dist/components/LDRate/LDFormRate.d.ts.map +1 -0
  138. package/dist/components/LDRate/LDFormRate.js +9 -0
  139. package/dist/components/LDRate/LDRate.d.ts +45 -0
  140. package/dist/components/LDRate/LDRate.d.ts.map +1 -0
  141. package/dist/components/LDRate/LDRate.js +33 -0
  142. package/dist/components/LDRate/RateBase.d.ts +49 -0
  143. package/dist/components/LDRate/RateBase.d.ts.map +1 -0
  144. package/dist/components/LDRate/RateBase.js +108 -0
  145. package/dist/components/LDSectionNav/LDSectionNav.d.ts +11 -0
  146. package/dist/components/LDSectionNav/LDSectionNav.d.ts.map +1 -0
  147. package/dist/components/LDSectionNav/LDSectionNav.js +11 -0
  148. package/dist/components/LDSectionNav/SectionNavBase.d.ts +20 -0
  149. package/dist/components/LDSectionNav/SectionNavBase.d.ts.map +1 -0
  150. package/dist/components/LDSectionNav/SectionNavBase.js +53 -0
  151. package/dist/components/LDSelect/LDMultiSelect.js +3 -3
  152. package/dist/components/LDSelect/LDSelect.d.ts.map +1 -1
  153. package/dist/components/LDSelect/LDSelect.js +2 -2
  154. package/dist/components/LDTable/LDCollapsibleTanstackTable.d.ts.map +1 -1
  155. package/dist/components/LDTable/LDCollapsibleTanstackTable.js +12 -9
  156. package/dist/components/LDTable/LDTable.d.ts.map +1 -1
  157. package/dist/components/LDTable/LDTable.js +1 -1
  158. package/dist/components/LDTable/LDTanstackTable.d.ts.map +1 -1
  159. package/dist/components/LDTable/LDTanstackTable.js +5 -6
  160. package/dist/components/LDTable/TableField.d.ts.map +1 -1
  161. package/dist/components/LDTabs/LDTabs.d.ts +46 -0
  162. package/dist/components/LDTabs/LDTabs.d.ts.map +1 -0
  163. package/dist/components/LDTabs/LDTabs.js +263 -0
  164. package/dist/components/LDTabs/TabsBase.d.ts +38 -0
  165. package/dist/components/LDTabs/TabsBase.d.ts.map +1 -0
  166. package/dist/components/LDTabs/TabsBase.js +30 -0
  167. package/dist/components/LDTextarea/LDTextarea.js +1 -1
  168. package/dist/components/LDTimePicker/LDTimePicker.js +1 -1
  169. package/dist/components/LDToast/LDToaster.d.ts +2 -1
  170. package/dist/components/LDToast/LDToaster.d.ts.map +1 -1
  171. package/dist/components/LDToast/LDToaster.js +2 -2
  172. package/dist/components/LDToggleButton/LDFormToggleButton.d.ts +1 -3
  173. package/dist/components/LDToggleButton/LDFormToggleButton.d.ts.map +1 -1
  174. package/dist/components/LDToggleButton/LDFormToggleButton.js +3 -4
  175. package/dist/components/LDTooltip/LDTooltip.js +1 -1
  176. package/dist/components/LDTooltip/TooltipBase.d.ts +6 -2
  177. package/dist/components/LDTooltip/TooltipBase.d.ts.map +1 -1
  178. package/dist/components/LDTooltip/TooltipBase.js +4 -4
  179. package/dist/index.css +1110 -167
  180. package/dist/index.d.ts +24 -13
  181. package/dist/index.d.ts.map +1 -1
  182. package/dist/index.js +30 -13
  183. package/package.json +19 -2
  184. package/src/styles/carousel.css +15 -14
  185. package/src/styles/components/editor.css +6 -0
  186. package/src/styles/components/input.css +14 -0
  187. package/src/styles/components/shared.css +6 -6
  188. package/src/styles/motion.css +78 -0
@@ -0,0 +1,41 @@
1
+ import { type ReactNode } from 'react';
2
+ type RootProps = {
3
+ type: 'single';
4
+ value?: string;
5
+ defaultValue?: string;
6
+ onValueChange?: (value: string) => void;
7
+ collapsible?: boolean;
8
+ disabled?: boolean;
9
+ className?: string;
10
+ children?: ReactNode;
11
+ } | {
12
+ type: 'multiple';
13
+ value?: string[];
14
+ defaultValue?: string[];
15
+ onValueChange?: (value: string[]) => void;
16
+ disabled?: boolean;
17
+ className?: string;
18
+ children?: ReactNode;
19
+ };
20
+ interface ItemProps {
21
+ value: string;
22
+ disabled?: boolean;
23
+ className?: string;
24
+ children?: ReactNode;
25
+ }
26
+ interface TriggerProps {
27
+ className?: string;
28
+ children?: ReactNode;
29
+ }
30
+ interface ContentProps {
31
+ className?: string;
32
+ children?: ReactNode;
33
+ }
34
+ export declare const AccordionBase: {
35
+ Root: ({ className, children, ...props }: RootProps) => import("react/jsx-runtime").JSX.Element;
36
+ Item: ({ value, disabled, className, children }: ItemProps) => import("react/jsx-runtime").JSX.Element;
37
+ Trigger: ({ className, children }: TriggerProps) => import("react/jsx-runtime").JSX.Element;
38
+ Content: ({ className, children }: ContentProps) => import("react/jsx-runtime").JSX.Element;
39
+ };
40
+ export default AccordionBase;
41
+ //# sourceMappingURL=AccordionBase.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AccordionBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDAccordion/AccordionBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,KAAK,SAAS,GACV;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,GACD;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAeN,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAeD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAkBD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAgBD,eAAO,MAAM,aAAa;8CAzEuB,SAAS;qDAoBF,SAAS;uCAkBvB,YAAY;uCAqBZ,YAAY;CAmBrD,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -0,0 +1,24 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import * as RadixAccordion from '@radix-ui/react-accordion';
3
+ import cn from '../../utils/cn.js';
4
+ const Root = ({ className, children, ...props }) => {
5
+ return (
6
+ // Radix의 single/multiple 판별 유니온을 그대로 위임한다.
7
+ _jsx(RadixAccordion.Root, { ...props, className: cn('w-full', className), children: children }));
8
+ };
9
+ const Item = ({ value, disabled, className, children }) => {
10
+ return (_jsx(RadixAccordion.Item, { value: value, disabled: disabled, className: className, children: children }));
11
+ };
12
+ const Trigger = ({ className, children }) => {
13
+ return (_jsx(RadixAccordion.Header, { className: "flex", children: _jsx(RadixAccordion.Trigger, { className: cn('flex w-full items-center justify-between cursor-pointer disabled:cursor-not-allowed', className), children: children }) }));
14
+ };
15
+ const Content = ({ className, children }) => {
16
+ return (_jsx(RadixAccordion.Content, { className: cn('overflow-hidden', 'data-[state=open]:accordion-down data-[state=closed]:accordion-up', className), children: children }));
17
+ };
18
+ export const AccordionBase = {
19
+ Root,
20
+ Item,
21
+ Trigger,
22
+ Content,
23
+ };
24
+ export default AccordionBase;
@@ -0,0 +1,31 @@
1
+ import { type ReactNode } from 'react';
2
+ /** 아코디언 개별 항목 */
3
+ export interface LDAccordionItem {
4
+ /** 항목을 구분하는 고유 값 */
5
+ value: string;
6
+ /** 헤더에 표시할 제목 */
7
+ title: ReactNode;
8
+ /** 펼쳤을 때 표시할 내용 */
9
+ content: ReactNode;
10
+ /** 이 항목만 비활성화 */
11
+ disabled?: boolean;
12
+ }
13
+ export interface LDAccordionProps {
14
+ /** 아코디언에 표시할 항목 목록 */
15
+ items: LDAccordionItem[];
16
+ /** 'single'(한 번에 하나) | 'multiple'(여러 개 동시 열림). 기본 'single' */
17
+ type?: 'single' | 'multiple';
18
+ /** 초기 열림 값 (uncontrolled) */
19
+ defaultValue?: string | string[];
20
+ /** 열림 값 (controlled) */
21
+ value?: string | string[];
22
+ /** 열림 값 변경 콜백 */
23
+ onValueChange?: (value: string | string[]) => void;
24
+ /** single일 때 열린 항목을 다시 닫아 전체 닫힘 허용. 기본 true */
25
+ collapsible?: boolean;
26
+ /** 루트 컨테이너 className */
27
+ className?: string;
28
+ }
29
+ declare const LDAccordion: ({ items, type, defaultValue, value, onValueChange, collapsible, className, }: LDAccordionProps) => import("react/jsx-runtime").JSX.Element;
30
+ export default LDAccordion;
31
+ //# sourceMappingURL=LDAccordion.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"LDAccordion.d.ts","sourceRoot":"","sources":["../../../src/components/LDAccordion/LDAccordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,iBAAiB;AACjB,MAAM,WAAW,eAAe;IAC9B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,mBAAmB;IACnB,OAAO,EAAE,SAAS,CAAC;IACnB,iBAAiB;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC/B,sBAAsB;IACtB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B,6BAA6B;IAC7B,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACjC,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,iBAAiB;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,+CAA+C;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,WAAW,GAAI,8EAQlB,gBAAgB,4CA2DlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
@@ -0,0 +1,21 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { ChevronDown, ChevronUp } from 'lucide-react';
3
+ import AccordionBase from './AccordionBase.js';
4
+ import cn from '../../utils/cn.js';
5
+ const LDAccordion = ({ items, type = 'single', defaultValue, value, onValueChange, collapsible = true, className, }) => {
6
+ // single/multiple 유니온을 Base로 넘기기 위해 공통 props를 한 번에 캐스팅한다.
7
+ const rootProps = {
8
+ type,
9
+ defaultValue,
10
+ value,
11
+ onValueChange,
12
+ ...(type === 'single' ? { collapsible } : {}),
13
+ };
14
+ return (_jsx(AccordionBase.Root, { ...rootProps, className: cn('flex flex-col gap-2.5', className), children: items.map((item) => {
15
+ // content가 없으면(nullish/false) 펼칠 게 없으므로 chevron·Content를 렌더하지 않는다.
16
+ // (헤더 트리거 자체는 그대로 유지)
17
+ const hasContent = item.content != null && item.content !== false;
18
+ return (_jsxs(AccordionBase.Item, { value: item.value, disabled: item.disabled, className: cn(item.disabled && 'opacity-40'), children: [_jsxs(AccordionBase.Trigger, { className: "group text-neutral900 display16 bold text-left", children: [item.title, hasContent && (_jsxs("div", { className: "relative size-5 text-neutral500", children: [_jsx(ChevronDown, { className: cn('absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2', 'group-data-[state=open]:animate-fade-in', 'group-data-[state=closed]:animate-fade-out'), "aria-hidden": true }), _jsx(ChevronUp, { className: cn('absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2', 'group-data-[state=open]:animate-fade-out', 'group-data-[state=closed]:animate-fade-in'), "aria-hidden": true })] }))] }), hasContent && (_jsx(AccordionBase.Content, { className: "text-neutral700 display14", children: _jsx("div", { className: "pl-5 pt-2.5", children: item.content }) }))] }, item.value));
19
+ }) }));
20
+ };
21
+ export default LDAccordion;
@@ -1,4 +1,4 @@
1
- type AvatarSize = 'sm' | 'md' | 'lg';
1
+ type AvatarSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
2
2
  export interface LDAvatarProps {
3
3
  src?: string | null;
4
4
  alt?: string;
@@ -1 +1 @@
1
- {"version":3,"file":"LDAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/LDAvatar/LDAvatar.tsx"],"names":[],"mappings":"AAKA,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAqBrC,MAAM,WAAW,aAAa;IAC5B,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,QAAQ,GAAI,uCAMf,aAAa,4CAef,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"LDAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/LDAvatar/LDAvatar.tsx"],"names":[],"mappings":"AAKA,KAAK,UAAU,GACX,SAAS,GACT,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AA8Bb,MAAM,WAAW,aAAa;IAC5B,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,QAAQ,GAAI,uCAMf,aAAa,4CAef,CAAC;AAEF,eAAe,QAAQ,CAAC"}
@@ -3,21 +3,30 @@ import { UserRound } from 'lucide-react';
3
3
  import AvatarBase from './AvatarBase.js';
4
4
  import cn from '../../utils/cn.js';
5
5
  const SIZE_MAP = {
6
- sm: 'w-8 h-8',
7
- md: 'w-12 h-12',
8
- lg: 'w-16 h-16',
6
+ '2xsmall': 'w-2 h-2',
7
+ xsmall: 'w-4 h-4',
8
+ small: 'w-6 h-6',
9
+ medium: 'w-8 h-8',
10
+ large: 'w-12 h-12',
11
+ xlarge: 'w-16 h-16',
9
12
  };
10
13
  const IMAGE_SIZE_MAP = {
11
- sm: 32,
12
- md: 48,
13
- lg: 64,
14
+ '2xsmall': 8,
15
+ xsmall: 16,
16
+ small: 24,
17
+ medium: 32,
18
+ large: 48,
19
+ xlarge: 64,
14
20
  };
15
21
  const ICON_SIZE_MAP = {
16
- sm: 24,
17
- md: 32,
18
- lg: 40,
22
+ '2xsmall': 5,
23
+ xsmall: 10,
24
+ small: 15,
25
+ medium: 20,
26
+ large: 30,
27
+ xlarge: 40,
19
28
  };
20
- const LDAvatar = ({ src, alt = 'avatar', size = 'sm', className, style, }) => {
29
+ const LDAvatar = ({ src, alt = 'avatar', size = 'small', className, style, }) => {
21
30
  const px = IMAGE_SIZE_MAP[size];
22
31
  return (_jsxs(AvatarBase.Root, { src: src, style: style, className: cn(SIZE_MAP[size], className), children: [_jsx(AvatarBase.Image, { alt: alt, width: px, height: px }), _jsx(AvatarBase.Fallback, { className: "bg-mono100", children: _jsx(UserRound, { size: ICON_SIZE_MAP[size], className: "text-mono400" }) })] }));
23
32
  };
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDButton/ButtonBase.tsx"],"names":[],"mappings":"AA0BA,eAAO,MAAM,UAAU;UACP,KAAK,CAAC,WAAW;CAChC,CAAC;AAEF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"ButtonBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDButton/ButtonBase.tsx"],"names":[],"mappings":"AAsCA,eAAO,MAAM,UAAU;UACP,KAAK,CAAC,WAAW;CAChC,CAAC;AAEF,eAAe,UAAU,CAAC"}
@@ -1,8 +1,10 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import cn from '../../utils/cn.js';
3
- const Root = ({ as, className, children, ref, ...props }) => {
4
- const Component = as ?? 'button';
5
- return (_jsx(Component, { ref: ref, className: cn('relative inline-flex flex-row items-center justify-center', className), ...props, children: children }));
3
+ const Root = ({ as, className, children, ref, href, disabled, ...props }) => {
4
+ // as가 href를 가질 때 (a, NextLink 등) disabled=true일 경우 href를 제거하고 span으로 렌더링
5
+ const isDisabledLink = href && disabled;
6
+ const Component = isDisabledLink ? 'span' : (as ?? 'button');
7
+ return (_jsx(Component, { ref: ref, className: cn('relative inline-flex flex-row items-center justify-center', className), "aria-disabled": disabled || undefined, ...(!isDisabledLink && { href, disabled }), ...props, children: children }));
6
8
  };
7
9
  export const ButtonBase = {
8
10
  Root: Root,
@@ -1 +1 @@
1
- {"version":3,"file":"LDButton.d.ts","sourceRoot":"","sources":["../../../src/components/LDButton/LDButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAQpE,KAAK,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAC5D,KAAK,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAClD,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AACb,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AACzC,KAAK,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AA6E/C,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAOtD,CAAC;AAcF,KAAK,YAAY,GAAG;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI,yBAAyB,CAC1E,CAAC,EACD,YAAY,CACb,CAAC;AAEF,KAAK,eAAe,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAC5D,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KACpB,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,QAAA,MAAM,QAAQ,EAAE,eAoEf,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"LDButton.d.ts","sourceRoot":"","sources":["../../../src/components/LDButton/LDButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAQpE,KAAK,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAC5D,KAAK,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAClD,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AACb,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AACzC,KAAK,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AA+E/C,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAOtD,CAAC;AAcF,KAAK,YAAY,GAAG;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI,yBAAyB,CAC1E,CAAC,EACD,YAAY,CACb,CAAC;AAEF,KAAK,eAAe,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAC5D,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KACpB,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,QAAA,MAAM,QAAQ,EAAE,eAoEf,CAAC;AAEF,eAAe,QAAQ,CAAC"}
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import cn from '../../utils/cn.js';
3
- import ButtonBase from './ButtonBase.js';
4
3
  import { renderIcon } from '../../utils/renderIcon.js';
4
+ import ButtonBase from './ButtonBase.js';
5
5
  import ButtonSpinner from './ButtonSpinner.js';
6
6
  // ── 스타일 매핑 (static) ──
7
7
  const variantBaseClasses = {
@@ -11,9 +11,9 @@ const variantBaseClasses = {
11
11
  danger: 'bg-danger500 text-white',
12
12
  },
13
13
  outline: {
14
- neutral: 'bg-white outline outline-neutral100 text-neutral900',
15
- point: 'bg-white outline outline-lb500 text-lb500',
16
- danger: 'bg-white outline outline-danger500 text-danger500',
14
+ neutral: 'bg-white outline -outline-offset-1 outline-neutral100 text-neutral900',
15
+ point: 'bg-white outline -outline-offset-1 outline-lb500 text-lb500',
16
+ danger: 'bg-white outline -outline-offset-1 outline-danger500 text-danger500',
17
17
  },
18
18
  ghost: {
19
19
  neutral: 'bg-transparent text-neutral900',
@@ -50,7 +50,7 @@ const variantHoverClasses = {
50
50
  };
51
51
  const variantDisabledClasses = {
52
52
  solid: 'bg-mono300 text-white',
53
- outline: 'text-mono300 outline outline-neutral100',
53
+ outline: 'text-mono300 outline -outline-offset-1 outline-neutral100',
54
54
  ghost: 'text-mono300',
55
55
  link: 'text-mono300 underline underline-offset-[4px]',
56
56
  };
@@ -0,0 +1,17 @@
1
+ import { type DayPickerProps, type Matcher } from 'react-day-picker';
2
+ import { type CSSProperties } from 'react';
3
+ /** react-day-picker의 DayPickerProps를 확장한 캘린더 Base props */
4
+ export type CalendarBaseProps = DayPickerProps & {
5
+ className?: string;
6
+ style?: CSSProperties;
7
+ booked?: Matcher | Matcher[];
8
+ book?: Matcher | Matcher[];
9
+ };
10
+ /**
11
+ * CalendarBase — react-day-picker 래핑 레이어. 구조·동작·접근성만 담당한다.
12
+ * (component 오버라이드, booked/book 모디파이어 배선, formatters, 날짜 범위, 포커스 관리)
13
+ * 시각 스타일은 Custom 레이어(LDCalendar)가 `className`/`classNames`로 주입한다.
14
+ */
15
+ declare const CalendarBase: ({ className, style, classNames, captionLayout, formatters, components, book, booked, modifiers, showOutsideDays, ...props }: CalendarBaseProps) => import("react/jsx-runtime").JSX.Element;
16
+ export default CalendarBase;
17
+ //# sourceMappingURL=CalendarBase.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CalendarBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDCalendar/CalendarBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,OAAO,EACb,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,KAAK,aAAa,EAInB,MAAM,OAAO,CAAC;AAIf,2DAA2D;AAC3D,MAAM,MAAM,iBAAiB,GAAG,cAAc,GAAG;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;CAC5B,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,YAAY,GAAI,6HAYnB,iBAAiB,4CAmDnB,CAAC;AA0EF,eAAe,YAAY,CAAC"}
@@ -0,0 +1,49 @@
1
+ 'use client';
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { DayPicker, getDefaultClassNames, } from 'react-day-picker';
4
+ import { useRef, useEffect, } from 'react';
5
+ import cn from '../../utils/cn.js';
6
+ import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
7
+ /**
8
+ * CalendarBase — react-day-picker 래핑 레이어. 구조·동작·접근성만 담당한다.
9
+ * (component 오버라이드, booked/book 모디파이어 배선, formatters, 날짜 범위, 포커스 관리)
10
+ * 시각 스타일은 Custom 레이어(LDCalendar)가 `className`/`classNames`로 주입한다.
11
+ */
12
+ const CalendarBase = ({ className, style, classNames, captionLayout = 'label', formatters, components, book, booked, modifiers, showOutsideDays = true, ...props }) => {
13
+ return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, startMonth: new Date(1900, 0), endMonth: new Date(new Date().getFullYear() + 10, 11), style: style, className: className, captionLayout: captionLayout, formatters: {
14
+ formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }),
15
+ ...formatters,
16
+ }, classNames: classNames, modifiers: {
17
+ booked,
18
+ book,
19
+ ...modifiers,
20
+ }, components: {
21
+ Root: ({ className: rootClassName, rootRef, ...rootProps }) => (_jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(rootClassName), ...rootProps })),
22
+ Chevron: ({ className: chevronClassName, orientation }) => {
23
+ return orientation === 'left' ? (_jsx(ChevronLeft, { className: cn('size-4', chevronClassName) })) : orientation === 'right' ? (_jsx(ChevronRight, { className: cn('size-4', chevronClassName) })) : (_jsx(ChevronDown, { className: cn('size-4', chevronClassName) }));
24
+ },
25
+ DayButton: CalendarDayButton,
26
+ WeekNumber: ({ children, ...weekNumberProps }) => (_jsx("td", { ...weekNumberProps, children: _jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: children }) })),
27
+ ...components,
28
+ }, ...props }));
29
+ };
30
+ /** 날짜 셀 버튼 — 구조 + 접근성(data-속성, 포커스 관리) + book/booked 표시 요소 */
31
+ const CalendarDayButton = ({ className: btnClassName, day, modifiers, ...btnProps }) => {
32
+ const defaultClassNames = getDefaultClassNames();
33
+ const ref = useRef(null);
34
+ useEffect(() => {
35
+ if (modifiers.focused)
36
+ ref.current?.focus();
37
+ }, [modifiers.focused]);
38
+ return (_jsxs("button", { ref: ref, type: "button", "data-day": day.date.toLocaleDateString(), "data-selected-single": modifiers.selected &&
39
+ !modifiers.range_start &&
40
+ !modifiers.range_end &&
41
+ !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn('relative inline-flex items-center justify-center rounded-lg text-sm font-medium ld-transition outline-none cursor-pointer', 'hover:bg-tintBlue hover:text-lb500', 'flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1', 'leading-none font-normal', 'data-[selected-single=true]:bg-tintBlue data-[selected-single=true]:text-lb500', 'data-[selected-single=true]:animate-day-picker-color-in', 'data-[range-start=true]:bg-tintBlue data-[range-start=true]:text-lb500', 'data-[range-start=true]:animate-day-picker-color-in', 'data-[range-middle=true]:bg-mono50 data-[range-middle=true]:text-neutral500 data-[range-middle=true]:animate-day-range-picker-color-in', 'data-[range-end=true]:bg-tintBlue data-[range-end=true]:text-lb500', 'data-[range-end=true]:animate-day-picker-color-in', 'group-data-[focused=true]/day:relative', 'group-data-[focused=true]/day:z-10', '', modifiers.range_start &&
42
+ !modifiers.range_end &&
43
+ 'rounded-l-lg rounded-r-none', modifiers.range_end &&
44
+ !modifiers.range_start &&
45
+ 'rounded-l-none rounded-r-lg', modifiers.range_middle && 'rounded-none', modifiers.range_start && modifiers.range_end && 'rounded-lg',
46
+ // '[&>span]:text-xs [&>span]:opacity-70',
47
+ defaultClassNames.day, btnClassName), ...btnProps, children: [_jsx("span", { className: cn('relative z-10', modifiers.booked && 'line-through opacity-40 decoration-current'), children: btnProps.children }), modifiers.book && (_jsx("span", { className: "absolute bottom-1 size-1 rounded-full bg-lb500" }))] }));
48
+ };
49
+ export default CalendarBase;
@@ -1,17 +1,10 @@
1
- import { type DayPickerProps, type Matcher } from 'react-day-picker';
2
- import { type CSSProperties } from 'react';
3
- /** react-day-picker의 DayPickerProps를 확장한 캘린더 props */
4
- type LDCalendarProps = DayPickerProps & {
5
- className?: string;
6
- style?: CSSProperties;
7
- booked?: Matcher | Matcher[];
8
- book?: Matcher | Matcher[];
9
- };
1
+ import { type CalendarBaseProps } from './CalendarBase.js';
2
+ type LDCalendarProps = CalendarBaseProps;
10
3
  export declare const TimePicker: ({ value, onChange, className, }: {
11
4
  value?: string;
12
5
  onChange?: (time: string) => void;
13
6
  className?: string;
14
7
  }) => import("react/jsx-runtime").JSX.Element;
15
- declare const _default: import("react").MemoExoticComponent<({ className, style, classNames, captionLayout, formatters, components, book, booked, modifiers, showOutsideDays, ...props }: LDCalendarProps) => import("react/jsx-runtime").JSX.Element>;
16
- export default _default;
8
+ declare const LDCalendarMemo: import("react").MemoExoticComponent<({ className, classNames, captionLayout, ...props }: LDCalendarProps) => import("react/jsx-runtime").JSX.Element>;
9
+ export default LDCalendarMemo;
17
10
  //# sourceMappingURL=LDCalendar.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"LDCalendar.d.ts","sourceRoot":"","sources":["../../../src/components/LDCalendar/LDCalendar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,OAAO,EACb,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,KAAK,aAAa,EAMnB,MAAM,OAAO,CAAC;AAIf,sDAAsD;AACtD,KAAK,eAAe,GAAG,cAAc,GAAG;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;CAC5B,CAAC;AA+OF,eAAO,MAAM,UAAU,GAAI,iCAIxB;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,4CAgEA,CAAC;0LAzSC,eAAe;AAoXlB,wBAAgC"}
1
+ {"version":3,"file":"LDCalendar.d.ts","sourceRoot":"","sources":["../../../src/components/LDCalendar/LDCalendar.tsx"],"names":[],"mappings":"AAKA,OAAqB,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEtE,KAAK,eAAe,GAAG,iBAAiB,CAAC;AA8LzC,eAAO,MAAM,UAAU,GAAI,iCAIxB;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,4CAgEA,CAAC;AAEF,QAAA,MAAM,cAAc,2FAjQjB,eAAe,6CAiQqB,CAAC;AAGxC,eAAe,cAAc,CAAC"}
@@ -1,17 +1,14 @@
1
1
  'use client';
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { DayPicker, getDefaultClassNames, } from 'react-day-picker';
4
- import { memo, useRef, useEffect, useMemo, } from 'react';
3
+ import { getDefaultClassNames } from 'react-day-picker';
4
+ import { memo, useRef, useEffect, useMemo } from 'react';
5
5
  import cn from '../../utils/cn.js';
6
- import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
7
- const LDCalendar = ({ className, style, classNames, captionLayout = 'label', formatters, components, book, booked, modifiers, showOutsideDays = true, ...props }) => {
6
+ import CalendarBase from './CalendarBase.js';
7
+ const LDCalendar = ({ className, classNames, captionLayout = 'label', ...props }) => {
8
8
  const defaultClassNames = getDefaultClassNames();
9
- return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, startMonth: new Date(1900, 0), endMonth: new Date(new Date().getFullYear() + 10, 11), style: style, className: cn('bg-white group/calendar p-sm [--cell-size:--spacing(8)] w-fit',
9
+ return (_jsx(CalendarBase, { captionLayout: captionLayout, className: cn('bg-white group/calendar p-sm [--cell-size:--spacing(8)] w-fit',
10
10
  //rtl일때 버튼 아이콘 방향 전환
11
- String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, formatters: {
12
- formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }),
13
- ...formatters,
14
- }, classNames: {
11
+ String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), classNames: {
15
12
  root: cn(defaultClassNames.root),
16
13
  months: cn('flex gap-4 flex-col md:flex-row relative', defaultClassNames.months),
17
14
  month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
@@ -40,18 +37,6 @@ const LDCalendar = ({ className, style, classNames, captionLayout = 'label', for
40
37
  disabled: cn('text-neutral-500 opacity-50', defaultClassNames.disabled),
41
38
  hidden: cn('invisible', defaultClassNames.hidden),
42
39
  ...classNames,
43
- }, modifiers: {
44
- booked,
45
- book,
46
- ...modifiers,
47
- }, components: {
48
- Root: ({ className: rootClassName, rootRef, ...rootProps }) => (_jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(rootClassName), ...rootProps })),
49
- Chevron: ({ className: chevronClassName, orientation }) => {
50
- return orientation === 'left' ? (_jsx(ChevronLeft, { className: cn('size-4', chevronClassName) })) : orientation === 'right' ? (_jsx(ChevronRight, { className: cn('size-4', chevronClassName) })) : (_jsx(ChevronDown, { className: cn('size-4', chevronClassName) }));
51
- },
52
- DayButton: CalendarDayButton,
53
- WeekNumber: ({ children, ...weekNumberProps }) => (_jsx("td", { ...weekNumberProps, children: _jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: children }) })),
54
- ...components,
55
40
  }, ...props }));
56
41
  };
57
42
  const TIME_ITEM_HEIGHT = 32; // NOTE: px, h-8과 동일
@@ -97,22 +82,6 @@ export const TimePicker = ({ value, onChange, className, }) => {
97
82
  };
98
83
  return (_jsxs("div", { className: cn('flex h-auto items-stretch border-l border-neutral100 pr-1.5', className), children: [_jsx(TimeScrollColumn, { values: HOURS, selected: hours, ariaLabel: "\uC2DC", format: pad2, onSelect: (v) => commit(v, minutes, seconds, ampm), className: "border-r border-neutral100 pl-1" }), _jsx(TimeScrollColumn, { values: MINUTES, selected: minutes, ariaLabel: "\uBD84", format: pad2, onSelect: (v) => commit(hours, v, seconds, ampm), className: "border-r border-neutral100 pl-1" }), _jsx(TimeScrollColumn, { values: SECONDS, selected: seconds, ariaLabel: "\uCD08", format: pad2, onSelect: (v) => commit(hours, minutes, v, ampm), className: "border-r border-neutral100 pl-1" }), _jsx(TimeScrollColumn, { values: AMPM, selected: ampm, ariaLabel: "\uC624\uC804/\uC624\uD6C4", format: (v) => (v === 'am' ? '오전' : '오후'), onSelect: (v) => commit(hours, minutes, seconds, v), className: "pl-1" })] }));
99
84
  };
100
- const CalendarDayButton = ({ className: btnClassName, day, modifiers, ...btnProps }) => {
101
- const defaultClassNames = getDefaultClassNames();
102
- const ref = useRef(null);
103
- useEffect(() => {
104
- if (modifiers.focused)
105
- ref.current?.focus();
106
- }, [modifiers.focused]);
107
- return (_jsxs("button", { ref: ref, type: "button", "data-day": day.date.toLocaleDateString(), "data-selected-single": modifiers.selected &&
108
- !modifiers.range_start &&
109
- !modifiers.range_end &&
110
- !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn('relative inline-flex items-center justify-center rounded-lg text-sm font-medium ld-transition outline-none cursor-pointer', 'hover:bg-tintBlue hover:text-lb500', 'flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1', 'leading-none font-normal', 'data-[selected-single=true]:bg-tintBlue data-[selected-single=true]:text-lb500 data-[selected-single=true]:animate-day-picker-color-in', 'data-[range-start=true]:bg-tintBlue data-[range-start=true]:text-lb500 data-[range-start=true]:animate-day-picker-color-in', 'data-[range-middle=true]:bg-mono50 data-[range-middle=true]:text-neutral500 data-[range-middle=true]:animate-day-picker-color-in', 'data-[range-end=true]:bg-tintBlue data-[range-end=true]:text-lb500 data-[range-end=true]:animate-day-picker-color-in', 'group-data-[focused=true]/day:relative', 'group-data-[focused=true]/day:z-10', '', modifiers.range_start &&
111
- !modifiers.range_end &&
112
- 'rounded-l-lg rounded-r-none', modifiers.range_end &&
113
- !modifiers.range_start &&
114
- 'rounded-l-none rounded-r-lg', modifiers.range_middle && 'rounded-none', modifiers.range_start && modifiers.range_end && 'rounded-lg',
115
- // '[&>span]:text-xs [&>span]:opacity-70',
116
- defaultClassNames.day, btnClassName), ...btnProps, children: [_jsx("span", { className: cn('relative z-10', modifiers.booked && 'line-through opacity-40 decoration-current'), children: btnProps.children }), modifiers.book && (_jsx("span", { className: cn('absolute bottom-1.5 size-1 rounded-full bg-lb500', modifiers.selected && 'bg-white') }))] }));
117
- };
118
- export default memo(LDCalendar);
85
+ const LDCalendarMemo = memo(LDCalendar);
86
+ LDCalendarMemo.displayName = 'LDCalendar';
87
+ export default LDCalendarMemo;
@@ -65,8 +65,8 @@ export interface ContainerProps {
65
65
  children?: ReactNode;
66
66
  }
67
67
  export interface SlideProps {
68
- /** 슬라이드 크기(basis). 기본 '100%' ( 번에 하나) */
69
- size?: string;
68
+ /** 한 화면에 보일 슬라이드 수. 기본 1(=100%). `'auto'`면 슬라이드가 내용 폭대로(basis auto) */
69
+ slidesPerView?: number | 'auto';
70
70
  index?: number;
71
71
  total?: number;
72
72
  className?: string;
@@ -91,7 +91,7 @@ export declare const CarouselBase: {
91
91
  Root: ({ orientation, loop, autoplay, autoScroll, align, containScroll, options, gap, className, style, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
92
92
  Viewport: ({ className, children }: ViewportProps) => import("react/jsx-runtime").JSX.Element;
93
93
  Container: ({ className, style, children }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
94
- Slide: ({ size, index, total, className, style, children, }: SlideProps) => import("react/jsx-runtime").JSX.Element;
94
+ Slide: ({ slidesPerView, index, total, className, style, children, }: SlideProps) => import("react/jsx-runtime").JSX.Element;
95
95
  Prev: ({ className, children, ...props }: NavButtonProps) => import("react/jsx-runtime").JSX.Element;
96
96
  Next: ({ className, children, ...props }: NavButtonProps) => import("react/jsx-runtime").JSX.Element;
97
97
  Dots: ({ className, dotClassName }: DotsProps) => import("react/jsx-runtime").JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"CarouselBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDCarousel/CarouselBase.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"CarouselBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDCarousel/CarouselBase.tsx"],"names":[],"mappings":"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"}
@@ -35,11 +35,12 @@ const Root = ({ orientation = 'horizontal', loop = false, autoplay = false, auto
35
35
  }));
36
36
  }
37
37
  const [emblaRef, emblaApi] = useEmblaCarousel({
38
- ...options,
39
38
  align,
40
39
  loop,
41
40
  containScroll,
42
41
  axis: orientation === 'vertical' ? 'y' : 'x',
42
+ skipSnaps: true,
43
+ ...options,
43
44
  }, plugins);
44
45
  const [selectedIndex, setSelectedIndex] = useState(0);
45
46
  const [scrollSnaps, setScrollSnaps] = useState([]);
@@ -93,12 +94,15 @@ const Container = ({ className, style, children }) => {
93
94
  return (_jsx("div", { className: cn('flex', isVertical ? 'flex-col h-full' : 'flex-row', className),
94
95
  // embla 공식 방식: 간격을 Slide 패딩으로 주고, 첫 칸 패딩만 음수 마진으로 상쇄.
95
96
  // flex gap과 달리 loop 이음새(마지막↔처음)에도 간격이 유지됨.
97
+ // 세로 고정 높이에선 음수 마진(-gap)만큼 트랙 높이를 늘려야 마지막 슬라이드가 바닥까지 참.
96
98
  style: {
97
99
  [isVertical ? 'marginTop' : 'marginLeft']: -gap,
100
+ ...(isVertical && { height: `calc(100% + ${gap}px)` }),
98
101
  ...style,
99
102
  }, children: children }));
100
103
  };
101
- const Slide = ({ size = '100%', index, total, className, style, children, }) => {
104
+ const Slide = ({ slidesPerView = 'auto', index, total, className, style, children, }) => {
105
+ const size = slidesPerView === 'auto' ? 'auto' : `${100 / slidesPerView}%`;
102
106
  const { orientation, gap } = useCarouselContext();
103
107
  const isVertical = orientation === 'vertical';
104
108
  return (_jsx("div", { role: "group", "aria-roledescription": "slide", "aria-label": index != null && total != null ? `${index + 1} / ${total}` : undefined, className: cn('min-w-0 shrink-0 grow-0', className),
@@ -114,18 +118,16 @@ const Slide = ({ size = '100%', index, total, className, style, children, }) =>
114
118
  const Prev = ({ className, children, ...props }) => {
115
119
  const { scrollPrev, canScrollPrev, orientation } = useCarouselContext();
116
120
  return (_jsx("button", { type: "button", onClick: scrollPrev, disabled: !canScrollPrev, "aria-label": props['aria-label'] ?? '이전', className: cn('ld-carousel__nav', orientation === 'vertical' && 'ld-carousel__nav--vertical', className), children: children ??
117
- (orientation === 'vertical' ? (_jsx(ChevronUp, { size: 72, strokeWidth: 1.2 })) : (_jsx(ChevronLeft, { size: 72, strokeWidth: 1.2 }))) }));
121
+ (orientation === 'vertical' ? (_jsx(ChevronUp, { size: 32, strokeWidth: 1.4 })) : (_jsx(ChevronLeft, { size: 32, strokeWidth: 1.4 }))) }));
118
122
  };
119
123
  const Next = ({ className, children, ...props }) => {
120
124
  const { scrollNext, canScrollNext, orientation } = useCarouselContext();
121
125
  return (_jsx("button", { type: "button", onClick: scrollNext, disabled: !canScrollNext, "aria-label": props['aria-label'] ?? '다음', className: cn('ld-carousel__nav', orientation === 'vertical' && 'ld-carousel__nav--vertical', className), children: children ??
122
- (orientation === 'vertical' ? (_jsx(ChevronDown, { size: 72, strokeWidth: 1.2 })) : (_jsx(ChevronRight, { size: 72, strokeWidth: 1.2 }))) }));
126
+ (orientation === 'vertical' ? (_jsx(ChevronDown, { size: 32, strokeWidth: 1.4 })) : (_jsx(ChevronRight, { size: 32, strokeWidth: 1.4 }))) }));
123
127
  };
124
128
  const TopArrows = ({ className, children, ...props }) => {
125
129
  const { scrollNext, scrollPrev, canScrollNext, canScrollPrev, orientation } = useCarouselContext();
126
- return (_jsxs("div", { className: "flex flex-row gap-xs ml-auto", children: [_jsx("button", { type: "button", onClick: scrollPrev, disabled: !canScrollPrev, "aria-label": props['aria-label'] ?? '이전', className: cn('hover:bg-neutral50 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer border border-neutral200 rounded-full size-8 flex justify-center items-center ld-transition', className), children: children ??
127
- (orientation === 'vertical' ? (_jsx(ChevronDown, { size: 22, strokeWidth: 1.2 })) : (_jsx(ChevronLeft, { size: 22, strokeWidth: 1.2 }))) }), _jsx("button", { type: "button", onClick: scrollNext, disabled: !canScrollNext, "aria-label": props['aria-label'] ?? '다음', className: cn('hover:bg-neutral50 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer border border-neutral200 rounded-full size-8 flex justify-center items-center ld-transition', className), children: children ??
128
- (orientation === 'vertical' ? (_jsx(ChevronDown, { size: 22, strokeWidth: 1.2 })) : (_jsx(ChevronRight, { size: 22, strokeWidth: 1.2 }))) })] }));
130
+ return (_jsxs("div", { className: "flex flex-row ml-auto", children: [_jsx("button", { type: "button", onClick: scrollPrev, disabled: !canScrollPrev, "aria-label": props['aria-label'] ?? '이전', className: cn('disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer rounded-full size-8 flex justify-center items-center ld-transition', className), children: children ?? _jsx(ChevronLeft, { size: 22, strokeWidth: 1.2 }) }), _jsx("button", { type: "button", onClick: scrollNext, disabled: !canScrollNext, "aria-label": props['aria-label'] ?? '다음', className: cn('disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer rounded-full size-8 flex justify-center items-center ld-transition', className), children: children ?? _jsx(ChevronRight, { size: 22, strokeWidth: 1.2 }) })] }));
129
131
  };
130
132
  const Dots = ({ className, dotClassName }) => {
131
133
  const { scrollSnaps, selectedIndex, scrollTo } = useCarouselContext();
@@ -21,32 +21,31 @@ export interface LDCarouselProps {
21
21
  /** embla 세부 옵션. 스크롤이 너무 빠르면 `duration`을 키우세요(기본 25, 클수록 느리고 부드러움).
22
22
  * 드래그 민감도는 `dragThreshold`(드래그 인식 거리)·`dragFree`(스냅 없이 자유 스크롤)로 조절합니다. */
23
23
  options?: RootProps['options'];
24
- /** 이전/다음 화살표 표시. 기본 true */
25
- showArrows?: boolean;
26
- /** 하단 도트 페이지네이션 표시. 기본 true */
27
- showTopArrows?: boolean;
24
+ /** 이전/다음 화살표 위치. 'top'(상단)·'side'(좌우)·'none'(숨김). 기본 'top' */
25
+ arrowPosition?: 'top' | 'side' | 'none';
28
26
  showDots?: boolean;
29
27
  /** "현재 / 전체" 숫자 표시. 기본 false */
30
28
  showCounter?: boolean;
31
- /** 슬라이드 개의 크기(basis). 기본 '100%' */
32
- slideSize?: string;
29
+ /** 한 화면에 보일 슬라이드 수. 기본 1. `'auto'`면 각 슬라이드가 내용 폭대로 배치 */
30
+ slidesPerView?: number | 'auto';
33
31
  /** 슬라이드 사이 간격(Tailwind gap 단위 px). 기본 16 */
34
32
  gap?: number;
35
33
  className?: string;
36
34
  style?: CSSProperties;
37
35
  /** Viewport에 적용할 클래스 (세로 모드 높이 지정 등) */
38
36
  viewportClassName?: string;
37
+ slideClassName?: string;
39
38
  }
40
39
  /**
41
40
  * embla-carousel 기반 기본 캐러셀.
42
41
  * 고급 커스터마이징이 필요하면 `LDCarousel.Root` 등 compound API를 직접 조합하세요.
43
42
  */
44
43
  declare const LDCarousel: {
45
- ({ slides, orientation, loop, autoplay, autoScroll, align, containScroll, options, showArrows, showTopArrows, showDots, showCounter, slideSize, gap, className, style, viewportClassName, }: LDCarouselProps): import("react/jsx-runtime").JSX.Element;
44
+ ({ slides, orientation, loop, autoplay, autoScroll, align, containScroll, options, arrowPosition, showDots, showCounter, slidesPerView, gap, className, style, viewportClassName, slideClassName, }: LDCarouselProps): import("react/jsx-runtime").JSX.Element;
46
45
  Root: ({ orientation, loop, autoplay, autoScroll, align, containScroll, options, gap, className, style, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
47
46
  Viewport: ({ className, children }: import("./CarouselBase.js").ViewportProps) => import("react/jsx-runtime").JSX.Element;
48
47
  Container: ({ className, style, children }: import("./CarouselBase.js").ContainerProps) => import("react/jsx-runtime").JSX.Element;
49
- Slide: ({ size, index, total, className, style, children, }: import("./CarouselBase.js").SlideProps) => import("react/jsx-runtime").JSX.Element;
48
+ Slide: ({ slidesPerView, index, total, className, style, children, }: import("./CarouselBase.js").SlideProps) => import("react/jsx-runtime").JSX.Element;
50
49
  Prev: ({ className, children, ...props }: import("./CarouselBase.js").NavButtonProps) => import("react/jsx-runtime").JSX.Element;
51
50
  Next: ({ className, children, ...props }: import("./CarouselBase.js").NavButtonProps) => import("react/jsx-runtime").JSX.Element;
52
51
  Dots: ({ className, dotClassName }: import("./CarouselBase.js").DotsProps) => import("react/jsx-runtime").JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"LDCarousel.d.ts","sourceRoot":"","sources":["../../../src/components/LDCarousel/LDCarousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAqB,EACnB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACf,MAAM,gBAAgB,CAAC;AAGxB,MAAM,WAAW,eAAe;IAC9B,uBAAuB;IACvB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,gCAAgC;IAChC,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,sBAAsB;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,iBAAiB,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACrE,0DAA0D;IAC1D,UAAU,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IACrC,sCAAsC;IACtC,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC3B,8FAA8F;IAC9F,aAAa,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IAC3C;+EAC2E;IAC3E,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,4BAA4B;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+BAA+B;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;GAGG;AACH,QAAA,MAAM,UAAU;iMAkBb,eAAe;;;;;;;;;;CAwDjB,CAAC;AAYF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"LDCarousel.d.ts","sourceRoot":"","sources":["../../../src/components/LDCarousel/LDCarousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAqB,EACnB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACf,MAAM,gBAAgB,CAAC;AAGxB,MAAM,WAAW,eAAe;IAC9B,uBAAuB;IACvB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,gCAAgC;IAChC,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,sBAAsB;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,iBAAiB,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACrE,0DAA0D;IAC1D,UAAU,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IACrC,sCAAsC;IACtC,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC3B,8FAA8F;IAC9F,aAAa,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IAC3C;+EAC2E;IAC3E,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,8DAA8D;IAC9D,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yDAAyD;IACzD,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,QAAA,MAAM,UAAU;yMAkBb,eAAe;;;;;;;;;;CAyDjB,CAAC;AAYF,eAAe,UAAU,CAAC"}
@@ -6,10 +6,10 @@ import cn from '../../utils/cn.js';
6
6
  * embla-carousel 기반 기본 캐러셀.
7
7
  * 고급 커스터마이징이 필요하면 `LDCarousel.Root` 등 compound API를 직접 조합하세요.
8
8
  */
9
- const LDCarousel = ({ slides, orientation = 'horizontal', loop = false, autoplay = false, autoScroll = false, align = 'start', containScroll = 'trimSnaps', options, showArrows = false, showTopArrows = false, showDots = false, showCounter = false, slideSize = '100%', gap = 16, className, style, viewportClassName, }) => {
9
+ const LDCarousel = ({ slides, orientation = 'horizontal', loop = false, autoplay = false, autoScroll = false, align = 'start', containScroll = 'trimSnaps', options, arrowPosition = 'top', showDots = false, showCounter = false, slidesPerView = 'auto', gap = 16, className, style, viewportClassName, slideClassName, }) => {
10
10
  const isVertical = orientation === 'vertical';
11
11
  const total = slides.length;
12
- return (_jsx(CarouselBase.Root, { orientation: orientation, loop: loop, autoplay: autoplay, autoScroll: autoScroll, align: align, containScroll: containScroll, options: options, gap: gap, className: className, style: style, children: _jsxs("div", { className: "flex flex-col gap-3", children: [showTopArrows && _jsx(CarouselBase.TopArrows, {}), _jsxs("div", { className: cn('flex items-center gap-3 w-full relative', isVertical && 'flex-col'), children: [showArrows && _jsx(CarouselBase.Prev, {}), _jsx(CarouselBase.Viewport, { className: cn('w-full', viewportClassName), children: _jsx(CarouselBase.Container, { children: slides.map((slide, i) => (_jsx(CarouselBase.Slide, { size: slideSize, index: i, total: total, children: slide }, i))) }) }), showArrows && _jsx(CarouselBase.Next, {})] }), (showDots || showCounter) && (_jsxs("div", { className: "flex items-center justify-center gap-3", children: [showDots && (_jsx(CarouselBase.Dots, { className: isVertical ? 'flex-col' : undefined })), showCounter && _jsx(CarouselBase.Counter, {})] }))] }) }));
12
+ return (_jsx(CarouselBase.Root, { orientation: orientation, loop: loop, autoplay: autoplay, autoScroll: autoScroll, align: align, containScroll: containScroll, options: options, gap: gap, className: className, style: style, children: _jsxs("div", { className: "flex flex-col gap-3", children: [arrowPosition === 'top' && _jsx(CarouselBase.TopArrows, {}), _jsxs("div", { className: cn('flex items-center gap-3 w-full relative', isVertical && 'flex-col'), children: [arrowPosition === 'side' && _jsx(CarouselBase.Prev, {}), _jsx(CarouselBase.Viewport, { className: cn('w-full', viewportClassName), children: _jsx(CarouselBase.Container, { children: slides.map((slide, i) => (_jsx(CarouselBase.Slide, { slidesPerView: slidesPerView, index: i, total: total, className: slideClassName, children: slide }, i))) }) }), arrowPosition === 'side' && _jsx(CarouselBase.Next, {})] }), (showDots || showCounter) && (_jsxs("div", { className: "flex items-center justify-center gap-3", children: [showDots && (_jsx(CarouselBase.Dots, { className: isVertical ? 'flex-col' : undefined })), showCounter && _jsx(CarouselBase.Counter, {})] }))] }) }));
13
13
  };
14
14
  LDCarousel.Root = CarouselBase.Root;
15
15
  LDCarousel.Viewport = CarouselBase.Viewport;
@@ -26,7 +26,7 @@ const Root = ({ checked, defaultChecked = false, onCheckedChange, disabled = fal
26
26
  disabled,
27
27
  isFocused,
28
28
  setIsFocused,
29
- }, children: _jsx("label", { style: style, onClick: (e) => e.stopPropagation(), className: cn('flex flex-row w-fit gap-2.5 shrink-0', disabled ? 'cursor-not-allowed' : 'cursor-pointer', resolvedClassName), children: children }) }));
29
+ }, children: _jsx("label", { style: style, onClick: (e) => e.stopPropagation(), className: cn('flex flex-row w-fit shrink-0', disabled ? 'cursor-not-allowed' : 'cursor-pointer', resolvedClassName), children: children }) }));
30
30
  };
31
31
  const HiddenInput = ({ ref, onFocus, onBlur, onChange, ...props }) => {
32
32
  const { checked, onCheckedChange, disabled, setIsFocused } = useCheckboxContext();