@likelion-design/ui 1.0.20 → 1.0.22

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/index.d.mts CHANGED
@@ -4,7 +4,6 @@ import React from 'react';
4
4
  type ButtonSize = "xlarge" | "large" | "medium" | "small";
5
5
  type ButtonColor = "primary" | "neutral" | "secondary";
6
6
  type ButtonType = "solid" | "outline" | "ghost" | "weak";
7
- type ButtonState = "enabled" | "hovered" | "loading" | "disabled";
8
7
  interface ActionButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
9
8
  /** 버튼 크기 */
10
9
  size?: ButtonSize;
@@ -14,57 +13,45 @@ interface ActionButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
14
13
  type?: ButtonType;
15
14
  /** HTML 버튼 타입 (button, submit, reset) */
16
15
  htmlType?: "button" | "submit" | "reset";
17
- /** 버튼 상태 */
18
- state?: ButtonState;
16
+ /** 비활성화 */
17
+ disabled?: boolean;
18
+ /** 로딩 상태 */
19
+ loading?: boolean;
19
20
  /** 버튼 텍스트 */
20
21
  label: React.ReactNode;
21
22
  /** Prefix 아이콘 */
22
23
  prefixIcon?: React.ReactNode;
23
24
  /** Suffix 아이콘 */
24
25
  suffixIcon?: React.ReactNode;
25
- /** 로딩 상태일 때 표시할 스피너 */
26
- loading?: boolean;
27
26
  }
28
27
  /** ActionButton 컴포넌트는 사용자가 어떠한 액션을 트리거하거나 이벤트를 실행할 때 사용한다. */
29
- declare const ActionButton: ({ size, color, type, htmlType, state, label, prefixIcon, suffixIcon, loading, className, disabled, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
28
+ declare const ActionButton: ({ size, color, type, htmlType, label, prefixIcon, suffixIcon, loading, className, disabled, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
30
29
 
31
30
  type IconButtonSize = "xlarge" | "large" | "medium" | "small";
32
31
  /** 버튼 색상. solid/outline: primary | neutral | secondary. weak: primary | neutral-dark | neutral-light */
33
32
  type IconButtonColor = "primary" | "neutral" | "secondary" | "neutral-dark" | "neutral-light";
34
33
  /** 버튼 타입. weak일 때 color로 primary / neutral-dark / neutral-light 구분 */
35
34
  type IconButtonType = "solid" | "outline" | "weak";
36
- type IconButtonState = "enabled" | "hovered" | "disabled";
37
- /** 기본 색상에 없는 커스텀 색상 (inline style로 적용, 클래스보다 우선) */
38
- interface IconButtonCustomColor {
39
- /** 배경색 */
40
- background?: string;
41
- /** 아이콘(전경) 색상 */
42
- color?: string;
43
- }
35
+ /** IconButton 슬롯 */
36
+ type IconButtonSlot = "root" | "icon";
44
37
  interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
45
38
  /** 버튼 크기 */
46
39
  size?: IconButtonSize;
47
- /** 버튼 색상. 기본 세트: primary, neutral, secondary 등. 없으면 customColor 또는 style로 지정 */
40
+ /** 버튼 색상. 기본 세트: primary, neutral, secondary */
48
41
  color?: IconButtonColor;
49
42
  /** 버튼 타입 (solid, outline, weak) */
50
43
  type?: IconButtonType;
51
- /** 버튼 상태 */
52
- state?: IconButtonState;
44
+ /** 비활성화 */
45
+ disabled?: boolean;
53
46
  /** 아이콘 (Heroicons 또는 React 컴포넌트) */
54
47
  icon: React.ReactNode;
55
- /** 아이콘에 대한 접근성 라벨 */
56
- "aria-label": string;
57
48
  /** button 요소의 type (submit 등). 기본값 button */
58
49
  htmlType?: "button" | "submit" | "reset";
59
- /**
60
- * 기본 팔레트에 없는 색상 사용 시.
61
- * 지정 시 inline style로 적용되어 클래스 스타일보다 우선합니다.
62
- * hover/disabled는 적용되지 않으므로, 필요 시 style prop으로 보완하세요.
63
- */
64
- customColor?: IconButtonCustomColor;
50
+ /** 각 슬롯별 인라인 스타일 (root, icon) */
51
+ styles?: Partial<Record<IconButtonSlot, React.CSSProperties>>;
65
52
  }
66
53
  /** IconButton 컴포넌트는 텍스트 레이블 없이 아이콘만으로 액션을 전달하는 버튼 컴포넌트이다. */
67
- declare const IconButton: ({ size, color, type, state, icon, className, disabled, htmlType, style: propsStyle, customColor, ...props }: IconButtonProps) => react_jsx_runtime.JSX.Element;
54
+ declare const IconButton: ({ size, color, type, icon, className, disabled, htmlType, style: propsStyle, styles, ...props }: IconButtonProps) => react_jsx_runtime.JSX.Element;
68
55
 
69
56
  type TabType = "round" | "text";
70
57
  type TabSize = "large" | "medium";
@@ -77,7 +64,7 @@ interface TabProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "
77
64
  badge?: boolean;
78
65
  /** 탭 라벨 */
79
66
  label: React.ReactNode;
80
- /** 탭 값 (Tab.Group에서 사용 시 식별자) */
67
+ /** 탭 값 (TabGroup에서 사용 시 식별자) */
81
68
  value?: string;
82
69
  /** 다크 모드 여부 */
83
70
  mode?: boolean;
@@ -124,7 +111,7 @@ interface TabGroupProps {
124
111
  /** 인라인 스타일 */
125
112
  style?: React.CSSProperties;
126
113
  }
127
- /** Tab.Group은 여러 Tab을 그룹화하여 단일 선택을 관리한다. */
114
+ /** TabGroup은 여러 Tab을 그룹화하여 단일 선택을 관리한다. */
128
115
  declare const TabGroup: {
129
116
  ({ value: valueProp, defaultValue, onChange, type, size, mode, disabled, items, children, gap, className, style, }: TabGroupProps): react_jsx_runtime.JSX.Element;
130
117
  displayName: string;
@@ -170,6 +157,24 @@ interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
170
157
  /** Close 버튼 클릭 핸들러 */
171
158
  onClose?: (e: React.MouseEvent<HTMLButtonElement>) => void;
172
159
  }
160
+ interface ChipItem {
161
+ /** Chip 식별 값 */
162
+ value: string;
163
+ /** Chip 라벨 */
164
+ label: React.ReactNode;
165
+ /** Prefix 아이콘 */
166
+ prefixIcon?: React.ReactNode;
167
+ /** Suffix 아이콘 */
168
+ suffixIcon?: React.ReactNode;
169
+ /** 체크 아이콘 표시 여부 */
170
+ showCheck?: boolean;
171
+ /** Close 버튼 표시 여부 */
172
+ showClose?: boolean;
173
+ /** Close 버튼 클릭 핸들러 */
174
+ onClose?: (e: React.MouseEvent<HTMLButtonElement>) => void;
175
+ /** 개별 Chip 비활성화 */
176
+ disabled?: boolean;
177
+ }
173
178
  interface ChipGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
174
179
  /** 선택된 값 (controlled) - 단일: string, 다중: string[] */
175
180
  value?: string | string[];
@@ -189,12 +194,14 @@ interface ChipGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onC
189
194
  showCheck?: boolean;
190
195
  /** 전체 비활성화 */
191
196
  disabled?: boolean;
192
- /** 자식 Chip 컴포넌트들 */
193
- children: React.ReactNode;
197
+ /** Chip 데이터 배열 (items 사용 시 children 불필요) */
198
+ items?: readonly ChipItem[];
199
+ /** 자식 Chip 컴포넌트들 (items 미사용 시) */
200
+ children?: React.ReactNode;
194
201
  }
195
- /** Chip.Group은 여러 Chip을 그룹화하여 단일/다중 선택을 관리한다. */
202
+ /** ChipGroup은 여러 Chip을 그룹화하여 단일/다중 선택을 관리한다. */
196
203
  declare const ChipGroup: {
197
- ({ value: valueProp, defaultValue, onChange, multiple, type, size, variant, showCheck, disabled, children, className, ...rest }: ChipGroupProps): react_jsx_runtime.JSX.Element;
204
+ ({ value: valueProp, defaultValue, onChange, multiple, type, size, variant, showCheck, disabled, items, children, className, ...rest }: ChipGroupProps): react_jsx_runtime.JSX.Element;
198
205
  displayName: string;
199
206
  };
200
207
  declare const Chip: {
@@ -202,7 +209,7 @@ declare const Chip: {
202
209
  displayName: string;
203
210
  } & {
204
211
  Group: {
205
- ({ value: valueProp, defaultValue, onChange, multiple, type, size, variant, showCheck, disabled, children, className, ...rest }: ChipGroupProps): react_jsx_runtime.JSX.Element;
212
+ ({ value: valueProp, defaultValue, onChange, multiple, type, size, variant, showCheck, disabled, items, children, className, ...rest }: ChipGroupProps): react_jsx_runtime.JSX.Element;
206
213
  displayName: string;
207
214
  };
208
215
  };
@@ -647,6 +654,16 @@ interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
647
654
  }
648
655
  /** Checkbox 컴포넌트는 사용자가 선택/해제할 수 있는 체크박스 입력 컴포넌트다. */
649
656
  declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
657
+ interface CheckboxItem {
658
+ /** 체크박스 식별 값 */
659
+ value: string;
660
+ /** 체크박스 라벨 */
661
+ label?: React.ReactNode;
662
+ /** 체크박스 설명 텍스트 */
663
+ description?: React.ReactNode;
664
+ /** 개별 체크박스 비활성화 */
665
+ disabled?: boolean;
666
+ }
650
667
  interface CheckboxGroupProps {
651
668
  /** 그룹 라벨 */
652
669
  label?: React.ReactNode;
@@ -670,14 +687,16 @@ interface CheckboxGroupProps {
670
687
  onChange?: (values: string[]) => void;
671
688
  /** 비활성화 상태 */
672
689
  disabled?: boolean;
673
- /** 자식 Checkbox 컴포넌트들 */
674
- children: React.ReactNode;
690
+ /** 체크박스 데이터 배열 (items 사용 시 children 불필요) */
691
+ items?: readonly CheckboxItem[];
692
+ /** 자식 Checkbox 컴포넌트들 (items 미사용 시) */
693
+ children?: React.ReactNode;
675
694
  /** 추가 CSS 클래스명 */
676
695
  className?: string;
677
696
  }
678
- /** Checkbox.Group은 여러 Checkbox를 그룹화하여 관리할 수 있는 컴포넌트다. */
697
+ /** CheckboxGroup은 여러 Checkbox를 그룹화하여 관리할 수 있는 컴포넌트다. */
679
698
  declare const CheckboxGroup: {
680
- ({ label, labelProps, description, descriptionProps, multiple, value: valueProp, defaultValue, onChange, disabled, children, className, }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
699
+ ({ label, labelProps, description, descriptionProps, multiple, value: valueProp, defaultValue, onChange, disabled, items, children, className, }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
681
700
  displayName: string;
682
701
  };
683
702
 
@@ -729,6 +748,8 @@ interface SelectMenuItem {
729
748
  value: string;
730
749
  label: React.ReactNode;
731
750
  disabled?: boolean;
751
+ /** 항목 왼쪽 아이콘 */
752
+ icon?: React.ReactNode;
732
753
  }
733
754
  interface SelectMenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
734
755
  /** 메뉴 항목들 */
@@ -777,7 +798,7 @@ declare const SelectMenuOverlay: {
777
798
 
778
799
  type SelectHeaderType = "outlined" | "underlined";
779
800
  type SelectHeaderSize = "medium" | "small";
780
- interface SelectHeaderProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onChange" | "value"> {
801
+ interface SelectHeaderProps {
781
802
  /** SelectHeader 타입 */
782
803
  type?: SelectHeaderType;
783
804
  /**
@@ -804,9 +825,11 @@ interface SelectHeaderProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
804
825
  /** Help text 아이콘 (true면 기본 아이콘, 노드면 커스텀, false면 아이콘 없음) */
805
826
  accentIcon?: boolean | React.ReactNode;
806
827
  /** 클릭 핸들러 */
807
- onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
828
+ onClick?: (event: React.MouseEvent<HTMLElement>) => void;
808
829
  /** 값 클리어 핸들러 */
809
- onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;
830
+ onClear?: (event: React.MouseEvent<HTMLElement>) => void;
831
+ /** 왼쪽 prefix 아이콘 (TextField prefixIcon으로 전달) */
832
+ prefixIcon?: React.ReactNode;
810
833
  /** 커스텀 아이콘 */
811
834
  icon?: React.ReactNode;
812
835
  /** SelectMenu 항목들 (있으면 클릭 시 메뉴 열림) */
@@ -825,6 +848,10 @@ interface SelectHeaderProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
825
848
  wrapperStyle?: React.CSSProperties;
826
849
  /** 너비 설정 (예: "100%", "300px"). 설정 시 max-width 제한이 해제됨 */
827
850
  width?: string | number;
851
+ /** 추가 CSS 클래스명 */
852
+ className?: string;
853
+ /** 요소 ID */
854
+ id?: string;
828
855
  /** SelectMenu에 전달: 항목 텍스트 스타일 오버라이드 */
829
856
  menuItemTextProps?: SelectMenuProps["itemTextProps"];
830
857
  /** SelectMenu에 전달: 선택된 항목 suffix 아이콘 */
@@ -837,58 +864,78 @@ interface SelectHeaderProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
837
864
  menuStyle?: React.CSSProperties;
838
865
  }
839
866
  /** SelectHeader 컴포넌트는 선택된 값을 표시하고 드롭다운을 여는 헤더 컴포넌트다. items를 주면 클릭 시 메뉴가 열린다. */
840
- declare const SelectHeader: React.ForwardRefExoticComponent<SelectHeaderProps & React.RefAttributes<HTMLButtonElement>>;
867
+ declare const SelectHeader: {
868
+ ({ type, title, required, value: valueProp, placeholder, disabled, error, description, accentIcon, onClick, onClear, prefixIcon, icon, className, id, items, defaultValue, onChange, multiple, showClear, wrapperClassName, wrapperStyle, width, size, menuItemTextProps, menuSuffixIcon, menuGap, menuClassName, menuStyle, }: SelectHeaderProps): react_jsx_runtime.JSX.Element;
869
+ displayName: string;
870
+ };
841
871
 
842
- type SelectBoxType = "default" | "label" | "placeholder";
843
- type SelectBoxSize = "small" | "medium" | "large" | "full";
844
- type SelectBoxState = "default" | "active" | "disabled" | "error" | "success" | "loading";
845
- /** root/header/menu별 className 또는 전체 적용 */
846
- type SelectBoxClassName = string | {
872
+ type SelectBoxSize = "small" | "medium";
873
+ /** 파트별 className 오버라이드 */
874
+ type SelectBoxClassNames = {
847
875
  root?: string;
848
876
  header?: string;
849
877
  menu?: string;
850
878
  };
851
- /** root/header/menu별 style 또는 전체 적용 */
852
- type SelectBoxStyle = React.CSSProperties | {
879
+ /** 파트별 style 오버라이드 */
880
+ type SelectBoxStyles = {
853
881
  root?: React.CSSProperties;
854
882
  header?: React.CSSProperties;
855
883
  menu?: React.CSSProperties;
856
884
  };
857
885
  /** SelectBox 전용 props (label는 SelectHeader title에 매핑) */
858
886
  type SelectBoxSpecificProps = {
859
- /** SelectBox 타입 (Default: 라벨 없음, Label: 라벨 있음, Placeholder: 라벨+플레이스홀더) */
860
- type?: SelectBoxType;
861
887
  /** SelectBox 사이즈 */
862
888
  size?: SelectBoxSize;
863
- /** SelectBox 상태 */
864
- state?: SelectBoxState;
889
+ /** 비활성화 */
890
+ disabled?: boolean;
891
+ /** 에러 상태 */
892
+ error?: boolean;
893
+ /** 성공 상태 */
894
+ success?: boolean;
895
+ /** 로딩 상태 */
896
+ loading?: boolean;
865
897
  /** 라벨 텍스트 (SelectHeader title에 매핑) */
866
898
  label?: string;
867
- /** Helper text (에러/성공 시 표시) */
868
- helperText?: string;
899
+ /** 하단 설명 텍스트 */
900
+ description?: string;
901
+ /**
902
+ * 왼쪽 prefix 아이콘. 미지정 시 단일 선택인 경우 선택된 항목의 icon을 자동 감지.
903
+ * false로 설정하면 자동 감지를 비활성화.
904
+ */
905
+ prefixIcon?: React.ReactNode | false;
906
+ /** root에 적용할 className */
907
+ className?: string;
908
+ /** root에 적용할 인라인 스타일 */
909
+ style?: React.CSSProperties;
869
910
  /**
870
- * className: 문자열이면 root에 적용, 객체면 root/header/menu 각각 적용
871
- * @example className="w-12"
872
- * @example className={{ root: "w-12", header: "border-red-500", menu: "border-red-500" }}
911
+ * 파트별 className 오버라이드
912
+ * @example classNames={{ root: "w-12", header: "border-red-500", menu: "bg-gray-50" }}
873
913
  */
874
- className?: SelectBoxClassName;
914
+ classNames?: SelectBoxClassNames;
875
915
  /**
876
- * style: 객체면 root/header/menu 각각 적용
877
- * @example style={{ root: { width: 48 }, header: { borderColor: "red" }, menu: { borderColor: "red" } }}
916
+ * 파트별 인라인 스타일 오버라이드
917
+ * @example styles={{ header: { borderColor: "red" }, menu: { maxHeight: 200 } }}
878
918
  */
879
- style?: SelectBoxStyle;
919
+ styles?: SelectBoxStyles;
920
+ /** 너비 설정 (예: "100%", 300). 미지정 시 CSS 기본 360px */
921
+ width?: string | number;
880
922
  };
881
923
  /** SelectHeader에서 SelectBox가 오버라이드하는 props 제외 */
882
- type SelectHeaderPassThrough = Omit<SelectHeaderProps, "type" | "size" | "title" | "disabled" | "error" | "description" | "accentIcon" | "icon" | "wrapperClassName" | "menuClassName" | "menuStyle" | "style" | "className"> & {
924
+ type SelectHeaderPassThrough = Omit<SelectHeaderProps, "type" | "size" | "title" | "disabled" | "error" | "description" | "accentIcon" | "icon" | "prefixIcon" | "wrapperClassName" | "menuClassName" | "menuStyle" | "style" | "className" | "width"> & {
883
925
  /** SelectHeader 타입 (outlined | underlined) */
884
926
  headerType?: SelectHeaderType;
885
927
  };
886
- /** SelectMenu props (SelectHeader menuItemTextProps, menuSuffixIcon로 전달) */
887
- type SelectMenuPassThrough = Pick<SelectMenuProps, "itemTextProps" | "suffixIcon">;
928
+ /** SelectMenu props (SelectHeader 통해 SelectMenu로 전달) */
929
+ type SelectMenuPassThrough = {
930
+ /** 메뉴 항목 텍스트 스타일 오버라이드 */
931
+ itemTextProps?: SelectMenuProps["itemTextProps"];
932
+ /** 선택된 항목의 suffix 아이콘 (기본: 체크 아이콘). false면 숨김 */
933
+ suffixIcon?: SelectMenuProps["suffixIcon"];
934
+ };
888
935
  type SelectBoxProps = SelectBoxSpecificProps & SelectHeaderPassThrough & SelectMenuPassThrough;
889
936
  /** SelectBox는 SelectHeader와 SelectMenu를 하나로 통합한 컴포넌트로, 미리 정의된 목록에서 항목을 선택하도록 돕습니다. */
890
937
  declare const SelectBox: {
891
- ({ type, size, state, label, required, placeholder, items, value, defaultValue, onChange, multiple, helperText, className, style, width, headerType, onClear, showClear, wrapperStyle, onClick, id, itemTextProps, suffixIcon, ...restHeaderProps }: SelectBoxProps): react_jsx_runtime.JSX.Element;
938
+ ({ size, disabled, error, success, loading, label, required, placeholder, items, value, defaultValue, onChange, multiple, description, prefixIcon, className, style, classNames, styles, width, headerType, onClear, showClear, wrapperStyle, onClick, id, itemTextProps, suffixIcon, ...restHeaderProps }: SelectBoxProps): react_jsx_runtime.JSX.Element;
892
939
  displayName: string;
893
940
  };
894
941
 
@@ -927,6 +974,16 @@ interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInputEleme
927
974
  }
928
975
  /** RadioButton은 단일 선택(라디오) 입력 컴포넌트다. */
929
976
  declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
977
+ interface RadioButtonItem {
978
+ /** 라디오 식별 값 */
979
+ value: string;
980
+ /** 라디오 라벨 */
981
+ label?: React.ReactNode;
982
+ /** 라디오 설명 텍스트 */
983
+ description?: React.ReactNode;
984
+ /** 개별 라디오 비활성화 */
985
+ disabled?: boolean;
986
+ }
930
987
  interface RadioButtonGroupProps {
931
988
  /** 그룹 라벨 */
932
989
  label?: React.ReactNode;
@@ -950,14 +1007,16 @@ interface RadioButtonGroupProps {
950
1007
  disabled?: boolean;
951
1008
  /** name (미지정 시 내부 생성) */
952
1009
  name?: string;
953
- /** 자식 RadioButton 컴포넌트들 */
954
- children: React.ReactNode;
1010
+ /** 라디오 데이터 배열 (items 사용 시 children 불필요) */
1011
+ items?: readonly RadioButtonItem[];
1012
+ /** 자식 RadioButton 컴포넌트들 (items 미사용 시) */
1013
+ children?: React.ReactNode;
955
1014
  /** 추가 CSS 클래스명 */
956
1015
  className?: string;
957
1016
  }
958
- /** RadioButton.Group은 여러 RadioButton을 그룹화하여 단일 선택을 관리한다. */
1017
+ /** RadioButtonGroup은 여러 RadioButton을 그룹화하여 단일 선택을 관리한다. */
959
1018
  declare const RadioButtonGroup: {
960
- ({ label, labelProps, description, descriptionProps, value: valueProp, defaultValue, onChange, disabled, name, children, className, }: RadioButtonGroupProps): react_jsx_runtime.JSX.Element;
1019
+ ({ label, labelProps, description, descriptionProps, value: valueProp, defaultValue, onChange, disabled, name, items, children, className, }: RadioButtonGroupProps): react_jsx_runtime.JSX.Element;
961
1020
  displayName: string;
962
1021
  };
963
1022
 
@@ -1154,25 +1213,25 @@ interface CalendarProps {
1154
1213
  declare const Calendar: React.FC<CalendarProps>;
1155
1214
 
1156
1215
  type DateInputType = "single" | "range";
1157
- type DateInputState = "default" | "selected" | "disabled";
1158
1216
  /**
1159
1217
  * DateInput 내부 서브 요소 슬롯 이름.
1160
1218
  * classNames / styles 객체의 키로 사용됩니다.
1161
1219
  *
1162
1220
  * - `root` — 최상위 wrapper (`date-input`)
1163
- * - `content` — 입력 영역 (`date-input__content`)
1164
- * - `icon` — prefix 캘린더 아이콘
1165
- * - `text` — 날짜 텍스트 표시 영역
1221
+ * - `content` — 입력 영역
1222
+ * - `icon` — prefix 캘린더 아이콘 (range 모드에서만 사용)
1223
+ * - `text` — 날짜 텍스트 표시 영역 (range 모드에서만 사용)
1166
1224
  * - `separator` — range 모드 구분자 (`-`)
1167
- * - `reset` — 초기화 버튼
1168
- * - `help` — 도움말 텍스트 영역
1225
+ * - `reset` — 초기화 버튼 (range 모드에서만 사용)
1169
1226
  */
1170
- type DateInputSlot = "root" | "content" | "icon" | "text" | "separator" | "reset" | "help";
1227
+ type DateInputSlot = "root" | "content" | "icon" | "text" | "separator" | "reset";
1171
1228
  interface DateInputProps {
1172
1229
  /** 입력 타입: 단일 날짜 또는 기간 */
1173
1230
  type?: DateInputType;
1174
- /** 상태 */
1175
- state?: DateInputState;
1231
+ /** 비활성화 */
1232
+ disabled?: boolean;
1233
+ /** 에러 상태 */
1234
+ error?: boolean;
1176
1235
  /** 선택된 날짜 (single 모드) */
1177
1236
  value?: Date | null;
1178
1237
  /** 시작 날짜 (range 모드) */
@@ -1183,12 +1242,8 @@ interface DateInputProps {
1183
1242
  prefixIcon?: boolean;
1184
1243
  /** 초기화 버튼 표시 여부 (single / range 모두 지원) */
1185
1244
  reset?: boolean;
1186
- /** help text */
1187
- helpText?: string;
1188
- /** 도움말 글자수 카운터 현재값 */
1189
- helpCount?: number;
1190
- /** 도움말 글자수 카운터 최대값 */
1191
- helpMaxCount?: number;
1245
+ /** 도움말 텍스트 */
1246
+ description?: string;
1192
1247
  /** 날짜 표시 포맷 (locale) */
1193
1248
  locale?: string;
1194
1249
  /** 단일 모드 플레이스홀더 */
@@ -1221,33 +1276,20 @@ interface DateInputProps {
1221
1276
  /**
1222
1277
  * 각 서브 요소별 커스텀 CSS 클래스.
1223
1278
  * 기존 요소의 기본 className에 병합(추가)됩니다.
1224
- *
1225
- * @example
1226
- * classNames={{
1227
- * root: "my-input",
1228
- * content: "my-content",
1229
- * icon: "my-icon",
1230
- * }}
1231
1279
  */
1232
1280
  classNames?: Partial<Record<DateInputSlot, string>>;
1233
1281
  /**
1234
1282
  * 각 서브 요소별 인라인 스타일.
1235
1283
  * 해당 요소에 style 속성으로 적용됩니다.
1236
- *
1237
- * @example
1238
- * styles={{
1239
- * content: { height: 40, borderRadius: 8 },
1240
- * icon: { color: "red" },
1241
- * }}
1242
1284
  */
1243
1285
  styles?: Partial<Record<DateInputSlot, React.CSSProperties>>;
1244
1286
  }
1245
1287
  /**
1246
1288
  * Date를 포맷 문자열에 따라 변환합니다.
1247
1289
  * 지원 토큰: yyyy, MM, M, dd, d, HH, mm
1248
- * format이 없으면 기본 "yyyy. M. d" 형식을 사용합니다.
1290
+ * format이 없으면 locale 기반 기본 포맷을 사용합니다.
1249
1291
  */
1250
- declare const formatDate: (d: Date | null | undefined, format?: string) => string;
1292
+ declare const formatDate: (d: Date | null | undefined, format?: string, locale?: string) => string;
1251
1293
  /**
1252
1294
  * 날짜 문자열을 Date 객체로 파싱합니다.
1253
1295
  *
@@ -1313,8 +1355,14 @@ interface DatePickerRangeProps {
1313
1355
  /** DatePicker가 내부적으로 관리하는 Calendar props (사용자가 오버라이드 불가) */
1314
1356
  type ManagedCalendarProps = "year" | "month" | "selectedDate" | "startDate" | "endDate" | "hoverDate" | "rangeMode" | "minDate" | "maxDate" | "onClick" | "onHover" | "onPrev" | "onNext" | "showPrev" | "showNext" | "disablePrev" | "disableNext" | "locale" | "className" | "style" | "children";
1315
1357
  /** DatePicker가 내부적으로 관리하는 DateInput props (사용자가 오버라이드 불가) */
1316
- type ManagedDateInputProps = "type" | "value" | "startDate" | "endDate" | "onClick" | "onReset" | "reset" | "locale" | "placeholder" | "dateFormat" | "className" | "style";
1358
+ type ManagedDateInputProps = "type" | "value" | "startDate" | "endDate" | "onClick" | "onReset" | "reset" | "disabled" | "error" | "description" | "locale" | "placeholder" | "dateFormat" | "className" | "style";
1317
1359
  type DatePickerBaseProps = {
1360
+ /** 비활성화 */
1361
+ disabled?: boolean;
1362
+ /** 에러 상태 */
1363
+ error?: boolean;
1364
+ /** 도움말 텍스트 */
1365
+ description?: string;
1318
1366
  /** 선택 가능한 최소 날짜 */
1319
1367
  minDate?: Date;
1320
1368
  /** 선택 가능한 최대 날짜 */
@@ -1396,8 +1444,6 @@ type DatePickerBaseProps = {
1396
1444
  * @example
1397
1445
  * dateInputProps={{
1398
1446
  * prefixIcon: false,
1399
- * helpText: "날짜를 선택해주세요",
1400
- * state: "disabled",
1401
1447
  * startPlaceholder: "출발일",
1402
1448
  * endPlaceholder: "도착일",
1403
1449
  * }}
@@ -1424,7 +1470,6 @@ interface TimePickerProps {
1424
1470
  declare const TimePicker: React.FC<TimePickerProps>;
1425
1471
 
1426
1472
  type TextFieldSize = "pc" | "mo" | "medium" | "small";
1427
- type TextFieldState = "default" | "error";
1428
1473
  type TextFieldType = "input" | "area";
1429
1474
  interface TextFieldBaseProps {
1430
1475
  /** Title 텍스트 (있으면 표시) */
@@ -1566,4 +1611,4 @@ declare const LAYOUT_SYSTEM: {
1566
1611
  };
1567
1612
  };
1568
1613
 
1569
- export { ActionButton, type ActionButtonProps, type AlertOptions, BREAKPOINTS, Badge, type BadgeProps, type BadgeType, type BadgeVariant, BreakpointProvider, ActionButton as Button, type ButtonColor, type ActionButtonProps as ButtonProps, type ButtonSize, type ButtonState, type ButtonType, Calendar, type CalendarProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, type ChipSize, type ChipType, type ChipVariant, type ConfirmOptions, DateInput, type DateInputProps, type DateInputSlot, type DateInputState, type DateInputType, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DatePickerSlot, type DatePickerType, Dialog, type DialogActionColor, type DialogActionItem, type DialogActionSize, type DialogActionType, type DialogAlign, type DialogFooterLayout, type DialogOptions, type DialogProps, DialogProvider, type DialogVariant, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonSize, type IconButtonState, type IconButtonType, LAYOUT_SYSTEM, Logo, type LogoColor, type LogoProps, type LogoSize, type LogoType, MEDIA_QUERIES, Pagination, type PaginationProps, RadioButton, RadioButtonGroup, type RadioButtonGroupProps, type RadioButtonProps, SelectBox, type SelectBoxClassName, type SelectBoxProps, type SelectBoxSize, type SelectBoxState, type SelectBoxStyle, type SelectBoxType, SelectHeader, type SelectHeaderProps, type SelectHeaderType, SelectMenu, type SelectMenuItem, SelectMenuOverlay, TAILWIND_SCREENS, Tab, TabGroup, type TabGroupProps, type TabItem, type TabProps, type TabSize, type TabType, Tag, type TagProps, type TagSize, type TagState, type TagType, Text, type TextDecoration, TextField, type TextFieldProps, type TextFieldSize, type TextFieldState, type TextFieldType, type TextProps, type TextVariant, TimePicker, type TimePickerProps, Toast, type ToastHorizontalAlign, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastSize, type ToastState, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPosition, type TooltipProps, type TooltipType, type UseCheckboxGroupOptions, type UseCheckboxGroupResult, formatDate, parseDate, useBreakpoint, useCheckboxGroup, useDialog, useMediaQuery, useToast };
1614
+ export { ActionButton, type ActionButtonProps, type AlertOptions, BREAKPOINTS, Badge, type BadgeProps, type BadgeType, type BadgeVariant, BreakpointProvider, ActionButton as Button, type ButtonColor, type ActionButtonProps as ButtonProps, type ButtonSize, type ButtonType, Calendar, type CalendarProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxItem, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipItem, type ChipProps, type ChipSize, type ChipType, type ChipVariant, type ConfirmOptions, DateInput, type DateInputProps, type DateInputSlot, type DateInputType, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DatePickerSlot, type DatePickerType, Dialog, type DialogActionColor, type DialogActionItem, type DialogActionSize, type DialogActionType, type DialogAlign, type DialogFooterLayout, type DialogOptions, type DialogProps, DialogProvider, type DialogVariant, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonSize, type IconButtonSlot, type IconButtonType, LAYOUT_SYSTEM, Logo, type LogoColor, type LogoProps, type LogoSize, type LogoType, MEDIA_QUERIES, Pagination, type PaginationProps, RadioButton, RadioButtonGroup, type RadioButtonGroupProps, type RadioButtonItem, type RadioButtonProps, SelectBox, type SelectBoxClassNames, type SelectBoxProps, type SelectBoxSize, type SelectBoxStyles, SelectHeader, type SelectHeaderProps, type SelectHeaderType, SelectMenu, type SelectMenuItem, SelectMenuOverlay, TAILWIND_SCREENS, Tab, TabGroup, type TabGroupProps, type TabItem, type TabProps, type TabSize, type TabType, Tag, type TagProps, type TagSize, type TagState, type TagType, Text, type TextDecoration, TextField, type TextFieldProps, type TextFieldSize, type TextFieldType, type TextProps, type TextVariant, TimePicker, type TimePickerProps, Toast, type ToastHorizontalAlign, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastSize, type ToastState, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPosition, type TooltipProps, type TooltipType, type UseCheckboxGroupOptions, type UseCheckboxGroupResult, formatDate, parseDate, useBreakpoint, useCheckboxGroup, useDialog, useMediaQuery, useToast };