@likelion-design/ui 1.0.21 → 1.0.22

package/dist/index.d.mts

@@ -4,7 +4,6 @@ import React from 'react';
 type ButtonSize = "xlarge" | "large" | "medium" | "small";
 type ButtonColor = "primary" | "neutral" | "secondary";
 type ButtonType = "solid" | "outline" | "ghost" | "weak";
-type ButtonState = "enabled" | "hovered" | "loading" | "disabled";
 interface ActionButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
     /** 버튼 크기 */
     size?: ButtonSize;
@@ -14,57 +13,45 @@ interface ActionButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
     type?: ButtonType;
     /** HTML 버튼 타입 (button, submit, reset) */
     htmlType?: "button" | "submit" | "reset";
-    /** 버튼 상태 */
-    state?: ButtonState;
+    /** 비활성화 */
+    disabled?: boolean;
+    /** 로딩 상태 */
+    loading?: boolean;
     /** 버튼 텍스트 */
     label: React.ReactNode;
     /** Prefix 아이콘 */
     prefixIcon?: React.ReactNode;
     /** Suffix 아이콘 */
     suffixIcon?: React.ReactNode;
-    /** 로딩 상태일 때 표시할 스피너 */
-    loading?: boolean;
 }
 /** ActionButton 컴포넌트는 사용자가 어떠한 액션을 트리거하거나 이벤트를 실행할 때 사용한다. */
-declare const ActionButton: ({ size, color, type, htmlType, state, label, prefixIcon, suffixIcon, loading, className, disabled, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
+declare const ActionButton: ({ size, color, type, htmlType, label, prefixIcon, suffixIcon, loading, className, disabled, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
 
 type IconButtonSize = "xlarge" | "large" | "medium" | "small";
 /** 버튼 색상. solid/outline: primary | neutral | secondary. weak: primary | neutral-dark | neutral-light */
 type IconButtonColor = "primary" | "neutral" | "secondary" | "neutral-dark" | "neutral-light";
 /** 버튼 타입. weak일 때 color로 primary / neutral-dark / neutral-light 구분 */
 type IconButtonType = "solid" | "outline" | "weak";
-type IconButtonState = "enabled" | "hovered" | "disabled";
-/** 기본 색상에 없는 커스텀 색상 (inline style로 적용, 클래스보다 우선) */
-interface IconButtonCustomColor {
-    /** 배경색 */
-    background?: string;
-    /** 아이콘(전경) 색상 */
-    color?: string;
-}
+/** IconButton 슬롯 */
+type IconButtonSlot = "root" | "icon";
 interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
     /** 버튼 크기 */
     size?: IconButtonSize;
-    /** 버튼 색상. 기본 세트: primary, neutral, secondary 등. 없으면 customColor 또는 style로 지정 */
+    /** 버튼 색상. 기본 세트: primary, neutral, secondary 등 */
     color?: IconButtonColor;
     /** 버튼 타입 (solid, outline, weak) */
     type?: IconButtonType;
-    /** 버튼 상태 */
-    state?: IconButtonState;
+    /** 비활성화 */
+    disabled?: boolean;
     /** 아이콘 (Heroicons 또는 React 컴포넌트) */
     icon: React.ReactNode;
-    /** 아이콘에 대한 접근성 라벨 */
-    "aria-label": string;
     /** button 요소의 type (submit 등). 기본값 button */
     htmlType?: "button" | "submit" | "reset";
-    /**
-     * 기본 팔레트에 없는 색상 사용 시.
-     * 지정 시 inline style로 적용되어 클래스 스타일보다 우선합니다.
-     * hover/disabled는 적용되지 않으므로, 필요 시 style prop으로 보완하세요.
-     */
-    customColor?: IconButtonCustomColor;
+    /** 각 슬롯별 인라인 스타일 (root, icon) */
+    styles?: Partial<Record<IconButtonSlot, React.CSSProperties>>;
 }
 /** IconButton 컴포넌트는 텍스트 레이블 없이 아이콘만으로 액션을 전달하는 버튼 컴포넌트이다. */
-declare const IconButton: ({ size, color, type, state, icon, className, disabled, htmlType, style: propsStyle, customColor, ...props }: IconButtonProps) => react_jsx_runtime.JSX.Element;
+declare const IconButton: ({ size, color, type, icon, className, disabled, htmlType, style: propsStyle, styles, ...props }: IconButtonProps) => react_jsx_runtime.JSX.Element;
 
 type TabType = "round" | "text";
 type TabSize = "large" | "medium";
@@ -761,6 +748,8 @@ interface SelectMenuItem {
     value: string;
     label: React.ReactNode;
     disabled?: boolean;
+    /** 항목 왼쪽 아이콘 */
+    icon?: React.ReactNode;
 }
 interface SelectMenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
     /** 메뉴 항목들 */
@@ -809,7 +798,7 @@ declare const SelectMenuOverlay: {
 
 type SelectHeaderType = "outlined" | "underlined";
 type SelectHeaderSize = "medium" | "small";
-interface SelectHeaderProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onChange" | "value"> {
+interface SelectHeaderProps {
     /** SelectHeader 타입 */
     type?: SelectHeaderType;
     /**
@@ -836,9 +825,11 @@ interface SelectHeaderProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
     /** Help text 아이콘 (true면 기본 아이콘, 노드면 커스텀, false면 아이콘 없음) */
     accentIcon?: boolean | React.ReactNode;
     /** 클릭 핸들러 */
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     /** 값 클리어 핸들러 */
-    onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onClear?: (event: React.MouseEvent<HTMLElement>) => void;
+    /** 왼쪽 prefix 아이콘 (TextField prefixIcon으로 전달) */
+    prefixIcon?: React.ReactNode;
     /** 커스텀 아이콘 */
     icon?: React.ReactNode;
     /** SelectMenu 항목들 (있으면 클릭 시 메뉴 열림) */
@@ -857,6 +848,10 @@ interface SelectHeaderProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
     wrapperStyle?: React.CSSProperties;
     /** 너비 설정 (예: "100%", "300px"). 설정 시 max-width 제한이 해제됨 */
     width?: string | number;
+    /** 추가 CSS 클래스명 */
+    className?: string;
+    /** 요소 ID */
+    id?: string;
     /** SelectMenu에 전달: 항목 텍스트 스타일 오버라이드 */
     menuItemTextProps?: SelectMenuProps["itemTextProps"];
     /** SelectMenu에 전달: 선택된 항목 suffix 아이콘 */
@@ -869,58 +864,78 @@ interface SelectHeaderProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
     menuStyle?: React.CSSProperties;
 }
 /** SelectHeader 컴포넌트는 선택된 값을 표시하고 드롭다운을 여는 헤더 컴포넌트다. items를 주면 클릭 시 메뉴가 열린다. */
-declare const SelectHeader: React.ForwardRefExoticComponent<SelectHeaderProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectHeader: {
+    ({ 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;
+    displayName: string;
+};
 
-type SelectBoxType = "default" | "label" | "placeholder";
-type SelectBoxSize = "small" | "medium" | "large" | "full";
-type SelectBoxState = "default" | "active" | "disabled" | "error" | "success" | "loading";
-/** root/header/menu별 className 또는 전체 적용 */
-type SelectBoxClassName = string | {
+type SelectBoxSize = "small" | "medium";
+/** 파트별 className 오버라이드 */
+type SelectBoxClassNames = {
     root?: string;
     header?: string;
     menu?: string;
 };
-/** root/header/menu별 style 또는 전체 적용 */
-type SelectBoxStyle = React.CSSProperties | {
+/** 파트별 style 오버라이드 */
+type SelectBoxStyles = {
     root?: React.CSSProperties;
     header?: React.CSSProperties;
     menu?: React.CSSProperties;
 };
 /** SelectBox 전용 props (label는 SelectHeader title에 매핑) */
 type SelectBoxSpecificProps = {
-    /** SelectBox 타입 (Default: 라벨 없음, Label: 라벨 있음, Placeholder: 라벨+플레이스홀더) */
-    type?: SelectBoxType;
     /** SelectBox 사이즈 */
     size?: SelectBoxSize;
-    /** SelectBox 상태 */
-    state?: SelectBoxState;
+    /** 비활성화 */
+    disabled?: boolean;
+    /** 에러 상태 */
+    error?: boolean;
+    /** 성공 상태 */
+    success?: boolean;
+    /** 로딩 상태 */
+    loading?: boolean;
     /** 라벨 텍스트 (SelectHeader title에 매핑) */
     label?: string;
-    /** Helper text (에러/성공 시 표시) */
-    helperText?: string;
+    /** 하단 설명 텍스트 */
+    description?: string;
+    /**
+     * 왼쪽 prefix 아이콘. 미지정 시 단일 선택인 경우 선택된 항목의 icon을 자동 감지.
+     * false로 설정하면 자동 감지를 비활성화.
+     */
+    prefixIcon?: React.ReactNode | false;
+    /** root에 적용할 className */
+    className?: string;
+    /** root에 적용할 인라인 스타일 */
+    style?: React.CSSProperties;
     /**
-     * className: 문자열이면 root에 적용, 객체면 root/header/menu 각각 적용
-     * @example className="w-12"
-     * @example className={{ root: "w-12", header: "border-red-500", menu: "border-red-500" }}
+     * 파트별 className 오버라이드
+     * @example classNames={{ root: "w-12", header: "border-red-500", menu: "bg-gray-50" }}
      */
-    className?: SelectBoxClassName;
+    classNames?: SelectBoxClassNames;
     /**
-     * style: 객체면 root/header/menu 각각 적용
-     * @example style={{ root: { width: 48 }, header: { borderColor: "red" }, menu: { borderColor: "red" } }}
+     * 파트별 인라인 스타일 오버라이드
+     * @example styles={{ header: { borderColor: "red" }, menu: { maxHeight: 200 } }}
      */
-    style?: SelectBoxStyle;
+    styles?: SelectBoxStyles;
+    /** 너비 설정 (예: "100%", 300). 미지정 시 CSS 기본 360px */
+    width?: string | number;
 };
 /** SelectHeader에서 SelectBox가 오버라이드하는 props 제외 */
-type SelectHeaderPassThrough = Omit<SelectHeaderProps, "type" | "size" | "title" | "disabled" | "error" | "description" | "accentIcon" | "icon" | "wrapperClassName" | "menuClassName" | "menuStyle" | "style" | "className"> & {
+type SelectHeaderPassThrough = Omit<SelectHeaderProps, "type" | "size" | "title" | "disabled" | "error" | "description" | "accentIcon" | "icon" | "prefixIcon" | "wrapperClassName" | "menuClassName" | "menuStyle" | "style" | "className" | "width"> & {
     /** SelectHeader 타입 (outlined | underlined) */
     headerType?: SelectHeaderType;
 };
-/** SelectMenu props (SelectHeader menuItemTextProps, menuSuffixIcon로 전달) */
-type SelectMenuPassThrough = Pick<SelectMenuProps, "itemTextProps" | "suffixIcon">;
+/** SelectMenu props (SelectHeader를 통해 SelectMenu로 전달) */
+type SelectMenuPassThrough = {
+    /** 메뉴 항목 텍스트 스타일 오버라이드 */
+    itemTextProps?: SelectMenuProps["itemTextProps"];
+    /** 선택된 항목의 suffix 아이콘 (기본: 체크 아이콘). false면 숨김 */
+    suffixIcon?: SelectMenuProps["suffixIcon"];
+};
 type SelectBoxProps = SelectBoxSpecificProps & SelectHeaderPassThrough & SelectMenuPassThrough;
 /** SelectBox는 SelectHeader와 SelectMenu를 하나로 통합한 컴포넌트로, 미리 정의된 목록에서 항목을 선택하도록 돕습니다. */
 declare const SelectBox: {
-    ({ 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;
+    ({ 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;
     displayName: string;
 };
 
@@ -1198,25 +1213,25 @@ interface CalendarProps {
 declare const Calendar: React.FC<CalendarProps>;
 
 type DateInputType = "single" | "range";
-type DateInputState = "default" | "selected" | "disabled";
 /**
  * DateInput 내부 서브 요소 슬롯 이름.
  * classNames / styles 객체의 키로 사용됩니다.
  *
  * - `root` — 최상위 wrapper (`date-input`)
- * - `content` — 입력 영역 (`date-input__content`)
- * - `icon` — prefix 캘린더 아이콘
- * - `text` — 날짜 텍스트 표시 영역
+ * - `content` — 입력 영역
+ * - `icon` — prefix 캘린더 아이콘 (range 모드에서만 사용)
+ * - `text` — 날짜 텍스트 표시 영역 (range 모드에서만 사용)
  * - `separator` — range 모드 구분자 (`-`)
- * - `reset` — 초기화 버튼
- * - `help` — 도움말 텍스트 영역
+ * - `reset` — 초기화 버튼 (range 모드에서만 사용)
  */
-type DateInputSlot = "root" | "content" | "icon" | "text" | "separator" | "reset" | "help";
+type DateInputSlot = "root" | "content" | "icon" | "text" | "separator" | "reset";
 interface DateInputProps {
     /** 입력 타입: 단일 날짜 또는 기간 */
     type?: DateInputType;
-    /** 상태 */
-    state?: DateInputState;
+    /** 비활성화 */
+    disabled?: boolean;
+    /** 에러 상태 */
+    error?: boolean;
     /** 선택된 날짜 (single 모드) */
     value?: Date | null;
     /** 시작 날짜 (range 모드) */
@@ -1227,12 +1242,8 @@ interface DateInputProps {
     prefixIcon?: boolean;
     /** 초기화 버튼 표시 여부 (single / range 모두 지원) */
     reset?: boolean;
-    /** help text */
-    helpText?: string;
-    /** 도움말 글자수 카운터 현재값 */
-    helpCount?: number;
-    /** 도움말 글자수 카운터 최대값 */
-    helpMaxCount?: number;
+    /** 도움말 텍스트 */
+    description?: string;
     /** 날짜 표시 포맷 (locale) */
     locale?: string;
     /** 단일 모드 플레이스홀더 */
@@ -1265,33 +1276,20 @@ interface DateInputProps {
     /**
      * 각 서브 요소별 커스텀 CSS 클래스.
      * 기존 요소의 기본 className에 병합(추가)됩니다.
-     *
-     * @example
-     * classNames={{
-     *   root: "my-input",
-     *   content: "my-content",
-     *   icon: "my-icon",
-     * }}
      */
     classNames?: Partial<Record<DateInputSlot, string>>;
     /**
      * 각 서브 요소별 인라인 스타일.
      * 해당 요소에 style 속성으로 적용됩니다.
-     *
-     * @example
-     * styles={{
-     *   content: { height: 40, borderRadius: 8 },
-     *   icon: { color: "red" },
-     * }}
      */
     styles?: Partial<Record<DateInputSlot, React.CSSProperties>>;
 }
 /**
  * Date를 포맷 문자열에 따라 변환합니다.
  * 지원 토큰: yyyy, MM, M, dd, d, HH, mm
- * format이 없으면 기본 "yyyy. M. d" 형식을 사용합니다.
+ * format이 없으면 locale 기반 기본 포맷을 사용합니다.
  */
-declare const formatDate: (d: Date | null | undefined, format?: string) => string;
+declare const formatDate: (d: Date | null | undefined, format?: string, locale?: string) => string;
 /**
  * 날짜 문자열을 Date 객체로 파싱합니다.
  *
@@ -1357,8 +1355,14 @@ interface DatePickerRangeProps {
 /** DatePicker가 내부적으로 관리하는 Calendar props (사용자가 오버라이드 불가) */
 type ManagedCalendarProps = "year" | "month" | "selectedDate" | "startDate" | "endDate" | "hoverDate" | "rangeMode" | "minDate" | "maxDate" | "onClick" | "onHover" | "onPrev" | "onNext" | "showPrev" | "showNext" | "disablePrev" | "disableNext" | "locale" | "className" | "style" | "children";
 /** DatePicker가 내부적으로 관리하는 DateInput props (사용자가 오버라이드 불가) */
-type ManagedDateInputProps = "type" | "value" | "startDate" | "endDate" | "onClick" | "onReset" | "reset" | "locale" | "placeholder" | "dateFormat" | "className" | "style";
+type ManagedDateInputProps = "type" | "value" | "startDate" | "endDate" | "onClick" | "onReset" | "reset" | "disabled" | "error" | "description" | "locale" | "placeholder" | "dateFormat" | "className" | "style";
 type DatePickerBaseProps = {
+    /** 비활성화 */
+    disabled?: boolean;
+    /** 에러 상태 */
+    error?: boolean;
+    /** 도움말 텍스트 */
+    description?: string;
     /** 선택 가능한 최소 날짜 */
     minDate?: Date;
     /** 선택 가능한 최대 날짜 */
@@ -1440,8 +1444,6 @@ type DatePickerBaseProps = {
      * @example
      * dateInputProps={{
      *   prefixIcon: false,
-     *   helpText: "날짜를 선택해주세요",
-     *   state: "disabled",
      *   startPlaceholder: "출발일",
      *   endPlaceholder: "도착일",
      * }}
@@ -1468,7 +1470,6 @@ interface TimePickerProps {
 declare const TimePicker: React.FC<TimePickerProps>;
 
 type TextFieldSize = "pc" | "mo" | "medium" | "small";
-type TextFieldState = "default" | "error";
 type TextFieldType = "input" | "area";
 interface TextFieldBaseProps {
     /** Title 텍스트 (있으면 표시) */
@@ -1610,4 +1611,4 @@ declare const LAYOUT_SYSTEM: {
     };
 };
 
-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 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 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 RadioButtonItem, 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 };
+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 };