@loword/loword-design-system 0.0.10 → 0.0.11
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/LDAutoComplete/AutoCompleteBase.js +6 -6
- package/dist/components/LDBadge/LDBadge.d.ts +5 -6
- package/dist/components/LDBadge/LDBadge.d.ts.map +1 -1
- package/dist/components/LDBadge/LDBadge.js +2 -2
- package/dist/components/LDBreadCrumb/LDBreadCrumb.d.ts +1 -2
- package/dist/components/LDBreadCrumb/LDBreadCrumb.d.ts.map +1 -1
- package/dist/components/LDButton/LDButton.d.ts +3 -3
- package/dist/components/LDButton/LDButton.d.ts.map +1 -1
- package/dist/components/LDButton/LDButton.js +5 -5
- package/dist/components/LDCalendar/LDCalendar.d.ts +7 -6
- package/dist/components/LDCalendar/LDCalendar.d.ts.map +1 -1
- package/dist/components/LDCalendar/LDCalendar.js +59 -16
- package/dist/components/LDCarousel/CarouselBase.d.ts.map +1 -1
- package/dist/components/LDCarousel/CarouselBase.js +8 -4
- package/dist/components/LDCheckbox/CheckboxBase.d.ts +1 -3
- package/dist/components/LDCheckbox/CheckboxBase.d.ts.map +1 -1
- package/dist/components/LDCheckbox/CheckboxBase.js +3 -3
- package/dist/components/LDCheckbox/LDCheckbox.d.ts.map +1 -1
- package/dist/components/LDCheckbox/LDCheckbox.js +4 -4
- package/dist/components/LDCheckbox/LDCheckboxGroup.js +1 -1
- package/dist/components/LDCheckbox/LDFormCheckbox.d.ts +14 -0
- package/dist/components/LDCheckbox/LDFormCheckbox.d.ts.map +1 -0
- package/dist/components/LDCheckbox/{FormCheckbox.js → LDFormCheckbox.js} +2 -2
- package/dist/components/LDCheckbox/LDFormCheckboxGroup.d.ts +13 -0
- package/dist/components/LDCheckbox/LDFormCheckboxGroup.d.ts.map +1 -0
- package/dist/components/LDCheckbox/{FormCheckboxGroup.js → LDFormCheckboxGroup.js} +2 -2
- package/dist/components/LDDatePicker/LDDatePicker.d.ts +10 -4
- package/dist/components/LDDatePicker/LDDatePicker.d.ts.map +1 -1
- package/dist/components/LDDatePicker/LDDatePicker.js +95 -25
- package/dist/components/LDDatePicker/LDFormDatePicker.d.ts +13 -0
- package/dist/components/LDDatePicker/LDFormDatePicker.d.ts.map +1 -0
- package/dist/components/LDDatePicker/LDFormDatePicker.js +15 -0
- package/dist/components/LDDateRangePicker/LDDateRangePicker.d.ts +13 -6
- package/dist/components/LDDateRangePicker/LDDateRangePicker.d.ts.map +1 -1
- package/dist/components/LDDateRangePicker/LDDateRangePicker.js +143 -93
- package/dist/components/LDDateRangePicker/LDFormDateRangePicker.d.ts +13 -0
- package/dist/components/LDDateRangePicker/LDFormDateRangePicker.d.ts.map +1 -0
- package/dist/components/LDDateRangePicker/LDFormDateRangePicker.js +20 -0
- package/dist/components/LDDrawer/LDDrawer.js +2 -2
- package/dist/components/LDFileUpload/FileUploadBase.d.ts +11 -3
- package/dist/components/LDFileUpload/FileUploadBase.d.ts.map +1 -1
- package/dist/components/LDFileUpload/FileUploadBase.js +17 -17
- package/dist/components/LDFileUpload/LDFileUpload.d.ts.map +1 -1
- package/dist/components/LDFileUpload/LDFileUpload.js +3 -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 +5 -1
- package/dist/components/LDFileUpload/LDImageUploadList.js +1 -1
- package/dist/components/LDForm/LDFormErrorMessage.d.ts +3 -1
- package/dist/components/LDForm/LDFormErrorMessage.d.ts.map +1 -1
- package/dist/components/LDForm/LDFormErrorMessage.js +2 -2
- package/dist/components/LDInput/LDFormInput.d.ts +1 -1
- package/dist/components/LDInput/LDFormInput.d.ts.map +1 -1
- package/dist/components/LDInput/LDFormInput.js +37 -14
- package/dist/components/LDInput/LDInput.d.ts +4 -3
- package/dist/components/LDInput/LDInput.d.ts.map +1 -1
- package/dist/components/LDInput/LDInput.js +49 -48
- package/dist/components/LDModal/LDModal.d.ts +19 -40
- package/dist/components/LDModal/LDModal.d.ts.map +1 -1
- package/dist/components/LDModal/LDModal.js +56 -70
- package/dist/components/LDModal/LDModalView.d.ts +51 -0
- package/dist/components/LDModal/LDModalView.d.ts.map +1 -0
- package/dist/components/LDModal/LDModalView.js +72 -0
- package/dist/components/LDOTPInput/LDOTPInput.d.ts.map +1 -1
- package/dist/components/LDOTPInput/LDOTPInput.js +4 -3
- package/dist/components/LDPagination/LDPagination.d.ts +5 -1
- package/dist/components/LDPagination/LDPagination.d.ts.map +1 -1
- package/dist/components/LDPagination/LDPagination.js +10 -1
- package/dist/components/LDPagination/PaginationBase.d.ts +13 -4
- package/dist/components/LDPagination/PaginationBase.d.ts.map +1 -1
- package/dist/components/LDPagination/PaginationBase.js +8 -7
- package/dist/components/LDPopover/LDPopover.js +3 -3
- package/dist/components/LDRadio/LDFormRadioGroup.d.ts +13 -0
- package/dist/components/LDRadio/LDFormRadioGroup.d.ts.map +1 -0
- package/dist/components/LDRadio/{FormRadioGroup.js → LDFormRadioGroup.js} +2 -2
- package/dist/components/LDRadio/LDRadio.d.ts +1 -1
- package/dist/components/LDRadio/LDRadio.d.ts.map +1 -1
- package/dist/components/LDRadio/LDRadio.js +15 -6
- package/dist/components/LDRadio/LDRadioGroup.d.ts.map +1 -1
- package/dist/components/LDRadio/LDRadioGroup.js +1 -1
- package/dist/components/LDRadio/RadioBase.d.ts +2 -3
- package/dist/components/LDRadio/RadioBase.d.ts.map +1 -1
- package/dist/components/LDRadio/RadioBase.js +7 -4
- package/dist/components/LDSelect/LDFormMultiSelect.d.ts +13 -0
- package/dist/components/LDSelect/LDFormMultiSelect.d.ts.map +1 -0
- package/dist/components/LDSelect/{FormMultiSelect.js → LDFormMultiSelect.js} +2 -2
- package/dist/components/LDSelect/LDFormSelect.d.ts +13 -0
- package/dist/components/LDSelect/LDFormSelect.d.ts.map +1 -0
- package/dist/components/LDSelect/LDFormSelect.js +10 -0
- package/dist/components/LDSelect/LDMultiSelect.d.ts +6 -3
- package/dist/components/LDSelect/LDMultiSelect.d.ts.map +1 -1
- package/dist/components/LDSelect/LDMultiSelect.js +35 -31
- package/dist/components/LDSelect/LDSelect.d.ts +6 -3
- package/dist/components/LDSelect/LDSelect.d.ts.map +1 -1
- package/dist/components/LDSelect/LDSelect.js +37 -30
- package/dist/components/LDSelect/SelectBase.d.ts.map +1 -1
- package/dist/components/LDSelect/SelectBase.js +21 -7
- package/dist/components/LDSpinner/LDSpinner.d.ts +1 -1
- package/dist/components/LDSpinner/LDSpinner.d.ts.map +1 -1
- package/dist/components/LDSpinner/LDSpinner.js +6 -6
- package/dist/components/LDTable/LDTanstackTable.js +1 -1
- package/dist/components/LDTable/TableField.d.ts +1 -1
- package/dist/components/LDTable/TableField.d.ts.map +1 -1
- package/dist/components/LDTextarea/LDFormTextarea.d.ts +14 -0
- package/dist/components/LDTextarea/LDFormTextarea.d.ts.map +1 -0
- package/dist/components/LDTextarea/{FormTextarea.js → LDFormTextarea.js} +2 -2
- package/dist/components/LDTextarea/LDTextarea.d.ts +1 -1
- package/dist/components/LDTextarea/LDTextarea.d.ts.map +1 -1
- package/dist/components/LDTextarea/LDTextarea.js +30 -30
- package/dist/components/LDTimePicker/LDFormTimePicker.d.ts +12 -0
- package/dist/components/LDTimePicker/LDFormTimePicker.d.ts.map +1 -0
- package/dist/components/LDTimePicker/{FormTimePicker.js → LDFormTimePicker.js} +3 -3
- package/dist/components/LDTimePicker/LDTimePicker.js +2 -2
- package/dist/components/LDToast/LDToast.js +1 -1
- package/dist/components/LDToggleButton/LDFormToggleButton.d.ts +12 -0
- package/dist/components/LDToggleButton/LDFormToggleButton.d.ts.map +1 -0
- package/dist/components/LDToggleButton/{FormToggleButton.js → LDFormToggleButton.js} +2 -2
- package/dist/index.css +346 -207
- package/dist/index.d.ts +13 -12
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +13 -13
- package/dist/utils/file.d.ts +2 -2
- package/dist/utils/file.d.ts.map +1 -1
- package/dist/utils/file.js +26 -23
- package/dist/utils/renderIcon.d.ts +1 -2
- package/dist/utils/renderIcon.d.ts.map +1 -1
- package/dist/utils/renderIcon.js +5 -4
- package/package.json +1 -1
- package/src/styles/components/button.css +2 -2
- package/src/styles/components/index.css +1 -0
- package/src/styles/components/input.css +2 -2
- package/src/styles/components/select.css +61 -0
- package/src/styles/motion.css +37 -0
- package/src/theme.css +3 -0
- package/dist/components/Icon/LucideIcon.d.ts +0 -12
- package/dist/components/Icon/LucideIcon.d.ts.map +0 -1
- package/dist/components/Icon/LucideIcon.js +0 -49
- package/dist/components/LDCheckbox/FormCheckbox.d.ts +0 -14
- package/dist/components/LDCheckbox/FormCheckbox.d.ts.map +0 -1
- package/dist/components/LDCheckbox/FormCheckboxGroup.d.ts +0 -13
- package/dist/components/LDCheckbox/FormCheckboxGroup.d.ts.map +0 -1
- package/dist/components/LDDatePicker/FormDatePicker.d.ts +0 -12
- package/dist/components/LDDatePicker/FormDatePicker.d.ts.map +0 -1
- package/dist/components/LDDatePicker/FormDatePicker.js +0 -12
- package/dist/components/LDDateRangePicker/FormDateRangePicker.d.ts +0 -12
- package/dist/components/LDDateRangePicker/FormDateRangePicker.d.ts.map +0 -1
- package/dist/components/LDDateRangePicker/FormDateRangePicker.js +0 -10
- package/dist/components/LDModal/openModal.d.ts +0 -24
- package/dist/components/LDModal/openModal.d.ts.map +0 -1
- package/dist/components/LDModal/openModal.js +0 -52
- package/dist/components/LDRadio/FormRadioGroup.d.ts +0 -13
- package/dist/components/LDRadio/FormRadioGroup.d.ts.map +0 -1
- package/dist/components/LDSelect/FormMultiSelect.d.ts +0 -13
- package/dist/components/LDSelect/FormMultiSelect.d.ts.map +0 -1
- package/dist/components/LDSelect/FormSelect.d.ts +0 -13
- package/dist/components/LDSelect/FormSelect.d.ts.map +0 -1
- package/dist/components/LDSelect/FormSelect.js +0 -10
- package/dist/components/LDTextarea/FormTextarea.d.ts +0 -14
- package/dist/components/LDTextarea/FormTextarea.d.ts.map +0 -1
- package/dist/components/LDTimePicker/FormTimePicker.d.ts +0 -12
- package/dist/components/LDTimePicker/FormTimePicker.d.ts.map +0 -1
- package/dist/components/LDToggleButton/FormToggleButton.d.ts +0 -12
- package/dist/components/LDToggleButton/FormToggleButton.d.ts.map +0 -1
|
@@ -13,12 +13,12 @@ const useAutoCompleteContext = () => {
|
|
|
13
13
|
return autoCompeleteContext;
|
|
14
14
|
};
|
|
15
15
|
const autoCompleteSizeClasses = {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
16
|
+
'2xsmall': 'autocomplete-2xs',
|
|
17
|
+
xsmall: 'autocomplete-xs',
|
|
18
|
+
small: 'autocomplete-sm',
|
|
19
|
+
medium: 'autocomplete-md',
|
|
20
|
+
large: 'autocomplete-lg',
|
|
21
|
+
xlarge: 'autocomplete-xl',
|
|
22
22
|
};
|
|
23
23
|
const Root = ({ displayField, subFields, onSelectedItem, onChange, className, children, ref, }) => {
|
|
24
24
|
const [query, setQuery] = useState('');
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
|
-
import { type IconName } from '../Icon/LucideIcon.js';
|
|
3
2
|
type BadgeSize = 'xsmall' | 'small' | 'medium' | 'large';
|
|
4
3
|
type BadgeColor = 'orange' | 'fillOrange' | 'red' | 'fillRed' | 'green' | 'fillGreen' | 'blue' | 'fillBlue' | 'yellow' | 'fillYellow' | 'gray' | 'fillGray';
|
|
5
4
|
export interface LDBadgeProps<T extends string> {
|
|
@@ -9,17 +8,17 @@ export interface LDBadgeProps<T extends string> {
|
|
|
9
8
|
size?: BadgeSize;
|
|
10
9
|
/** type별 색상 매핑 객체 (프리셋 BadgeColor 또는 커스텀 Tailwind 클래스) */
|
|
11
10
|
colorsMap: Record<T, BadgeColor | string>;
|
|
11
|
+
/** 왼쪽 아이콘 (ReactNode) */
|
|
12
|
+
leftIcon?: ReactNode;
|
|
13
|
+
/** 오른쪽 아이콘 (ReactNode) */
|
|
14
|
+
rightIcon?: ReactNode;
|
|
12
15
|
/** 뱃지 내용 */
|
|
13
16
|
children?: ReactNode;
|
|
14
|
-
/** 왼쪽 아이콘 (IconName 또는 ReactNode) */
|
|
15
|
-
leftIcon?: IconName | ReactNode;
|
|
16
|
-
/** 오른쪽 아이콘 (IconName 또는 ReactNode) */
|
|
17
|
-
rightIcon?: IconName | ReactNode;
|
|
18
17
|
/** 추가 CSS 클래스 */
|
|
19
18
|
className?: string;
|
|
20
19
|
/** 인라인 스타일 */
|
|
21
20
|
style?: React.CSSProperties;
|
|
22
21
|
}
|
|
23
|
-
declare const LDBadge: <T extends string>({ type, size, colorsMap,
|
|
22
|
+
declare const LDBadge: <T extends string>({ type, size, colorsMap, leftIcon, rightIcon, children, className, style, }: LDBadgeProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
24
23
|
export default LDBadge;
|
|
25
24
|
//# sourceMappingURL=LDBadge.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LDBadge.d.ts","sourceRoot":"","sources":["../../../src/components/LDBadge/LDBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"LDBadge.d.ts","sourceRoot":"","sources":["../../../src/components/LDBadge/LDBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,KAAK,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACzD,KAAK,UAAU,GACX,QAAQ,GACR,YAAY,GACZ,KAAK,GACL,SAAS,GACT,OAAO,GACP,WAAW,GACX,MAAM,GACN,UAAU,GACV,QAAQ,GACR,YAAY,GACZ,MAAM,GACN,UAAU,CAAC;AAEf,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM;IAC5C,iCAAiC;IACjC,IAAI,EAAE,CAAC,CAAC;IACR,aAAa;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0DAA0D;IAC1D,SAAS,EAAE,MAAM,CAAC,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,CAAC;IAC1C,yBAAyB;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY;IACZ,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AA+BD,QAAA,MAAM,OAAO,GAAI,CAAC,SAAS,MAAM,EAAE,6EAShC,YAAY,CAAC,CAAC,CAAC,4CAmBjB,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import BadgeBase from './BadgeBase.js';
|
|
3
|
-
import { renderIcon } from '../../utils/renderIcon.js';
|
|
4
3
|
import cn from '../../utils/cn.js';
|
|
4
|
+
import { renderIcon } from '../../utils/renderIcon.js';
|
|
5
5
|
const colorClasses = {
|
|
6
6
|
orange: 'bg-tintOrange text-orange500',
|
|
7
7
|
fillOrange: 'bg-orange400 text-white',
|
|
@@ -28,7 +28,7 @@ const iconSizes = {
|
|
|
28
28
|
medium: 'icon-md',
|
|
29
29
|
large: 'icon-lg',
|
|
30
30
|
};
|
|
31
|
-
const LDBadge = ({ type, size = 'small', colorsMap,
|
|
31
|
+
const LDBadge = ({ type, size = 'small', colorsMap, leftIcon, rightIcon, children, className, style, }) => {
|
|
32
32
|
const color = colorsMap[type];
|
|
33
33
|
const iconSize = iconSizes[size];
|
|
34
34
|
return (_jsxs(BadgeBase.Root, { className: cn('w-auto text-center whitespace-nowrap border border-transparent', colorClasses[color] ?? color, sizeClasses[size], className), style: style, children: [renderIcon(leftIcon, iconSize), children, renderIcon(rightIcon, iconSize)] }));
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
2
|
import { type ButtonSize } from '../LDButton/LDButton.js';
|
|
3
|
-
import { type IconName } from '../Icon/LucideIcon.js';
|
|
4
3
|
export interface LDBreadCrumbItem {
|
|
5
4
|
label: string;
|
|
6
5
|
href?: string;
|
|
7
|
-
icon?:
|
|
6
|
+
icon?: ReactNode;
|
|
8
7
|
}
|
|
9
8
|
export interface LDBreadCrumbProps {
|
|
10
9
|
items: LDBreadCrumbItem[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LDBreadCrumb.d.ts","sourceRoot":"","sources":["../../../src/components/LDBreadCrumb/LDBreadCrumb.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAiB,EAAE,KAAK,UAAU,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"LDBreadCrumb.d.ts","sourceRoot":"","sources":["../../../src/components/LDBreadCrumb/LDBreadCrumb.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAiB,EAAE,KAAK,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAIjE,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6BD,QAAA,MAAM,YAAY,GAAI,wCAKnB,iBAAiB,4CAiDnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { type ElementType } from 'react';
|
|
3
3
|
import { PolymorphicComponentProps } from '../../types/polymorphic.js';
|
|
4
|
-
import { type IconName } from '../Icon/LucideIcon.js';
|
|
5
4
|
type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link';
|
|
6
5
|
type ButtonColor = 'neutral' | 'point' | 'danger';
|
|
7
6
|
export type ButtonSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
|
|
8
7
|
type ButtonShape = 'default' | 'capsule';
|
|
9
8
|
type ButtonAlign = 'left' | 'center' | 'right';
|
|
9
|
+
export declare const iconSizeClasses: Record<ButtonSize, string>;
|
|
10
10
|
type _ButtonProps = {
|
|
11
11
|
variant?: ButtonVariant;
|
|
12
12
|
color?: ButtonColor;
|
|
@@ -15,8 +15,8 @@ type _ButtonProps = {
|
|
|
15
15
|
align?: ButtonAlign;
|
|
16
16
|
loading?: boolean;
|
|
17
17
|
block?: boolean;
|
|
18
|
-
leftIcon?:
|
|
19
|
-
rightIcon?:
|
|
18
|
+
leftIcon?: React.ReactNode;
|
|
19
|
+
rightIcon?: React.ReactNode;
|
|
20
20
|
compact?: boolean;
|
|
21
21
|
disabled?: boolean;
|
|
22
22
|
};
|
|
@@ -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;
|
|
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"}
|
|
@@ -11,17 +11,17 @@ const variantBaseClasses = {
|
|
|
11
11
|
danger: 'bg-danger500 text-white',
|
|
12
12
|
},
|
|
13
13
|
outline: {
|
|
14
|
-
neutral: 'bg-white outline outline-neutral100 text-
|
|
14
|
+
neutral: 'bg-white outline outline-neutral100 text-neutral900',
|
|
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 text-
|
|
19
|
+
neutral: 'bg-transparent text-neutral900',
|
|
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] text-
|
|
24
|
+
neutral: 'bg-transparent underline underline-offset-[4px] text-neutral900',
|
|
25
25
|
point: 'bg-transparent text-lb500 underline underline-offset-[4px]',
|
|
26
26
|
danger: 'bg-transparent text-danger500 underline underline-offset-[4px]',
|
|
27
27
|
},
|
|
@@ -43,7 +43,7 @@ const variantHoverClasses = {
|
|
|
43
43
|
danger: 'hover:bg-danger50',
|
|
44
44
|
},
|
|
45
45
|
link: {
|
|
46
|
-
neutral: 'hover:text-
|
|
46
|
+
neutral: 'hover:text-neutral900 active:text-neutral900',
|
|
47
47
|
point: 'hover:text-lb700 active:text-lb700',
|
|
48
48
|
danger: 'hover:text-danger600 active:text-danger600',
|
|
49
49
|
},
|
|
@@ -67,7 +67,7 @@ const sizeClasses = {
|
|
|
67
67
|
large: 'btn-lg',
|
|
68
68
|
xlarge: 'btn-xl',
|
|
69
69
|
};
|
|
70
|
-
const iconSizeClasses = {
|
|
70
|
+
export const iconSizeClasses = {
|
|
71
71
|
'2xsmall': 'icon-2xs',
|
|
72
72
|
xsmall: 'icon-xs',
|
|
73
73
|
small: 'icon-sm',
|
|
@@ -2,15 +2,16 @@ import { type DayPickerProps, type Matcher } from 'react-day-picker';
|
|
|
2
2
|
import { type CSSProperties } from 'react';
|
|
3
3
|
/** react-day-picker의 DayPickerProps를 확장한 캘린더 props */
|
|
4
4
|
type LDCalendarProps = DayPickerProps & {
|
|
5
|
-
/** 추가 CSS 클래스 */
|
|
6
5
|
className?: string;
|
|
7
|
-
/** 인라인 스타일 */
|
|
8
6
|
style?: CSSProperties;
|
|
9
|
-
/** 예약 완료된 날짜 (취소선 표시) */
|
|
10
7
|
booked?: Matcher | Matcher[];
|
|
11
|
-
/** 예약 가능한 날짜 (아래에 점 표시) */
|
|
12
8
|
book?: Matcher | Matcher[];
|
|
13
9
|
};
|
|
14
|
-
declare const
|
|
15
|
-
|
|
10
|
+
export declare const TimePicker: ({ value, onChange, className, }: {
|
|
11
|
+
value?: string;
|
|
12
|
+
onChange?: (time: string) => void;
|
|
13
|
+
className?: string;
|
|
14
|
+
}) => 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;
|
|
16
17
|
//# 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,
|
|
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,13 +1,12 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { DayPicker, getDefaultClassNames, } from 'react-day-picker';
|
|
4
|
-
import { useRef, useEffect, } from 'react';
|
|
5
|
-
import LucideIcon from '../Icon/LucideIcon.js';
|
|
4
|
+
import { memo, useRef, useEffect, useMemo, } from 'react';
|
|
6
5
|
import cn from '../../utils/cn.js';
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
|
|
7
|
+
const LDCalendar = ({ className, style, classNames, captionLayout = 'label', formatters, components, book, booked, modifiers, showOutsideDays = true, ...props }) => {
|
|
9
8
|
const defaultClassNames = getDefaultClassNames();
|
|
10
|
-
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-
|
|
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',
|
|
11
10
|
//rtl일때 버튼 아이콘 방향 전환
|
|
12
11
|
String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, formatters: {
|
|
13
12
|
formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }),
|
|
@@ -36,7 +35,7 @@ const LDCalendar = ({ className, style, classNames, showOutsideDays = true, capt
|
|
|
36
35
|
range_start: cn('rounded-l-md bg-neutral-100', defaultClassNames.range_start),
|
|
37
36
|
range_middle: cn('rounded-none', defaultClassNames.range_middle),
|
|
38
37
|
range_end: cn('rounded-r-md bg-neutral-100', defaultClassNames.range_end),
|
|
39
|
-
today: cn('
|
|
38
|
+
today: cn('rounded-lg ring-1 ring-inset ring-lb500 hover:ring-0 data-[selected=true]:ring-0', 'data-[range-start=true]:rounded-l-lg data-[range-start=true]:rounded-r-none', 'data-[range-end=true]:rounded-r-lg data-[range-end=true]:rounded-l-none', 'font-semibold', defaultClassNames.today),
|
|
40
39
|
outside: cn('text-neutral-500 aria-selected:text-neutral-500', defaultClassNames.outside),
|
|
41
40
|
disabled: cn('text-neutral-500 opacity-50', defaultClassNames.disabled),
|
|
42
41
|
hidden: cn('invisible', defaultClassNames.hidden),
|
|
@@ -48,19 +47,57 @@ const LDCalendar = ({ className, style, classNames, showOutsideDays = true, capt
|
|
|
48
47
|
}, components: {
|
|
49
48
|
Root: ({ className: rootClassName, rootRef, ...rootProps }) => (_jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(rootClassName), ...rootProps })),
|
|
50
49
|
Chevron: ({ className: chevronClassName, orientation }) => {
|
|
51
|
-
|
|
52
|
-
? 'chevronLeft'
|
|
53
|
-
: orientation === 'right'
|
|
54
|
-
? 'chevronRight'
|
|
55
|
-
: 'chevronDown';
|
|
56
|
-
return (_jsx(LucideIcon, { name: iconName, className: cn('size-4', chevronClassName) }));
|
|
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) }));
|
|
57
51
|
},
|
|
58
52
|
DayButton: CalendarDayButton,
|
|
59
53
|
WeekNumber: ({ children, ...weekNumberProps }) => (_jsx("td", { ...weekNumberProps, children: _jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: children }) })),
|
|
60
54
|
...components,
|
|
61
55
|
}, ...props }));
|
|
62
56
|
};
|
|
63
|
-
|
|
57
|
+
const TIME_ITEM_HEIGHT = 32; // NOTE: px, h-8과 동일
|
|
58
|
+
const pad2 = (n) => String(n).padStart(2, '0');
|
|
59
|
+
const HOURS = Array.from({ length: 12 }, (_, i) => (i === 0 ? 12 : i));
|
|
60
|
+
const MINUTES = Array.from({ length: 60 }, (_, i) => i);
|
|
61
|
+
const SECONDS = Array.from({ length: 60 }, (_, i) => i);
|
|
62
|
+
const AMPM = ['am', 'pm'];
|
|
63
|
+
const to24Hour = (hour12, period) => {
|
|
64
|
+
const base = hour12 % 12; // 12 → 0
|
|
65
|
+
return period === 'pm' ? base + 12 : base;
|
|
66
|
+
};
|
|
67
|
+
const TimeScrollColumn = ({ values, selected, onSelect, ariaLabel, format = (v) => String(v), className, }) => {
|
|
68
|
+
const ref = useRef(null);
|
|
69
|
+
const mountRef = useRef(false);
|
|
70
|
+
useEffect(() => {
|
|
71
|
+
const el = ref.current;
|
|
72
|
+
if (!el)
|
|
73
|
+
return;
|
|
74
|
+
const idx = values.indexOf(selected);
|
|
75
|
+
if (idx < 0)
|
|
76
|
+
return;
|
|
77
|
+
const behavior = mountRef.current ? 'smooth' : 'auto';
|
|
78
|
+
mountRef.current = true;
|
|
79
|
+
el.scrollTo({
|
|
80
|
+
top: idx * TIME_ITEM_HEIGHT - (el.clientHeight - TIME_ITEM_HEIGHT) / 2,
|
|
81
|
+
behavior,
|
|
82
|
+
});
|
|
83
|
+
}, [selected, values]);
|
|
84
|
+
return (_jsx("div", { ref: ref, role: "listbox", "aria-label": ariaLabel, className: cn('h-full min-h-0 overflow-y-auto scrollbar-hover ld-transition w-auto border-neutral100 pt-1 pb-0', className), children: values.map((v) => (_jsx("button", { type: "button", role: "option", "aria-selected": v === selected, onClick: () => onSelect(v), className: cn('display14 flex h-8 w-10 items-center justify-center rounded-md text-sm ld-transition hover:cursor-pointer', v === selected ? 'bg-tintBlue text-lb500' : 'hover:bg-neutral50'), children: format(v) }, String(v)))) }));
|
|
85
|
+
};
|
|
86
|
+
export const TimePicker = ({ value, onChange, className, }) => {
|
|
87
|
+
const [hours, minutes, seconds, ampm] = useMemo(() => {
|
|
88
|
+
const [h = 0, m = 0, s = 0] = (value ?? '00:00:00')
|
|
89
|
+
.split(':')
|
|
90
|
+
.map((s) => parseInt(s, 10));
|
|
91
|
+
const ampm = h >= 12 ? 'pm' : 'am';
|
|
92
|
+
const hour = h % 12 === 0 ? 12 : h % 12;
|
|
93
|
+
return [hour, m, s, ampm];
|
|
94
|
+
}, [value]);
|
|
95
|
+
const commit = (hours, minutes, seconds, ampm) => {
|
|
96
|
+
onChange?.(`${pad2(to24Hour(hours, ampm))}:${pad2(minutes)}:${pad2(seconds)}`);
|
|
97
|
+
};
|
|
98
|
+
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
|
+
};
|
|
100
|
+
const CalendarDayButton = ({ className: btnClassName, day, modifiers, ...btnProps }) => {
|
|
64
101
|
const defaultClassNames = getDefaultClassNames();
|
|
65
102
|
const ref = useRef(null);
|
|
66
103
|
useEffect(() => {
|
|
@@ -70,6 +107,12 @@ function CalendarDayButton({ className: btnClassName, day, modifiers, ...btnProp
|
|
|
70
107
|
return (_jsxs("button", { ref: ref, type: "button", "data-day": day.date.toLocaleDateString(), "data-selected-single": modifiers.selected &&
|
|
71
108
|
!modifiers.range_start &&
|
|
72
109
|
!modifiers.range_end &&
|
|
73
|
-
!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-
|
|
74
|
-
|
|
75
|
-
|
|
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);
|
|
@@ -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;
|
|
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;AAUxB,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;4EACwE;IACxE,aAAa,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,KAAK,CAAC;IAClD,+CAA+C;IAC/C,OAAO,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,eAAe,CAAC,CAAC;IAC9E,2BAA2B;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA+GD,MAAM,WAAW,aAAa;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAeD,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAyBD,MAAM,WAAW,UAAU;IACzB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAmCD,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA+FD,MAAM,WAAW,SAAS;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA4BD,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACrD;AAgBD,eAAO,MAAM,YAAY;yHAjVtB,SAAS;wCAsG+B,aAAa;gDAmBL,cAAc;iEAwC9D,UAAU;8CAgCoC,cAAc;8CAwBd,cAAc;wCA0EpB,SAAS;qCAgCZ,YAAY;mDAlFE,cAAc;CA0GnE,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -4,8 +4,8 @@ import { createContext, useCallback, useContext, useEffect, useState, } from 're
|
|
|
4
4
|
import useEmblaCarousel from 'embla-carousel-react';
|
|
5
5
|
import Autoplay from 'embla-carousel-autoplay';
|
|
6
6
|
import AutoScroll from 'embla-carousel-auto-scroll';
|
|
7
|
-
import LucideIcon from '../Icon/LucideIcon.js';
|
|
8
7
|
import cn from '../../utils/cn.js';
|
|
8
|
+
import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, } from 'lucide-react';
|
|
9
9
|
const CarouselContext = createContext(null);
|
|
10
10
|
const useCarouselContext = () => {
|
|
11
11
|
const ctx = useContext(CarouselContext);
|
|
@@ -113,15 +113,19 @@ const Slide = ({ size = '100%', index, total, className, style, children, }) =>
|
|
|
113
113
|
};
|
|
114
114
|
const Prev = ({ className, children, ...props }) => {
|
|
115
115
|
const { scrollPrev, canScrollPrev, orientation } = useCarouselContext();
|
|
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 ??
|
|
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 ??
|
|
117
|
+
(orientation === 'vertical' ? (_jsx(ChevronUp, { size: 72, strokeWidth: 1.2 })) : (_jsx(ChevronLeft, { size: 72, strokeWidth: 1.2 }))) }));
|
|
117
118
|
};
|
|
118
119
|
const Next = ({ className, children, ...props }) => {
|
|
119
120
|
const { scrollNext, canScrollNext, orientation } = useCarouselContext();
|
|
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 ??
|
|
121
|
+
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 }))) }));
|
|
121
123
|
};
|
|
122
124
|
const TopArrows = ({ className, children, ...props }) => {
|
|
123
125
|
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 ??
|
|
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 }))) })] }));
|
|
125
129
|
};
|
|
126
130
|
const Dots = ({ className, dotClassName }) => {
|
|
127
131
|
const { scrollSnaps, selectedIndex, scrollTo } = useCarouselContext();
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { type ReactNode, type Ref } from 'react';
|
|
2
|
-
import { type IconName } from '../Icon/LucideIcon.js';
|
|
3
2
|
interface CheckboxContextType {
|
|
4
3
|
checked: boolean;
|
|
5
4
|
onCheckedChange: (checked: boolean) => void;
|
|
@@ -21,7 +20,6 @@ interface HiddenInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
|
21
20
|
ref?: Ref<HTMLInputElement>;
|
|
22
21
|
}
|
|
23
22
|
interface IndicatorProps {
|
|
24
|
-
icon?: IconName;
|
|
25
23
|
iconSize?: number;
|
|
26
24
|
className?: string;
|
|
27
25
|
iconClassName?: string;
|
|
@@ -33,7 +31,7 @@ interface LabelProps {
|
|
|
33
31
|
export declare const CheckboxBase: {
|
|
34
32
|
Root: ({ checked, defaultChecked, onCheckedChange, disabled, className, style, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
|
|
35
33
|
HiddenInput: ({ ref, onFocus, onBlur, onChange, ...props }: HiddenInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
36
|
-
Indicator: ({
|
|
34
|
+
Indicator: ({ iconSize, className, iconClassName, }: IndicatorProps) => import("react/jsx-runtime").JSX.Element;
|
|
37
35
|
Label: ({ className, children }: LabelProps) => import("react/jsx-runtime").JSX.Element;
|
|
38
36
|
};
|
|
39
37
|
export default CheckboxBase;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDCheckbox/CheckboxBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,GAAG,EAIT,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CheckboxBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDCheckbox/CheckboxBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,GAAG,EAIT,MAAM,OAAO,CAAC;AAKf,UAAU,mBAAmB;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAID,eAAO,MAAM,kBAAkB,2BAO9B,CAAC;AAGF,UAAU,SAAS;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAiDD,UAAU,gBAAiB,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC5E,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAqCD,UAAU,cAAc;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAeD,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD,eAAO,MAAM,YAAY;gGA1GtB,SAAS;gEAiDT,gBAAgB;yDAuChB,cAAc;qCAcuB,UAAU;CASjD,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { createContext, useContext, useState, } from 'react';
|
|
3
|
-
import LucideIcon from '../Icon/LucideIcon.js';
|
|
4
3
|
import cn from '../../utils/cn.js';
|
|
4
|
+
import { Check } from 'lucide-react';
|
|
5
5
|
const CheckboxContext = createContext(null);
|
|
6
6
|
export const useCheckboxContext = () => {
|
|
7
7
|
const ctx = useContext(CheckboxContext);
|
|
@@ -42,8 +42,8 @@ const HiddenInput = ({ ref, onFocus, onBlur, onChange, ...props }) => {
|
|
|
42
42
|
onBlur?.(e);
|
|
43
43
|
}, ...props }));
|
|
44
44
|
};
|
|
45
|
-
const Indicator = ({
|
|
46
|
-
return (_jsx("div", { className: className, children: _jsx(
|
|
45
|
+
const Indicator = ({ iconSize = 24, className, iconClassName, }) => {
|
|
46
|
+
return (_jsx("div", { className: className, children: _jsx(Check, { size: iconSize, className: iconClassName }) }));
|
|
47
47
|
};
|
|
48
48
|
const Label = ({ className, children }) => {
|
|
49
49
|
return _jsx("span", { className: className, children: children });
|
|
@@ -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;AAiGD,QAAA,MAAM,UAAU,GAAI,wJAgBjB,eAAe,4CAgDjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -14,12 +14,12 @@ const labelSizeClasses = {
|
|
|
14
14
|
// ── Inner: Context에서 checked를 읽어 스타일 적용 ──
|
|
15
15
|
const PillInner = ({ label, ref, ...props }) => {
|
|
16
16
|
const { checked } = useCheckboxContext();
|
|
17
|
-
return (_jsxs(_Fragment, { children: [_jsx(CheckboxBase.HiddenInput, { ref: ref, ...props }), _jsxs("div", { className: "relative flex items-center", children: [_jsx(CheckboxBase.Indicator, {
|
|
17
|
+
return (_jsxs(_Fragment, { children: [_jsx(CheckboxBase.HiddenInput, { ref: ref, ...props }), _jsxs("div", { className: "relative flex items-center", children: [_jsx(CheckboxBase.Indicator, { iconSize: 16, className: cn('absolute left-0'), iconClassName: cn('shrink-0 transition-all duration-200 ease-out', checked ? 'opacity-100' : 'opacity-0') }), label && (_jsx(CheckboxBase.Label, { className: cn('transition-all ld-transition text-nowrap', checked ? 'pl-5' : 'pl-sm pr-sm'), children: label }))] })] }));
|
|
18
18
|
};
|
|
19
19
|
const DefaultInner = ({ type, size, label, isRequired, ref, ...props }) => {
|
|
20
20
|
const { checked, disabled } = useCheckboxContext();
|
|
21
|
-
return (_jsxs(_Fragment, { children: [_jsx(CheckboxBase.HiddenInput, { ref: ref, ...props }), _jsx(CheckboxBase.Indicator, {
|
|
22
|
-
'border-2 rounded-[5px]
|
|
21
|
+
return (_jsxs(_Fragment, { children: [_jsx(CheckboxBase.HiddenInput, { ref: ref, ...props }), _jsx(CheckboxBase.Indicator, { iconSize: type === 'checkbox' ? 10 : checkIconSizes[size], className: cn('ld-transition', type === 'checkbox' &&
|
|
22
|
+
'border-none outline-2 rounded-[5px] -outline-offset-2 outline-mono300 p-1', type === 'checkbox' && checked && 'bg-lb500 outline-lb500', type === 'checkbox' && disabled && 'bg-mono100 outline-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
23
|
? checked
|
|
24
24
|
? 'text-white'
|
|
25
25
|
: 'text-transparent'
|
|
@@ -31,6 +31,6 @@ const LDCheckbox = ({ checked, defaultChecked, onCheckedChange, onChange, size =
|
|
|
31
31
|
if (type === 'pill') {
|
|
32
32
|
return (_jsx(CheckboxBase.Root, { checked: checked, defaultChecked: defaultChecked, onCheckedChange: onCheckedChange, disabled: disabled, style: style, className: (c) => cn('items-center gap-2 rounded-full py-sm px-[15px] ld-transition display14 bold', c ? 'bg-tintBlue text-lb500' : 'bg-mono100 text-mono500', disabled && 'opacity-50 cursor-not-allowed', className), children: _jsx(PillInner, { label: label, ref: ref, onChange: onChange, ...props }) }));
|
|
33
33
|
}
|
|
34
|
-
return (_jsx(CheckboxBase.Root, { checked: checked, defaultChecked: defaultChecked, onCheckedChange: onCheckedChange, disabled: disabled, style: style, className: cn('bold items-
|
|
34
|
+
return (_jsx(CheckboxBase.Root, { checked: checked, defaultChecked: defaultChecked, onCheckedChange: onCheckedChange, disabled: disabled, style: style, className: cn('bold items-center ld-transition', itemCenter && 'items-center', labelSizeClasses[fontSize], className), children: _jsx(DefaultInner, { type: type, size: size, label: label, isRequired: isRequired, ref: ref, onChange: onChange, ...props }) }));
|
|
35
35
|
};
|
|
36
36
|
export default LDCheckbox;
|
|
@@ -8,6 +8,6 @@ const LDCheckboxGroup = ({ items, value = [], onChange, disabled = false, type =
|
|
|
8
8
|
: [...value, target];
|
|
9
9
|
onChange?.(arr);
|
|
10
10
|
};
|
|
11
|
-
return (_jsx("div", { className: cn('flex gap-
|
|
11
|
+
return (_jsx("div", { className: cn('flex gap-5', orientation === 'vertical' ? 'flex-col' : 'flex-row', className), style: style, children: items.map((option) => (_jsx(LDCheckbox, { type: type, size: size, fontSize: fontSize, checked: value.includes(option.value), onCheckedChange: () => handleChange(option.value), label: option.label, disabled: disabled || option.disabled }, option.value))) }));
|
|
12
12
|
};
|
|
13
13
|
export default LDCheckboxGroup;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { type Ref } from 'react';
|
|
2
|
+
import { type RegisterOptions } from 'react-hook-form';
|
|
3
|
+
import { type LDCheckboxProps } from './LDCheckbox.js';
|
|
4
|
+
interface LDFormCheckboxProps extends Omit<LDCheckboxProps, 'checked' | 'name' | 'onCheckedChange'> {
|
|
5
|
+
name: string;
|
|
6
|
+
options?: RegisterOptions;
|
|
7
|
+
ref?: Ref<HTMLInputElement>;
|
|
8
|
+
customErrorMessage?: string;
|
|
9
|
+
isHiddenErrorMessage?: boolean;
|
|
10
|
+
errorClassName?: string;
|
|
11
|
+
}
|
|
12
|
+
declare const LDFormCheckbox: ({ name, options, ref, customErrorMessage, isHiddenErrorMessage, errorClassName, disabled, ...props }: LDFormCheckboxProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export default LDFormCheckbox;
|
|
14
|
+
//# sourceMappingURL=LDFormCheckbox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LDFormCheckbox.d.ts","sourceRoot":"","sources":["../../../src/components/LDCheckbox/LDFormCheckbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAIhE,UAAU,mBAAoB,SAAQ,IAAI,CACxC,eAAe,EACf,SAAS,GAAG,MAAM,GAAG,iBAAiB,CACvC;IACC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,cAAc,GAAI,sGASrB,mBAAmB,4CA8BrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import LDCheckbox from './LDCheckbox.js';
|
|
4
4
|
import FormField from '../LDForm/LDFormField.js';
|
|
5
5
|
import FormErrorMessage from '../LDForm/LDFormErrorMessage.js';
|
|
6
|
-
const
|
|
6
|
+
const LDFormCheckbox = ({ 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
|
};
|
|
9
|
-
export default
|
|
9
|
+
export default LDFormCheckbox;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { type RegisterOptions } from 'react-hook-form';
|
|
2
|
+
import { type LDCheckboxGroupProps } from './LDCheckboxGroup.js';
|
|
3
|
+
interface LDFormCheckboxGroupProps extends Omit<LDCheckboxGroupProps, 'value' | 'onChange'> {
|
|
4
|
+
name: string;
|
|
5
|
+
options?: RegisterOptions;
|
|
6
|
+
customErrorMessage?: string;
|
|
7
|
+
isHiddenErrorMessage?: boolean;
|
|
8
|
+
errorClassName?: string;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
}
|
|
11
|
+
declare const LDFormCheckboxGroup: ({ name, options, customErrorMessage, isHiddenErrorMessage, errorClassName, disabled, ...props }: LDFormCheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export default LDFormCheckboxGroup;
|
|
13
|
+
//# sourceMappingURL=LDFormCheckboxGroup.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LDFormCheckboxGroup.d.ts","sourceRoot":"","sources":["../../../src/components/LDCheckbox/LDFormCheckboxGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAwB,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAI/E,UAAU,wBAAyB,SAAQ,IAAI,CAC7C,oBAAoB,EACpB,OAAO,GAAG,UAAU,CACrB;IACC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,mBAAmB,GAAI,iGAQ1B,wBAAwB,4CA2B1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
|
|
@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import LDCheckboxGroup from './LDCheckboxGroup.js';
|
|
4
4
|
import FormField from '../LDForm/LDFormField.js';
|
|
5
5
|
import FormErrorMessage from '../LDForm/LDFormErrorMessage.js';
|
|
6
|
-
const
|
|
6
|
+
const LDFormCheckboxGroup = ({ 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
|
};
|
|
9
|
-
export default
|
|
9
|
+
export default LDFormCheckboxGroup;
|
|
@@ -1,19 +1,24 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
|
+
type DatePickerVariant = 'filled' | 'outline';
|
|
3
|
+
type DatePickerColor = 'neutral' | 'point' | 'danger';
|
|
2
4
|
export interface LDDatePickerProps {
|
|
5
|
+
variant?: DatePickerVariant;
|
|
6
|
+
color?: DatePickerColor;
|
|
3
7
|
/** 선택된 날짜 (controlled) */
|
|
4
8
|
value?: Date;
|
|
5
|
-
/**
|
|
9
|
+
/** 원래 값(baseline). 현재 값이 이 값과 다르면 rotate가 나타나고, 누르면 이 값으로 되돌린다. */
|
|
6
10
|
defaultValue?: Date;
|
|
7
|
-
/**
|
|
11
|
+
/** 확인/닫기 시 커밋되는 콜백 */
|
|
8
12
|
onChange?: (value: Date | undefined) => void;
|
|
9
13
|
/** 미선택 시 표시할 텍스트 */
|
|
10
14
|
placeholder?: string;
|
|
15
|
+
dateFormat?: string;
|
|
16
|
+
timeFormat?: string;
|
|
11
17
|
/** 비활성화 여부 */
|
|
12
18
|
disabled?: boolean;
|
|
13
19
|
/** true 시 너비 100% */
|
|
14
20
|
block?: boolean;
|
|
15
21
|
/** 색상 테마 (danger 시 에러 스타일) */
|
|
16
|
-
color?: 'neutral' | 'danger';
|
|
17
22
|
/** 현재 시점 이후 날짜 선택 비활성화 */
|
|
18
23
|
isDisableAfterNow?: boolean;
|
|
19
24
|
/** 최소 선택 가능 날짜 */
|
|
@@ -28,7 +33,8 @@ export interface LDDatePickerProps {
|
|
|
28
33
|
style?: React.CSSProperties;
|
|
29
34
|
/** 트리거 버튼 className */
|
|
30
35
|
triggerClassName?: string;
|
|
36
|
+
isExistTime?: boolean;
|
|
31
37
|
}
|
|
32
|
-
declare const LDDatePicker: ({ value, defaultValue, onChange, placeholder, disabled, block,
|
|
38
|
+
declare const LDDatePicker: ({ variant, color, value, defaultValue, onChange, placeholder, dateFormat, timeFormat, disabled, block, isDisableAfterNow, minDate, trailingIcon, showReset, isExistTime, className, style, triggerClassName, }: LDDatePickerProps) => import("react/jsx-runtime").JSX.Element;
|
|
33
39
|
export default LDDatePicker;
|
|
34
40
|
//# sourceMappingURL=LDDatePicker.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LDDatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/LDDatePicker/LDDatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"LDDatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/LDDatePicker/LDDatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AASf,KAAK,iBAAiB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAC9C,KAAK,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAYtD,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,mEAAmE;IACnE,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,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8BAA8B;IAC9B,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;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAyBD,QAAA,MAAM,YAAY,GAAI,gNAmBnB,iBAAiB,4CA2KnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
|