@loword/loword-design-system 0.0.7 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Icon/LucideIcon.d.ts +2 -1
- package/dist/components/Icon/LucideIcon.d.ts.map +1 -1
- package/dist/components/Icon/LucideIcon.js +2 -2
- package/dist/components/LDAutoComplete/AutoCompleteBase.js +1 -1
- package/dist/components/LDBreadCrumb/LDBreadCrumb.js +7 -7
- package/dist/components/LDButton/LDButton.d.ts +1 -0
- package/dist/components/LDButton/LDButton.d.ts.map +1 -1
- package/dist/components/LDButton/LDButton.js +3 -3
- package/dist/components/LDCarousel/CarouselBase.d.ts +6 -2
- package/dist/components/LDCarousel/CarouselBase.d.ts.map +1 -1
- package/dist/components/LDCarousel/CarouselBase.js +11 -5
- package/dist/components/LDCarousel/LDCarousel.d.ts +9 -2
- package/dist/components/LDCarousel/LDCarousel.d.ts.map +1 -1
- package/dist/components/LDCarousel/LDCarousel.js +3 -2
- package/dist/components/LDCheckbox/FormCheckbox.js +2 -2
- package/dist/components/LDCheckbox/FormCheckboxGroup.js +2 -2
- package/dist/components/LDCheckbox/LDCheckbox.d.ts.map +1 -1
- package/dist/components/LDCheckbox/LDCheckbox.js +7 -1
- package/dist/components/LDDatePicker/FormDatePicker.js +2 -2
- package/dist/components/LDDatePicker/LDDatePicker.d.ts.map +1 -1
- package/dist/components/LDDatePicker/LDDatePicker.js +1 -3
- package/dist/components/LDDateRangePicker/FormDateRangePicker.js +2 -2
- package/dist/components/LDDateRangePicker/LDDateRangePicker.js +8 -8
- package/dist/components/LDFileUpload/FileUploadBase.d.ts +6 -3
- package/dist/components/LDFileUpload/FileUploadBase.d.ts.map +1 -1
- package/dist/components/LDFileUpload/FileUploadBase.js +28 -11
- package/dist/components/LDFileUpload/LDFileUpload.d.ts +2 -0
- package/dist/components/LDFileUpload/LDFileUpload.d.ts.map +1 -1
- package/dist/components/LDFileUpload/LDFileUpload.js +1 -1
- package/dist/components/LDFileUpload/LDFileUploadList.d.ts +2 -0
- package/dist/components/LDFileUpload/LDFileUploadList.d.ts.map +1 -1
- package/dist/components/LDFileUpload/LDFileUploadList.js +1 -1
- package/dist/components/LDFileUpload/LDImageUpload.d.ts +2 -0
- package/dist/components/LDFileUpload/LDImageUpload.d.ts.map +1 -1
- package/dist/components/LDFileUpload/LDImageUpload.js +1 -1
- package/dist/components/LDFileUpload/LDImageUploadList.d.ts +2 -0
- package/dist/components/LDFileUpload/LDImageUploadList.d.ts.map +1 -1
- package/dist/components/LDFileUpload/LDImageUploadList.js +1 -1
- package/dist/components/LDForm/LDForm.d.ts +21 -0
- package/dist/components/LDForm/LDForm.d.ts.map +1 -0
- package/dist/components/{Form/Form.js → LDForm/LDForm.js} +3 -3
- package/dist/components/LDForm/LDFormErrorMessage.d.ts +9 -0
- package/dist/components/LDForm/LDFormErrorMessage.d.ts.map +1 -0
- package/dist/components/LDForm/LDFormErrorMessage.js +17 -0
- package/dist/components/{Form/FormField.d.ts → LDForm/LDFormField.d.ts} +6 -6
- package/dist/components/LDForm/LDFormField.d.ts.map +1 -0
- package/dist/components/{Form/FormField.js → LDForm/LDFormField.js} +2 -2
- package/dist/components/LDInput/LDFormInput.d.ts +15 -0
- package/dist/components/LDInput/LDFormInput.d.ts.map +1 -0
- package/dist/components/LDInput/{FormInput.js → LDFormInput.js} +12 -7
- package/dist/components/LDInput/LDInput.d.ts.map +1 -1
- package/dist/components/LDInput/LDInput.js +21 -13
- package/dist/components/LDPagination/PaginationBase.d.ts.map +1 -1
- package/dist/components/LDPagination/PaginationBase.js +7 -7
- package/dist/components/LDPopover/LDPopover.js +3 -3
- package/dist/components/LDPopover/PopoverBase.js +1 -1
- package/dist/components/LDRadio/FormRadioGroup.js +2 -2
- package/dist/components/LDRadio/LDRadio.d.ts.map +1 -1
- package/dist/components/LDRadio/LDRadio.js +3 -5
- package/dist/components/LDRadio/RadioBase.d.ts.map +1 -1
- package/dist/components/LDRadio/RadioBase.js +1 -3
- package/dist/components/LDSelect/FormMultiSelect.js +2 -2
- package/dist/components/LDSelect/FormSelect.js +2 -2
- package/dist/components/LDSelect/LDMultiSelect.js +3 -3
- package/dist/components/LDSelect/LDSelect.js +1 -1
- package/dist/components/LDTable/LDCollapsibleTanstackTable.d.ts +26 -0
- package/dist/components/LDTable/LDCollapsibleTanstackTable.d.ts.map +1 -0
- package/dist/components/LDTable/LDCollapsibleTanstackTable.js +38 -0
- package/dist/components/LDTable/LDTable.d.ts +5 -1
- package/dist/components/LDTable/LDTable.d.ts.map +1 -1
- package/dist/components/LDTable/LDTable.js +13 -17
- package/dist/components/LDTable/LDTanstackTable.d.ts +15 -13
- package/dist/components/LDTable/LDTanstackTable.d.ts.map +1 -1
- package/dist/components/LDTable/LDTanstackTable.js +21 -23
- package/dist/components/LDTable/TableField.d.ts +17 -5
- package/dist/components/LDTable/TableField.d.ts.map +1 -1
- package/dist/components/LDTable/TableField.js +16 -6
- package/dist/components/LDTeamHistory/LDTeamHistory.d.ts +12 -0
- package/dist/components/LDTeamHistory/LDTeamHistory.d.ts.map +1 -0
- package/dist/components/LDTeamHistory/LDTeamHistory.js +14 -0
- package/dist/components/{LDAnchor/AnchorBase.d.ts → LDTeamHistory/TeamHistoryBase.d.ts} +12 -6
- package/dist/components/LDTeamHistory/TeamHistoryBase.d.ts.map +1 -0
- package/dist/components/LDTeamHistory/TeamHistoryBase.js +108 -0
- package/dist/components/LDTextarea/FormTextarea.d.ts +14 -0
- package/dist/components/LDTextarea/FormTextarea.d.ts.map +1 -0
- package/dist/components/LDTextarea/FormTextarea.js +10 -0
- package/dist/components/LDTextarea/LDTextarea.d.ts +26 -0
- package/dist/components/LDTextarea/LDTextarea.d.ts.map +1 -0
- package/dist/components/LDTextarea/LDTextarea.js +163 -0
- package/dist/components/LDTimePicker/FormTimePicker.js +2 -2
- package/dist/components/LDTimePicker/LDTimePicker.js +4 -4
- package/dist/components/LDToggleButton/FormToggleButton.js +2 -2
- package/dist/components/LDTooltip/TooltipBase.js +1 -1
- package/dist/index.css +914 -684
- package/dist/index.d.ts +8 -5
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +10 -6
- package/dist/utils/renderIcon.d.ts +1 -1
- package/package.json +23 -21
- package/src/styles/carousel.css +54 -7
- package/src/styles/components/auto-complete.css +66 -64
- package/src/styles/components/badge.css +29 -27
- package/src/styles/components/bread-crumb.css +49 -17
- package/src/styles/components/button.css +146 -144
- package/src/styles/components/icon.css +25 -23
- package/src/styles/components/index.css +1 -0
- package/src/styles/components/input.css +43 -41
- package/src/styles/components/modal.css +14 -12
- package/src/styles/components/shared.css +2 -2
- package/src/styles/components/spinner.css +25 -23
- package/src/styles/components/team-history.css +10 -0
- package/src/styles/focus.css +1 -1
- package/src/styles/slider.css +58 -54
- package/dist/components/Form/Form.d.ts +0 -21
- package/dist/components/Form/Form.d.ts.map +0 -1
- package/dist/components/Form/FormErrorMessage.d.ts +0 -9
- package/dist/components/Form/FormErrorMessage.d.ts.map +0 -1
- package/dist/components/Form/FormErrorMessage.js +0 -6
- package/dist/components/Form/FormField.d.ts.map +0 -1
- package/dist/components/LDAnchor/AnchorBase.d.ts.map +0 -1
- package/dist/components/LDAnchor/AnchorBase.js +0 -69
- package/dist/components/LDAnchor/LDAnchor.d.ts +0 -10
- package/dist/components/LDAnchor/LDAnchor.d.ts.map +0 -1
- package/dist/components/LDAnchor/LDAnchor.js +0 -14
- package/dist/components/LDInput/FormInput.d.ts +0 -15
- package/dist/components/LDInput/FormInput.d.ts.map +0 -1
|
@@ -4,8 +4,9 @@ export type IconName = keyof typeof LUCIDE_ICONS;
|
|
|
4
4
|
interface ILucideIconProps {
|
|
5
5
|
name: IconName;
|
|
6
6
|
className?: string;
|
|
7
|
+
strokeWidth?: number;
|
|
7
8
|
size?: number;
|
|
8
9
|
}
|
|
9
|
-
declare const LucideIcon: ({ name, className, size }: ILucideIconProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
10
|
+
declare const LucideIcon: ({ name, strokeWidth, className, size, }: ILucideIconProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
10
11
|
export default LucideIcon;
|
|
11
12
|
//# sourceMappingURL=LucideIcon.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LucideIcon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/LucideIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EA0BL,KAAK,UAAU,IAAI,cAAc,EAalC,MAAM,cAAc,CAAC;AAEtB,QAAA,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAsChD,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,YAAY,CAAC;AAEjD,UAAU,gBAAgB;IACxB,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,UAAU,GAAI,
|
|
1
|
+
{"version":3,"file":"LucideIcon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/LucideIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EA0BL,KAAK,UAAU,IAAI,cAAc,EAalC,MAAM,cAAc,CAAC;AAEtB,QAAA,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAsChD,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,YAAY,CAAC;AAEjD,UAAU,gBAAgB;IACxB,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,UAAU,GAAI,yCAKjB,gBAAgB,mDAclB,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -39,11 +39,11 @@ const LUCIDE_ICONS = {
|
|
|
39
39
|
fileArchive: FileArchive,
|
|
40
40
|
repeat: Repeat,
|
|
41
41
|
};
|
|
42
|
-
const LucideIcon = ({ name, className, size }) => {
|
|
42
|
+
const LucideIcon = ({ name, strokeWidth, className, size, }) => {
|
|
43
43
|
const IconComponent = LUCIDE_ICONS[name];
|
|
44
44
|
if (!IconComponent) {
|
|
45
45
|
return null;
|
|
46
46
|
}
|
|
47
|
-
return _jsx(IconComponent, { className: className, size: size });
|
|
47
|
+
return (_jsx(IconComponent, { className: className, strokeWidth: strokeWidth, size: size }));
|
|
48
48
|
};
|
|
49
49
|
export default LucideIcon;
|
|
@@ -147,7 +147,7 @@ const Input = ({ placeholder = '검색어를 입력하세요', size = 'medium',
|
|
|
147
147
|
return (_jsx("input", { type: "text", placeholder: placeholder, value: query, onChange: (e) => handleChange(e.target.value), onKeyDown: handleKeyDown, onCompositionStart: () => setIsComposing(true), onCompositionEnd: () => setIsComposing(false), onFocus: () => {
|
|
148
148
|
if (query)
|
|
149
149
|
setIsOpen(true);
|
|
150
|
-
}, className: cn('w-full rounded-[5px]
|
|
150
|
+
}, className: cn('w-full rounded-[5px] border-transparent bg-neutral50 outline-2', inputSizeClasses[size], isOpen ? 'bg-tintBlue outline-lb500' : 'outline-0', className) }));
|
|
151
151
|
};
|
|
152
152
|
const List = ({ size = 'medium', className, emptyMessage = '조회하신 데이터가 없습니다.', }) => {
|
|
153
153
|
const { isOpen, isLoading, options } = useAutoCompleteContext();
|
|
@@ -21,17 +21,17 @@ const iconSizeClasses = {
|
|
|
21
21
|
xlarge: 'icon-xl',
|
|
22
22
|
};
|
|
23
23
|
const separatorIconSizeClasses = {
|
|
24
|
-
'2xsmall': '
|
|
25
|
-
xsmall: '
|
|
26
|
-
small: '
|
|
27
|
-
medium: '
|
|
28
|
-
large: '
|
|
29
|
-
xlarge: '
|
|
24
|
+
'2xsmall': 'bread-crumb-sep-2xs',
|
|
25
|
+
xsmall: 'bread-crumb-sep-xs',
|
|
26
|
+
small: 'bread-crumb-sep-sm',
|
|
27
|
+
medium: 'bread-crumb-sep-md',
|
|
28
|
+
large: 'bread-crumb-sep-lg',
|
|
29
|
+
xlarge: 'bread-crumb-sep-xl',
|
|
30
30
|
};
|
|
31
31
|
const LDBreadCrumb = ({ items, size = 'small', separator, className, }) => {
|
|
32
32
|
return (_jsx(BreadCrumbBase.Root, { children: _jsx(BreadCrumbBase.List, { className: className, children: items.map((item, index) => {
|
|
33
33
|
const isCurrent = index === items.length - 1;
|
|
34
|
-
return (_jsxs(React.Fragment, { children: [_jsx(BreadCrumbBase.Item, { className: "gap-xs", children: !item.href ? (_jsxs("span", { "aria-current": "page", className: cn(textSizeClasses[size], 'flex items-center text-neutral700 gap-0.5'), children: [renderIcon(item.icon, iconSizeClasses[size]), item.label] })) : (_jsx(LDButton, { as: "a", href: item.href, variant: "ghost", color: "neutral", size: size, leftIcon: item.icon, className: "h-auto
|
|
34
|
+
return (_jsxs(React.Fragment, { children: [_jsx(BreadCrumbBase.Item, { className: "gap-xs", children: !item.href ? (_jsxs("span", { "aria-current": "page", className: cn(textSizeClasses[size], 'flex items-center text-neutral700 gap-0.5'), children: [renderIcon(item.icon, iconSizeClasses[size]), item.label] })) : (_jsx(LDButton, { as: "a", href: item.href, variant: "ghost", color: "neutral", size: size, leftIcon: item.icon, className: "h-auto px-0 min-w-0 hover:bg-transparent active:bg-transparent text-neutral700 regular flex flex-row gap-0.5", children: item.label })) }), !isCurrent && (_jsx(BreadCrumbBase.Separator, { className: separatorIconSizeClasses[size], children: separator }))] }, `${item.label}-${index}`));
|
|
35
35
|
}) }) }));
|
|
36
36
|
};
|
|
37
37
|
export default LDBreadCrumb;
|
|
@@ -18,6 +18,7 @@ type _ButtonProps = {
|
|
|
18
18
|
leftIcon?: IconName | React.ReactNode;
|
|
19
19
|
rightIcon?: IconName | React.ReactNode;
|
|
20
20
|
compact?: boolean;
|
|
21
|
+
disabled?: boolean;
|
|
21
22
|
};
|
|
22
23
|
export type LDButtonProps<T extends ElementType> = PolymorphicComponentProps<T, _ButtonProps>;
|
|
23
24
|
type ButtonComponent = <T extends React.ElementType = 'button'>(props: LDButtonProps<T>) => React.ReactElement | null;
|
|
@@ -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;AACpE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAQnD,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;AAkG/C,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,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC;IACtC,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,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;AACpE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAQnD,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;AAkG/C,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,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC;IACtC,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC;IACvC,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"}
|
|
@@ -11,17 +11,17 @@ const variantBaseClasses = {
|
|
|
11
11
|
danger: 'bg-danger500 text-white',
|
|
12
12
|
},
|
|
13
13
|
outline: {
|
|
14
|
-
neutral: 'bg-white outline outline-
|
|
14
|
+
neutral: 'bg-white outline outline-neutral100 text-neutral500',
|
|
15
15
|
point: 'bg-white outline outline-lb500 text-lb500',
|
|
16
16
|
danger: 'bg-white outline outline-danger500 text-danger500',
|
|
17
17
|
},
|
|
18
18
|
ghost: {
|
|
19
|
-
neutral: 'bg-transparent',
|
|
19
|
+
neutral: 'bg-transparent text-neutral500',
|
|
20
20
|
point: 'bg-transparent text-lb500',
|
|
21
21
|
danger: 'bg-transparent text-danger500',
|
|
22
22
|
},
|
|
23
23
|
link: {
|
|
24
|
-
neutral: 'bg-transparent underline underline-offset-[4px]',
|
|
24
|
+
neutral: 'bg-transparent underline underline-offset-[4px] text-neutral500',
|
|
25
25
|
point: 'bg-transparent text-lb500 underline underline-offset-[4px]',
|
|
26
26
|
danger: 'bg-transparent text-danger500 underline underline-offset-[4px]',
|
|
27
27
|
},
|
|
@@ -44,8 +44,11 @@ export interface RootProps {
|
|
|
44
44
|
autoScroll?: boolean | AutoScrollConfig;
|
|
45
45
|
/** 선택된 슬라이드가 viewport의 어디에 정렬되는지. 기본 'start'(왼쪽 끝 붙음) */
|
|
46
46
|
align?: 'start' | 'center' | 'end';
|
|
47
|
+
/** 양 끝 빈 공간 처리 방식. 기본 'trimSnaps'(끝 여백 없도록 정렬 보정).
|
|
48
|
+
* 'keepSnaps'(여백 보정하되 슬라이드마다 개별 스냅 유지), false(보정 없이 일관 정렬·끝 여백 허용). */
|
|
49
|
+
containScroll?: 'trimSnaps' | 'keepSnaps' | false;
|
|
47
50
|
/** embla 추가 옵션 (dragFree, slidesToScroll 등) */
|
|
48
|
-
options?: Omit<EmblaOptionsType, 'loop' | 'axis' | 'align'>;
|
|
51
|
+
options?: Omit<EmblaOptionsType, 'loop' | 'axis' | 'align' | 'containScroll'>;
|
|
49
52
|
/** 슬라이드 간 간격(px). 기본 16 */
|
|
50
53
|
gap?: number;
|
|
51
54
|
className?: string;
|
|
@@ -85,7 +88,7 @@ export interface CounterProps {
|
|
|
85
88
|
format?: (current: number, total: number) => string;
|
|
86
89
|
}
|
|
87
90
|
export declare const CarouselBase: {
|
|
88
|
-
Root: ({ orientation, loop, autoplay, autoScroll, align, options, gap, className, style, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
|
|
91
|
+
Root: ({ orientation, loop, autoplay, autoScroll, align, containScroll, options, gap, className, style, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
|
|
89
92
|
Viewport: ({ className, children }: ViewportProps) => import("react/jsx-runtime").JSX.Element;
|
|
90
93
|
Container: ({ className, style, children }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
|
|
91
94
|
Slide: ({ size, index, total, className, style, children, }: SlideProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -93,6 +96,7 @@ export declare const CarouselBase: {
|
|
|
93
96
|
Next: ({ className, children, ...props }: NavButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
94
97
|
Dots: ({ className, dotClassName }: DotsProps) => import("react/jsx-runtime").JSX.Element;
|
|
95
98
|
Counter: ({ className, format }: CounterProps) => import("react/jsx-runtime").JSX.Element;
|
|
99
|
+
TopArrows: ({ className, children, ...props }: NavButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
96
100
|
};
|
|
97
101
|
export default CarouselBase;
|
|
98
102
|
//# sourceMappingURL=CarouselBase.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDCarousel/CarouselBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AACf,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AAGpD,OAAO,KAAK,EACV,iBAAiB,EACjB,gBAAgB,EAEjB,MAAM,gBAAgB,CAAC;AAKxB,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE5D,UAAU,cAAc;IACtB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,UAAU,gBAAgB;IACxB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,SAAS,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACnC,sCAAsC;IACtC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gCAAgC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAGD,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IACjD,QAAQ,EAAE,iBAAiB,GAAG,SAAS,CAAC;IACxC,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,mBAAmB,CAAC;IACjC,mEAAmE;IACnE,GAAG,EAAE,MAAM,CAAC;CACb;AAaD,+CAA+C;AAC/C,eAAO,MAAM,WAAW,2BAAqB,CAAC;AAG9C,MAAM,WAAW,SAAS;IACxB,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IACpC;qEACiE;IACjE,UAAU,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAC;IACxC,yDAAyD;IACzD,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,+CAA+C;IAC/C,OAAO,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"CarouselBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDCarousel/CarouselBase.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { createContext, useCallback, useContext, useEffect, useState, } from 'react';
|
|
4
4
|
import useEmblaCarousel from 'embla-carousel-react';
|
|
5
5
|
import Autoplay from 'embla-carousel-autoplay';
|
|
@@ -15,7 +15,7 @@ const useCarouselContext = () => {
|
|
|
15
15
|
};
|
|
16
16
|
/** 외부에서 캐러셀 컨트롤(emblaApi)에 접근하고 싶을 때 사용하는 훅 */
|
|
17
17
|
export const useCarousel = useCarouselContext;
|
|
18
|
-
const Root = ({ orientation = 'horizontal', loop = false, autoplay = false, autoScroll = false, align = 'start', options, gap = 16, className, style, children, }) => {
|
|
18
|
+
const Root = ({ orientation = 'horizontal', loop = false, autoplay = false, autoScroll = false, align = 'start', containScroll = 'trimSnaps', options, gap = 16, className, style, children, }) => {
|
|
19
19
|
// 자동 이동 플러그인 조립. autoScroll(연속 흐름)이 설정되면 autoplay(스텝형)보다 우선.
|
|
20
20
|
const plugins = [];
|
|
21
21
|
if (autoScroll) {
|
|
@@ -38,6 +38,7 @@ const Root = ({ orientation = 'horizontal', loop = false, autoplay = false, auto
|
|
|
38
38
|
...options,
|
|
39
39
|
align,
|
|
40
40
|
loop,
|
|
41
|
+
containScroll,
|
|
41
42
|
axis: orientation === 'vertical' ? 'y' : 'x',
|
|
42
43
|
}, plugins);
|
|
43
44
|
const [selectedIndex, setSelectedIndex] = useState(0);
|
|
@@ -84,7 +85,7 @@ const Root = ({ orientation = 'horizontal', loop = false, autoplay = false, auto
|
|
|
84
85
|
};
|
|
85
86
|
const Viewport = ({ className, children }) => {
|
|
86
87
|
const { emblaRef } = useCarouselContext();
|
|
87
|
-
return (_jsx("div", { ref: emblaRef, className: cn('ld-carousel__viewport', className), children: children }));
|
|
88
|
+
return (_jsx("div", { ref: emblaRef, className: cn('ld-carousel__viewport relative', className), children: children }));
|
|
88
89
|
};
|
|
89
90
|
const Container = ({ className, style, children }) => {
|
|
90
91
|
const { orientation, gap } = useCarouselContext();
|
|
@@ -112,11 +113,15 @@ const Slide = ({ size = '100%', index, total, className, style, children, }) =>
|
|
|
112
113
|
};
|
|
113
114
|
const Prev = ({ className, children, ...props }) => {
|
|
114
115
|
const { scrollPrev, canScrollPrev, orientation } = useCarouselContext();
|
|
115
|
-
return (_jsx("button", { type: "button", onClick: scrollPrev, disabled: !canScrollPrev, "aria-label": props['aria-label'] ?? '이전', className: cn('ld-carousel__nav
|
|
116
|
+
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 ?? (_jsx(LucideIcon, { name: orientation === 'vertical' ? 'chevronUp' : 'chevronLeft', size: 72, strokeWidth: 1.2 })) }));
|
|
116
117
|
};
|
|
117
118
|
const Next = ({ className, children, ...props }) => {
|
|
118
119
|
const { scrollNext, canScrollNext, orientation } = useCarouselContext();
|
|
119
|
-
return (_jsx("button", { type: "button", onClick: scrollNext, disabled: !canScrollNext, "aria-label": props['aria-label'] ?? '다음', className: cn('ld-carousel__nav
|
|
120
|
+
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 ?? (_jsx(LucideIcon, { name: orientation === 'vertical' ? 'chevronDown' : 'chevronRight', size: 72, strokeWidth: 1.2 })) }));
|
|
121
|
+
};
|
|
122
|
+
const TopArrows = ({ className, children, ...props }) => {
|
|
123
|
+
const { scrollNext, scrollPrev, canScrollNext, canScrollPrev, orientation } = useCarouselContext();
|
|
124
|
+
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 ?? (_jsx(LucideIcon, { name: orientation === 'vertical' ? 'chevronDown' : 'chevronLeft', strokeWidth: 1.2, size: 22 })) }), _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 ?? (_jsx(LucideIcon, { name: orientation === 'vertical' ? 'chevronDown' : 'chevronRight', strokeWidth: 1.2, size: 22 })) })] }));
|
|
120
125
|
};
|
|
121
126
|
const Dots = ({ className, dotClassName }) => {
|
|
122
127
|
const { scrollSnaps, selectedIndex, scrollTo } = useCarouselContext();
|
|
@@ -140,5 +145,6 @@ export const CarouselBase = {
|
|
|
140
145
|
Next,
|
|
141
146
|
Dots,
|
|
142
147
|
Counter,
|
|
148
|
+
TopArrows,
|
|
143
149
|
};
|
|
144
150
|
export default CarouselBase;
|
|
@@ -16,9 +16,15 @@ export interface LDCarouselProps {
|
|
|
16
16
|
autoScroll?: RootProps['autoScroll'];
|
|
17
17
|
/** 슬라이드 정렬 위치. 기본 'start'(왼쪽 끝 붙음) */
|
|
18
18
|
align?: RootProps['align'];
|
|
19
|
+
/** 양 끝 빈 공간 처리. 기본 'trimSnaps'(끝 여백 없게 보정) / 'keepSnaps'(보정+개별 스냅 유지) / false(보정 없이 일관 정렬) */
|
|
20
|
+
containScroll?: RootProps['containScroll'];
|
|
21
|
+
/** embla 세부 옵션. 스크롤이 너무 빠르면 `duration`을 키우세요(기본 25, 클수록 느리고 부드러움).
|
|
22
|
+
* 드래그 민감도는 `dragThreshold`(드래그 인식 거리)·`dragFree`(스냅 없이 자유 스크롤)로 조절합니다. */
|
|
23
|
+
options?: RootProps['options'];
|
|
19
24
|
/** 이전/다음 화살표 표시. 기본 true */
|
|
20
25
|
showArrows?: boolean;
|
|
21
26
|
/** 하단 도트 페이지네이션 표시. 기본 true */
|
|
27
|
+
showTopArrows?: boolean;
|
|
22
28
|
showDots?: boolean;
|
|
23
29
|
/** "현재 / 전체" 숫자 표시. 기본 false */
|
|
24
30
|
showCounter?: boolean;
|
|
@@ -36,8 +42,8 @@ export interface LDCarouselProps {
|
|
|
36
42
|
* 고급 커스터마이징이 필요하면 `LDCarousel.Root` 등 compound API를 직접 조합하세요.
|
|
37
43
|
*/
|
|
38
44
|
declare const LDCarousel: {
|
|
39
|
-
({ slides, orientation, loop, autoplay, autoScroll, align, showArrows, showDots, showCounter, slideSize, gap, className, style, viewportClassName, }: LDCarouselProps): import("react/jsx-runtime").JSX.Element;
|
|
40
|
-
Root: ({ orientation, loop, autoplay, autoScroll, align, options, gap, className, style, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
|
|
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;
|
|
46
|
+
Root: ({ orientation, loop, autoplay, autoScroll, align, containScroll, options, gap, className, style, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
|
|
41
47
|
Viewport: ({ className, children }: import("./CarouselBase.js").ViewportProps) => import("react/jsx-runtime").JSX.Element;
|
|
42
48
|
Container: ({ className, style, children }: import("./CarouselBase.js").ContainerProps) => import("react/jsx-runtime").JSX.Element;
|
|
43
49
|
Slide: ({ size, index, total, className, style, children, }: import("./CarouselBase.js").SlideProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -45,6 +51,7 @@ declare const LDCarousel: {
|
|
|
45
51
|
Next: ({ className, children, ...props }: import("./CarouselBase.js").NavButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
46
52
|
Dots: ({ className, dotClassName }: import("./CarouselBase.js").DotsProps) => import("react/jsx-runtime").JSX.Element;
|
|
47
53
|
Counter: ({ className, format }: import("./CarouselBase.js").CounterProps) => import("react/jsx-runtime").JSX.Element;
|
|
54
|
+
TopArrows: ({ className, children, ...props }: import("./CarouselBase.js").NavButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
48
55
|
};
|
|
49
56
|
export default LDCarousel;
|
|
50
57
|
//# sourceMappingURL=LDCarousel.d.ts.map
|
|
@@ -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,4BAA4B;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+BAA+B;IAC/B,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;
|
|
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"}
|
|
@@ -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', showArrows =
|
|
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, }) => {
|
|
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, gap: gap, className: className, style: style, children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: cn('flex items-center gap-3 w-full', 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: [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, {})] }))] }) }));
|
|
13
13
|
};
|
|
14
14
|
LDCarousel.Root = CarouselBase.Root;
|
|
15
15
|
LDCarousel.Viewport = CarouselBase.Viewport;
|
|
@@ -19,4 +19,5 @@ LDCarousel.Prev = CarouselBase.Prev;
|
|
|
19
19
|
LDCarousel.Next = CarouselBase.Next;
|
|
20
20
|
LDCarousel.Dots = CarouselBase.Dots;
|
|
21
21
|
LDCarousel.Counter = CarouselBase.Counter;
|
|
22
|
+
LDCarousel.TopArrows = CarouselBase.TopArrows;
|
|
22
23
|
export default LDCarousel;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import LDCheckbox from './LDCheckbox.js';
|
|
4
|
-
import FormField from '../
|
|
5
|
-
import FormErrorMessage from '../
|
|
4
|
+
import FormField from '../LDForm/LDFormField.js';
|
|
5
|
+
import FormErrorMessage from '../LDForm/LDFormErrorMessage.js';
|
|
6
6
|
const FormCheckbox = ({ name, options, ref, customErrorMessage = '', isHiddenErrorMessage = false, errorClassName, disabled = false, ...props }) => {
|
|
7
7
|
return (_jsx(FormField, { name: name, options: options, customErrorMessage: customErrorMessage, disabled: disabled, ref: ref, children: ({ field, fieldState }) => (_jsxs("div", { className: "relative", children: [_jsx(LDCheckbox, { ...props, checked: !!field.value, onCheckedChange: field.onChange, onBlur: field.onBlur, disabled: disabled, ref: field.ref }), !isHiddenErrorMessage && (_jsx(FormErrorMessage, { error: fieldState.error, disabled: disabled, className: errorClassName }))] })) }));
|
|
8
8
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import LDCheckboxGroup from './LDCheckboxGroup.js';
|
|
4
|
-
import FormField from '../
|
|
5
|
-
import FormErrorMessage from '../
|
|
4
|
+
import FormField from '../LDForm/LDFormField.js';
|
|
5
|
+
import FormErrorMessage from '../LDForm/LDFormErrorMessage.js';
|
|
6
6
|
const FormCheckboxGroup = ({ name, options, customErrorMessage = '', isHiddenErrorMessage = true, errorClassName, disabled = false, ...props }) => {
|
|
7
7
|
return (_jsx(FormField, { name: name, options: options, customErrorMessage: customErrorMessage, disabled: disabled, children: ({ field, fieldState }) => (_jsxs("div", { className: "relative", children: [_jsx(LDCheckboxGroup, { ...props, value: field.value ?? [], onChange: field.onChange, disabled: disabled }), !isHiddenErrorMessage && (_jsx(FormErrorMessage, { error: fieldState.error, disabled: disabled, className: errorClassName }))] })) }));
|
|
8
8
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LDCheckbox.d.ts","sourceRoot":"","sources":["../../../src/components/LDCheckbox/LDCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAK3D,KAAK,YAAY,GAAG,OAAO,CAAC;AAC5B,KAAK,gBAAgB,GAAG,OAAO,GAAG,SAAS,CAAC;AAC5C,KAAK,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;AAiBpD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,GAAG,OAAO,CAC1B;IACC,4BAA4B;IAC5B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,aAAa;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,yBAAyB;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mBAAmB;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;
|
|
1
|
+
{"version":3,"file":"LDCheckbox.d.ts","sourceRoot":"","sources":["../../../src/components/LDCheckbox/LDCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAK3D,KAAK,YAAY,GAAG,OAAO,CAAC;AAC5B,KAAK,gBAAgB,GAAG,OAAO,GAAG,SAAS,CAAC;AAC5C,KAAK,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;AAiBpD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,GAAG,OAAO,CAC1B;IACC,4BAA4B;IAC5B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,aAAa;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,yBAAyB;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mBAAmB;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAmGD,QAAA,MAAM,UAAU,GAAI,wJAgBjB,eAAe,4CAgDjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -19,7 +19,13 @@ const PillInner = ({ label, ref, ...props }) => {
|
|
|
19
19
|
const DefaultInner = ({ type, size, label, isRequired, ref, ...props }) => {
|
|
20
20
|
const { checked, disabled } = useCheckboxContext();
|
|
21
21
|
return (_jsxs(_Fragment, { children: [_jsx(CheckboxBase.HiddenInput, { ref: ref, ...props }), _jsx(CheckboxBase.Indicator, { icon: "check", iconSize: type === 'checkbox' ? 10 : checkIconSizes[size], className: cn('ld-transition', type === 'checkbox' &&
|
|
22
|
-
'border-2 rounded-[5px] border-mono300 p-[3px]', type === 'checkbox' && checked && 'bg-lb500 border-lb500', type === 'checkbox' && disabled && 'bg-mono100 border-mono100', 'peer-focus-visible:ring-2 peer-focus-visible:ring-lb500 peer-focus-visible:ring-offset-2'), iconClassName: cn('shrink-0
|
|
22
|
+
'border-2 rounded-[5px] border-mono300 p-[3px]', type === 'checkbox' && checked && 'bg-lb500 border-lb500', type === 'checkbox' && disabled && 'bg-mono100 border-mono100', 'peer-focus-visible:ring-2 peer-focus-visible:ring-lb500 peer-focus-visible:ring-offset-2'), iconClassName: cn('shrink-0 ld-transition', type === 'checkbox'
|
|
23
|
+
? checked
|
|
24
|
+
? 'text-white'
|
|
25
|
+
: 'text-transparent'
|
|
26
|
+
: checked
|
|
27
|
+
? 'text-blue400'
|
|
28
|
+
: 'text-neutral500') }), isRequired && (_jsx(CheckboxBase.Label, { className: cn('text-blue400 shrink-0 block', labelHeight[size]), children: "\uD544\uC218" })), label && (_jsx(CheckboxBase.Label, { className: cn('text-neutral900 block', labelHeight[size]), children: label }))] }));
|
|
23
29
|
};
|
|
24
30
|
const LDCheckbox = ({ checked, defaultChecked, onCheckedChange, onChange, size = 'small', fontSize = 'small', label, isRequired = false, type = 'default', itemCenter = false, disabled = false, className, style, ref, ...props }) => {
|
|
25
31
|
if (type === 'pill') {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import LDDatePicker from './LDDatePicker.js';
|
|
4
|
-
import FormField from '../
|
|
5
|
-
import FormErrorMessage from '../
|
|
4
|
+
import FormField from '../LDForm/LDFormField.js';
|
|
5
|
+
import FormErrorMessage from '../LDForm/LDFormErrorMessage.js';
|
|
6
6
|
import cn from '../../utils/cn.js';
|
|
7
7
|
const FormDatePicker = ({ name, options, customErrorMessage = '', isHiddenErrorMessage = false, errorClassName, disabled = false, block = false, ...props }) => {
|
|
8
8
|
return (_jsx(FormField, { name: name, options: options, customErrorMessage: customErrorMessage, disabled: disabled, children: ({ field, fieldState }) => (_jsxs("div", { className: cn('relative border-2 border-transparent', block ? 'w-full' : 'w-auto'), children: [_jsx(LDDatePicker, { ...props, block: block, value: field.value ?? undefined, onChange: (date) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LDDatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/LDDatePicker/LDDatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AASjD,MAAM,WAAW,iBAAiB;IAChC,0BAA0B;IAC1B,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,8BAA8B;IAC9B,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAC7C,oBAAoB;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC7B,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kBAAkB;IAClB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,iBAAiB;IACjB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,uBAAuB;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,QAAA,MAAM,YAAY,GAAI,kKAiBnB,iBAAiB,
|
|
1
|
+
{"version":3,"file":"LDDatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/LDDatePicker/LDDatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AASjD,MAAM,WAAW,iBAAiB;IAChC,0BAA0B;IAC1B,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,8BAA8B;IAC9B,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAC7C,oBAAoB;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC7B,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kBAAkB;IAClB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,iBAAiB;IACjB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,uBAAuB;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,QAAA,MAAM,YAAY,GAAI,kKAiBnB,iBAAiB,4CAyFnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -24,9 +24,7 @@ const LDDatePicker = ({ value, defaultValue, onChange, placeholder = 'YYYY-MM-DD
|
|
|
24
24
|
setInternal(undefined);
|
|
25
25
|
onChange?.(undefined);
|
|
26
26
|
};
|
|
27
|
-
return (_jsx("div", { className: cn(block ? 'w-full' : 'w-auto', className), children: _jsxs(PopoverBase.Root, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverBase.Trigger, { disabled: disabled, style: style, className: cn('border border-neutral100 h-[38px] w-full display14 px-4 rounded-[5px]', 'flex flex-row items-center justify-between gap-4', 'outline-2 outline-transparent ld-transition', disabled && 'cursor-not-allowed opacity-50',
|
|
28
|
-
? 'bg-tintRed outline-red500'
|
|
29
|
-
: 'focus:bg-tintBlue focus:outline-lb500', triggerClassName), children: [resolved ? (_jsx("span", { children: dayjs(resolved).format('YYYY-MM-DD') })) : (_jsx("span", { className: "text-mono400", children: placeholder })), _jsxs("div", { className: "flex gap-[6px]", children: [trailingIcon, showReset && resolved && (_jsx("span", { role: "button", tabIndex: 0, className: "text-mono400 cursor-pointer", onClick: handleReset, onKeyDown: (e) => {
|
|
27
|
+
return (_jsx("div", { className: cn(block ? 'w-full' : 'w-auto', className), children: _jsxs(PopoverBase.Root, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverBase.Trigger, { disabled: disabled, style: style, className: cn('border border-neutral100 h-[38px] w-full display14 px-4 rounded-[5px]', 'flex flex-row items-center justify-between gap-4', 'outline-2 outline-transparent ld-transition', disabled && 'cursor-not-allowed opacity-50', triggerClassName), children: [resolved ? (_jsx("span", { children: dayjs(resolved).format('YYYY-MM-DD') })) : (_jsx("span", { className: "text-mono400", children: placeholder })), _jsxs("div", { className: "flex gap-[6px]", children: [trailingIcon, showReset && resolved && (_jsx("span", { role: "button", tabIndex: 0, className: "text-mono400 cursor-pointer", onClick: handleReset, onKeyDown: (e) => {
|
|
30
28
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
31
29
|
e.preventDefault();
|
|
32
30
|
handleReset(e);
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import LDDateRangePicker from './LDDateRangePicker.js';
|
|
4
|
-
import FormField from '../
|
|
5
|
-
import FormErrorMessage from '../
|
|
4
|
+
import FormField from '../LDForm/LDFormField.js';
|
|
5
|
+
import FormErrorMessage from '../LDForm/LDFormErrorMessage.js';
|
|
6
6
|
import cn from '../../utils/cn.js';
|
|
7
7
|
const FormDateRangePicker = ({ name, options, customErrorMessage = '', isHiddenErrorMessage = true, errorClassName, disabled = false, block = false, ...props }) => {
|
|
8
8
|
return (_jsx(FormField, { name: name, options: options, customErrorMessage: customErrorMessage, disabled: disabled, children: ({ field, fieldState }) => (_jsxs("div", { className: cn('relative border-2 border-transparent', block ? 'w-full' : 'w-auto'), children: [_jsx(LDDateRangePicker, { ...props, block: block, value: field.value ?? undefined, onChange: field.onChange, disabled: disabled, color: fieldState.hasError ? 'danger' : 'neutral' }), !isHiddenErrorMessage && (_jsx(FormErrorMessage, { error: fieldState.error, disabled: disabled, className: errorClassName }))] })) }));
|
|
@@ -17,7 +17,7 @@ const placeholders = {
|
|
|
17
17
|
monthly: 'YYYY-MM ~ YYYY-MM',
|
|
18
18
|
yearly: 'YYYY ~ YYYY',
|
|
19
19
|
};
|
|
20
|
-
const LDDateRangePicker = ({ value, onChange, disabled = false, block = false, color = 'neutral', isDisableAfterNow = false, isAutoClose = false, viewMode = 'daily', defaultValue, initialValue, trailingIcon = (_jsx(LucideIcon, { name: "calendar", size: 15, className: "text-
|
|
20
|
+
const LDDateRangePicker = ({ value, onChange, disabled = false, block = false, color = 'neutral', isDisableAfterNow = false, isAutoClose = false, viewMode = 'daily', defaultValue, initialValue, trailingIcon = (_jsx(LucideIcon, { name: "calendar", size: 15, className: "text-mono400" })), onRangeComplete, onResetComplete, className, style, triggerClassName, }) => {
|
|
21
21
|
const [open, setOpen] = useState(false);
|
|
22
22
|
const [internal, setInternal] = useState(defaultValue);
|
|
23
23
|
const isControlled = value !== undefined;
|
|
@@ -25,10 +25,10 @@ const LDDateRangePicker = ({ value, onChange, disabled = false, block = false, c
|
|
|
25
25
|
const fmt = dateFormats[viewMode];
|
|
26
26
|
const renderDateRange = () => {
|
|
27
27
|
if (!resolved?.from) {
|
|
28
|
-
return _jsx("span", { className: "text-
|
|
28
|
+
return _jsx("span", { className: "text-mono400", children: placeholders[viewMode] });
|
|
29
29
|
}
|
|
30
30
|
if (!resolved.to) {
|
|
31
|
-
return (_jsxs("span", { className: "text-
|
|
31
|
+
return (_jsxs("span", { className: "text-mono400", children: [dayjs(resolved.from).format(fmt), " ~", ' ', placeholders[viewMode].split(' ~ ')[1]] }));
|
|
32
32
|
}
|
|
33
33
|
return (_jsxs(_Fragment, { children: [dayjs(resolved.from).format(fmt), " ~ ", dayjs(resolved.to).format(fmt)] }));
|
|
34
34
|
};
|
|
@@ -108,9 +108,9 @@ const LDDateRangePicker = ({ value, onChange, disabled = false, block = false, c
|
|
|
108
108
|
onChange?.(selected);
|
|
109
109
|
}
|
|
110
110
|
};
|
|
111
|
-
return (_jsx("div", { className: cn(block ? 'w-full' : 'w-auto', className), children: _jsxs(PopoverBase.Root, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverBase.Trigger, { disabled: disabled, style: style, className: cn('border border-
|
|
112
|
-
? 'bg-tintRed outline-
|
|
113
|
-
: 'focus:bg-tintBlue focus:outline-lb500', triggerClassName), children: [renderDateRange(), _jsxs("div", { className: "shrink-0 flex gap-1.5", children: [trailingIcon, isResetAvailable && (_jsx("span", { role: "button", tabIndex: 0, className: "text-
|
|
111
|
+
return (_jsx("div", { className: cn(block ? 'w-full' : 'w-auto', className), children: _jsxs(PopoverBase.Root, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverBase.Trigger, { disabled: disabled, style: style, className: cn('border border-neutral100 h-[38px] w-full display14 px-4 rounded-[5px]', 'flex flex-row items-center justify-between gap-4', 'whitespace-nowrap outline-2 outline-transparent ld-transition', disabled && 'cursor-not-allowed opacity-50', color === 'danger'
|
|
112
|
+
? 'bg-tintRed outline-danger600'
|
|
113
|
+
: 'focus-visible:bg-tintBlue focus-visible:outline-lb500', triggerClassName), children: [renderDateRange(), _jsxs("div", { className: "shrink-0 flex gap-1.5", children: [trailingIcon, isResetAvailable && (_jsx("span", { role: "button", tabIndex: 0, className: "text-mono400 cursor-pointer", onClick: handleReset, onKeyDown: (e) => {
|
|
114
114
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
115
115
|
e.preventDefault();
|
|
116
116
|
handleReset(e);
|
|
@@ -153,7 +153,7 @@ const MonthRangePicker = ({ value, onChange, isDisableAfterNow, }) => {
|
|
|
153
153
|
};
|
|
154
154
|
return (_jsxs("div", { className: "p-3 w-[280px]", children: [_jsxs("div", { className: "flex items-center justify-between mb-4 px-2", children: [_jsx("button", { type: "button", className: "inline-flex items-center justify-center size-8 rounded-md hover:bg-neutral-100 cursor-pointer", onClick: () => setCurrentYear((prev) => prev - 1), children: _jsx(LucideIcon, { name: "chevronLeft", size: 16 }) }), _jsxs("span", { className: "display14 bold", children: [currentYear, "\uB144"] }), _jsx("button", { type: "button", className: "inline-flex items-center justify-center size-8 rounded-md hover:bg-neutral-100 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed", onClick: () => setCurrentYear((prev) => prev + 1), disabled: isDisableAfterNow && currentYear >= now.getFullYear(), children: _jsx(LucideIcon, { name: "chevronRight", size: 16 }) })] }), _jsx("div", { className: "grid grid-cols-3 gap-2", children: Array.from({ length: 12 }, (_, m) => (_jsxs("button", { type: "button", onClick: () => handleMonthClick(m), disabled: isDisabled(m), className: cn('h-10 rounded-md display12 ld-transition cursor-pointer', isSelected(m)
|
|
155
155
|
? 'bg-lb500 text-white bold'
|
|
156
|
-
: 'hover:bg-
|
|
156
|
+
: 'hover:bg-neutral100 text-mono500', isDisabled(m) && 'opacity-30 cursor-not-allowed'), children: [m + 1, "\uC6D4"] }, m))) })] }));
|
|
157
157
|
};
|
|
158
158
|
// ── YearRangePicker ──
|
|
159
159
|
const YearRangePicker = ({ value, onChange, isDisableAfterNow, }) => {
|
|
@@ -192,6 +192,6 @@ const YearRangePicker = ({ value, onChange, isDisableAfterNow, }) => {
|
|
|
192
192
|
return (_jsxs("div", { className: "p-3 w-[280px]", children: [_jsxs("div", { className: "flex items-center justify-between mb-4 px-2", children: [_jsx("button", { type: "button", className: "inline-flex items-center justify-center size-8 rounded-md hover:bg-neutral-100 cursor-pointer", onClick: () => setStartYearPage((prev) => prev - 12), children: _jsx(LucideIcon, { name: "chevronLeft", size: 16 }) }), _jsxs("span", { className: "display14 bold", children: [years[0], " - ", years[years.length - 1]] }), _jsx("button", { type: "button", className: "inline-flex items-center justify-center size-8 rounded-md hover:bg-neutral-100 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed", onClick: () => setStartYearPage((prev) => prev + 12), disabled: isDisableAfterNow &&
|
|
193
193
|
(years[years.length - 1] ?? 0) >= now.getFullYear(), children: _jsx(LucideIcon, { name: "chevronRight", size: 16 }) })] }), _jsx("div", { className: "grid grid-cols-3 gap-2", children: years.map((y) => (_jsxs("button", { type: "button", onClick: () => handleYearClick(y), disabled: isDisabled(y), className: cn('h-10 rounded-md display12 ld-transition cursor-pointer', isSelected(y)
|
|
194
194
|
? 'bg-lb500 text-white bold'
|
|
195
|
-
: 'hover:bg-
|
|
195
|
+
: 'hover:bg-neutral100 text-mono500', isDisabled(y) && 'opacity-30 cursor-not-allowed'), children: [y, "\uB144"] }, y))) })] }));
|
|
196
196
|
};
|
|
197
197
|
export default LDDateRangePicker;
|
|
@@ -12,9 +12,10 @@ interface FileUploadContextType {
|
|
|
12
12
|
fileList: IFile[];
|
|
13
13
|
setFileList: Dispatch<SetStateAction<IFile[]>>;
|
|
14
14
|
maxFileCount: number;
|
|
15
|
-
/** 추가/교체/삭제로 리스트가 바뀌면 갱신된 전체 파일 리스트로 호출된다. */
|
|
16
15
|
onChangeFile: (files: IFile[]) => void | Promise<void>;
|
|
17
16
|
onDeleteFile: (file: IFile) => Promise<boolean>;
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
readOnly?: boolean;
|
|
18
19
|
}
|
|
19
20
|
export declare const useFileUploadContext: () => FileUploadContextType;
|
|
20
21
|
interface RootProps {
|
|
@@ -29,6 +30,8 @@ interface RootProps {
|
|
|
29
30
|
maxFileCount: number;
|
|
30
31
|
onChangeFile: (files: IFile[]) => void | Promise<void>;
|
|
31
32
|
onDeleteFile: (file: IFile) => Promise<boolean>;
|
|
33
|
+
disabled?: boolean;
|
|
34
|
+
readOnly?: boolean;
|
|
32
35
|
className?: string;
|
|
33
36
|
children?: ReactNode;
|
|
34
37
|
}
|
|
@@ -41,8 +44,8 @@ interface ICardListProps {
|
|
|
41
44
|
className?: string;
|
|
42
45
|
}
|
|
43
46
|
export declare const FileUploadBase: {
|
|
44
|
-
Root: ({ recommendedSize, maxSize, allowedExtensions, maxFileCount, fileList, setFileList, onChangeFile, onDeleteFile, className, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
|
|
45
|
-
Input: ({ type, label, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
|
|
47
|
+
Root: ({ recommendedSize, maxSize, allowedExtensions, maxFileCount, fileList, setFileList, onChangeFile, onDeleteFile, disabled, readOnly, className, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
|
|
48
|
+
Input: ({ type, label, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
46
49
|
CardList: (props: ICardListProps) => import("react/jsx-runtime").JSX.Element;
|
|
47
50
|
Description: ({ className }: {
|
|
48
51
|
className?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileUploadBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDFileUpload/FileUploadBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,QAAQ,EACR,KAAK,SAAS,EACd,cAAc,EAIf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAmB,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEpE,OAAO,EAIL,KAAK,EAKN,MAAM,kBAAkB,CAAC;AAI1B,UAAU,qBAAqB;IAC7B,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC/C,YAAY,EAAE,MAAM,CAAC;IACrB,
|
|
1
|
+
{"version":3,"file":"FileUploadBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDFileUpload/FileUploadBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,QAAQ,EACR,KAAK,SAAS,EACd,cAAc,EAIf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAmB,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEpE,OAAO,EAIL,KAAK,EAKN,MAAM,kBAAkB,CAAC;AAI1B,UAAU,qBAAqB;IAC7B,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC/C,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvD,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAID,eAAO,MAAM,oBAAoB,6BAUhC,CAAC;AAEF,UAAU,SAAS;IACjB,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;IACvB,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;IACpD,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvD,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAoCD,UAAU,UAAW,SAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAChE,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwHD,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoPD,eAAO,MAAM,cAAc;uKAvYxB,SAAS;uCA8BT,UAAU;sBAuHY,cAAc;iCA8NH;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE;CAyBzD,CAAC;AAEF,eAAe,cAAc,CAAC"}
|