fone-design-system_v2 1.0.34 → 1.0.35

package/dist/components/{ui/Accordion → Accordion}/Accordion.d.ts

@@ -6,6 +6,7 @@ export interface DataListProps {
     id: string;
     summaryChildren: React.ReactNode | string;
     detailsChildren: React.ReactNode | string;
+    disabled?: boolean;
 }
 export interface AccordionItemsProps extends DataListProps {
     expandIcon?: ExpandIconType;
@@ -23,6 +24,8 @@ export interface AccordionProps extends Omit<MuiAccordionProps, "children" | "ex
     dataList: DataListProps[];
     /** 디폴트로 열려있어야 하는 아코디언 (값: dataList의 id값이 배열로 들어간다)*/
     defaultExpandedList?: DefaultExpandedListType;
+    /** 전체 아코디언을 디폴트로 열려있게 할 수 있다. (값: true)*/
+    defaultExpanded?: boolean;
     /** 사용자지정 아이콘 (값: React.ReactNode)  */
     expandIcon?: ExpandIconType;
     /** 비활성화 상태 (기본값: false) */
@@ -37,6 +40,6 @@ export interface AccordionProps extends Omit<MuiAccordionProps, "children" | "ex
     square?: boolean;
 }
 export declare const Accordion: {
-    ({ dataList, allExpanded, expandIcon, singleExpand, actionChildren, ...props }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+    ({ dataList, allExpanded, expandIcon, singleExpand, actionChildren, defaultExpandedList, defaultExpanded, square, ...props }: AccordionProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/{ui/Autocomplete → Autocomplete}/Autocomplete.d.ts

@@ -5,17 +5,17 @@ export interface AutocompleteProps<Value = any, Multiple extends boolean | undef
     options: any[];
     /** 사용자가 텍스트를 입력하는 input 필드를 어떻게 렌더링할지 정한다. */
     renderInput: (params: AutocompleteRenderInputParams) => React.ReactNode;
-    /** 자동 완성 여부 (기본값: false) */
+    /** 자동 완성 여부 (기본값: false) @default false*/
     autoComplete?: boolean;
-    /** 항목 선택 후 입력 필드가 자동으로 포커스를 잃는다. */
+    /** 항목 선택 후 입력 필드가 자동으로 포커스를 잃는다. @default false*/
     blurOnSelect?: "mouse" | "touch" | boolean | undefined;
     /** 클리어 아이콘 */
     clearIcon?: React.ReactNode;
-    /** 옵션을 선택해도 드롭다운이 닫히지 않는다. (기본값: false) */
+    /** 옵션을 선택해도 드롭다운이 닫히지 않는다. (기본값: false) @default false*/
     disableCloseOnSelect?: boolean;
     /** 드롭다운이 부모 요소의 스타일(예: overflow, z-index)의 영향을 받을지에 대한 여부 (false: 부모요소 밖으로 삐져나와도 부모요소에 가려지지 않는다.) */
     disablePortal?: boolean;
-    /** 비활성화 여부 (기본값: false) */
+    /** 비활성화 여부 (기본값: false) @default false*/
     disabled?: boolean;
     /** 옵션 변경 핸들러 */
     onChange?: (event: React.SyntheticEvent<Element, Event>, value: AutocompleteValue<Value, Multiple, DisableClearable, FreeSolo>, reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<Value> | undefined) => void;

package/dist/components/{ui/Button → Button}/Button.d.ts

@@ -4,8 +4,8 @@ export interface ButtonProps extends Omit<MuiButtonProps<"button">, "color" | "s
     classsName?: any;
     /** 자식 요소<br/>: 버튼 내에 포함될 내용 */
     children?: React.ReactNode;
-    /** 색상 설정<br/>: 버튼 색상 (기본, primary, secondary 등) */
-    color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | string;
+    /** 색상 설정<br/>: 버튼 색상 */
+    color?: string | "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
     /** 루트 요소 타입 설정<br/>: HTML 요소 또는 다른 컴포넌트를 루트 노드로 사용 */
     component?: React.ElementType;
     /** 비활성화 여부<br/>: true일 경우 버튼이 비활성화 */
@@ -28,7 +28,7 @@ export interface ButtonProps extends Omit<MuiButtonProps<"button">, "color" | "s
     loadingIndicator?: React.ReactNode;
     /** 로딩 인디케이터 위치<br/>: 'start', 'center', 'end' 중 위치 설정 */
     loadingPosition?: "center" | "end" | "start";
-    /** 버튼 크기 설정<br/>: 'small', 'medium', 'large' 또는 사용자 지정 값 */
+    /** 버튼 크기 설정<br/>: 'small', 'medium', 'large' 또는 사용자 지정 값 @default large */
     size?: "small" | "medium" | "large" | string;
     /** 시작 아이콘<br/>: 버튼의 자식 요소 앞에 배치될 아이콘 */
     startIcon?: React.ReactNode;

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { CardProps as MCardProps } from '@mui/material/Card';
+export interface CardProps extends MCardProps {
+    className?: string;
+    /** Card의 제목을 설정합니다. */
+    title?: string;
+    /** Card의 내용을 설정합니다. */
+    contents?: string;
+    /** Card의 스타일을 설정합니다. @default elevation */
+    variant?: "elevation" | "outlined";
+    /** Card의 이미지를 설정합니다. */
+    image?: ReactNode;
+    /** Card의 하단에 버튼을 설정합니다. */
+    buttons?: ReactNode;
+    /** Card의 클릭 이벤트를 설정합니다. */
+    onActionArea?: () => void;
+}
+declare const Card: ({ variant, className, image, title, contents, onActionArea, buttons, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export default Card;

package/dist/components/DatePicker3/DatePicker3.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+import { DatePickerProps } from 'antd/es/date-picker';
+import { Dayjs } from 'dayjs';
+export interface DatePicker3Props extends Omit<DatePickerProps, "onChange" | "value"> {
+    /**
+     * 선택된 날짜(제어값).
+     * - `Dayjs` 객체 또는 `null`(선택 해제)
+     * - 이 값을 넘기면 **제어 컴포넌트**로 동작하므로 보통 `onChange`와 함께 사용 권장.
+     * - 제어하지 않을 거면 이 prop을 생략하고, 기반 컴포넌트의 `defaultValue` 등을 사용할 수 있음.
+     */
+    value?: Dayjs | null;
+    /**
+     * 날짜가 변경될 때 호출되는 콜백.
+     *
+     * @param date       선택된 날짜의 `Dayjs` 객체
+     * @param dateString 포맷된 문자열(예: `"2025-09-29"`) — 호환성 때문에 배열 타입도 허용됨
+     *
+     * - 단일 날짜 선택 기준으로는 일반적으로 **문자열 1개**가 전달됨.
+     * - 제출/로그 전송 등 문자열이 필요한 경우 `dateString` 사용 권장(포맷은 컴포넌트 설정에 따름).
+     */
+    onChange?: ((date: Dayjs, dateString: string | string[]) => void) | undefined;
+}
+declare const DatePicker3: React.ForwardRefExoticComponent<Omit<DatePicker3Props, "ref"> & React.RefAttributes<any>>;
+export default DatePicker3;

package/dist/components/{ui/Divider → Divider}/Divider.d.ts

@@ -1,19 +1,16 @@
 import { default as React } from 'react';
 import { SxProps, Theme, DividerProps as MuiDividerProps } from '@mui/material';
 export interface DividerProps extends MuiDividerProps {
-    /** 구분선 방향 */
+    /** 구분선 방향을 설정합니다. @default horizontal */
     orientation?: "horizontal" | "vertical";
-    /** 구분선 변형 */
+    /** 구분선 변형을 설정합니다. @default fullWidth */
     variant?: "fullWidth" | "inset" | "middle";
-    /** 텍스트 정렬 */
+    /** 텍스트 정렬을 설정합니다. @default center */
     textAlign?: "center" | "left" | "right";
-    /** 구분선 내부 텍스트 */
+    /** 구분선 둥근 정도를 설정합니다. */
+    flexItem?: boolean;
     children?: React.ReactNode;
-    /** MUI에서 제공하는 스타일 속성 추가 가능 */
     sx?: SxProps<Theme>;
-    /** 구분선 둥근 정도 */
-    flexItem?: boolean;
 }
-/** 콘텐츠를 구분하는 구분선 컴포넌트 */
 declare const Divider: ({ orientation, variant, textAlign, children, sx, ...props }: DividerProps) => import("react/jsx-runtime").JSX.Element;
 export default Divider;

package/dist/components/{ui/DropdownMenu → DropdownMenu}/DropdownMenu.d.ts

@@ -1,15 +1,17 @@
 import { ReactNode } from 'react';
 import { MenuProps } from '@mui/material/Menu';
-export interface DropdownMenuProps extends Omit<MenuProps, "open"> {
-    className?: string;
-    menuLabel: string;
-    menuItems: MenuItem[];
-}
-export interface MenuItem {
+export interface DropdownMenuItem {
     icon?: ReactNode;
     label: string;
     onClick: () => void;
-    onClose: () => void;
+    onClose?: () => void;
+}
+export interface DropdownMenuProps extends Omit<MenuProps, "open"> {
+    className?: string;
+    /** 메뉴 버튼의 라벨을 설정합니다. */
+    menuLabel: string;
+    /** 메뉴 아이템 리스트 입니다. */
+    menuItems: DropdownMenuItem[];
 }
 declare const DropdownMenu: ({ className, menuLabel, menuItems, ...props }: DropdownMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default DropdownMenu;

package/dist/components/{ui/Flex → Flex}/Flex.d.ts

@@ -1,16 +1,15 @@
-import { default as React } from 'react';
+import { default as React, ReactNode } from 'react';
 import { StackProps } from '@mui/material';
 import { ResponsiveStyleValue } from '@mui/system';
 export interface FlexProps extends StackProps {
-    /** 자식 요소 */
-    children?: React.ReactNode;
-    /** Flex 방향 (row, column 등) (기본값: row) */
+    /** Flex 방향을 설정합니다. @default row */
     direction?: ResponsiveStyleValue<"row" | "row-reverse" | "column" | "column-reverse">;
-    /** `gap` 사용 여부 (기본값: true) */
+    /** gap 사용 여부를 설정합니다. @default true */
     useFlexGap?: boolean;
-    /** 항목 간 간격 (숫자 또는 문자열) */
+    /** 항목 간 간격을 설정합니다. @default 0 */
     spacing?: ResponsiveStyleValue<number | string>;
-    /** 항목 사이 구분선 (MUI Divider 등) */
-    divider?: React.ReactNode;
+    /** 항목 사이 구분선을 설정합니다. */
+    divider?: ReactNode;
+    children?: ReactNode;
 }
 export declare const Flex: React.ForwardRefExoticComponent<Omit<FlexProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/{ui/FloatingButton → FloatingButton}/FloatingButton.d.ts

@@ -1,13 +1,18 @@
-import { default as React } from 'react';
+import { ReactNode } from 'react';
 import { FabProps } from '@mui/material';
 export interface FloatingButtonProps extends FabProps {
-    className?: string;
+    /** 버튼의 색상을 설정합니다. @default default */
     color?: "primary" | "secondary" | "default";
+    /** 버튼의 모양을 설정합니다. @default circular */
     variant?: "circular" | "extended";
+    /** 버튼의 크기를 설정합니다. @default medium */
     size?: "small" | "medium" | "large";
-    children: React.ReactNode;
+    /** 버튼 클릭 시 호출되는 콜백 함수입니다. */
     onClick?: () => void;
+    /** 버튼의 위치를 설정합니다. @default bottom-end */
     placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | "top" | "bottom" | "left" | "right";
+    children?: ReactNode;
+    className?: string;
 }
 declare const FloatingButton: ({ className, color, variant, size, onClick, children, placement, ...props }: FloatingButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default FloatingButton;

package/dist/components/{ui/Notification → Notification}/Notification.d.ts

@@ -1,13 +1,17 @@
+import { SxProps, Theme } from '@mui/material';
 import { AlertProps } from '@mui/material/Alert';
 export interface NotificationProps extends AlertProps {
     className?: string;
-    /** 알림 문구 */
+    /** 알림 문구를 입력하는 부분입니다.*/
     text: string;
-    /** 알림 유형 */
+    /** 알림 유형을 설정하는 부분입니다.*/
     severity: "success" | "info" | "warning" | "error";
-    /** 알림 스타일 */
+    /** 알림 스타일을 설정하는 부분입니다.*/
     variant?: "standard" | "filled" | "outlined";
+    /** 알림 닫기 이벤트 */
+    /** 알림이 닫히며 일어나야하는 이벤트가 있으면 사용하시면 됩니다. */
     onClose?: () => void;
+    sx?: SxProps<Theme>;
 }
 declare const Notification: ({ className, text, severity, variant, ...props }: NotificationProps) => import("react/jsx-runtime").JSX.Element;
 export default Notification;

package/dist/components/{ui/Progress → Progress}/Progress.d.ts

@@ -1,11 +1,16 @@
 import { CircularProgressProps } from '@mui/material';
 export interface ProgressProps extends CircularProgressProps {
-    className?: string;
+    /** Progress의 색상을 설정합니다. @default primary */
     color?: "primary" | "secondary" | "error" | "info" | "success" | "warning" | "inherit";
+    /** Progress의 크기를 설정합니다. */
     size?: number | string;
+    /** Progress의 진행 상태를 설정합니다. */
     value?: number;
+    /** Progress가 0%에서 100%까지 도달하는 시간을 설정합니다. (단위: 초) */
     timerSec?: number;
+    /** 선형 Progress로 표시할지 여부를 설정합니다. @default false */
     linear?: boolean;
+    className?: string;
 }
 declare const Progress: ({ className, color, size, value, timerSec, linear, ...props }: ProgressProps) => import("react/jsx-runtime").JSX.Element;
 export default Progress;

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,48 @@
+import { default as React } from 'react';
+import { RadioProps as MuiRadioProps } from '@mui/material/Radio';
+/**
+ * MUI `Radio`를 감싼 컴포넌트의 Props.
+ * - 원본 `MuiRadioProps`에서 `checkedIcon`만 제외(Omit)한다.
+ * - 라벨/배치/비활성화 등 폼 라디오에 필요한 속성을 제공한다.
+ */
+export interface RadioProps extends Omit<MuiRadioProps, "checkedIcon"> {
+    /** 루트 요소에 전달할 CSS 클래스명 */
+    className?: string;
+    /**
+     * 라디오의 제출(value) 값 (필수)
+     * - 같은 그룹 내에서 선택 항목을 구분한다.
+     */
+    value: string;
+    /**
+     * 라벨 텍스트
+     * - 지정 시 `FormControlLabel`로 감싸 렌더링된다.
+     */
+    label?: string;
+    /**
+     * 체크 상태(제어 모드)
+     * - 제어 모드에서는 반드시 `onChange`와 함께 사용한다.
+     */
+    checked?: boolean;
+    /**
+     * 변경 이벤트 핸들러
+     * @param event 변경 이벤트(`event.target.checked`로 상태 확인)
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * 색상 팔레트
+     * - MUI 팔레트 키 중 하나
+     */
+    color?: "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning";
+    /** 사이즈 `small | medium`*/
+    size?: "small" | "medium";
+    /**
+     * 비활성화 여부
+     * @default false */
+    disabled?: boolean;
+    /** 필수 표기 여부*/
+    required?: boolean;
+    /** 라벨 배치 위치 `start | end | top | bottom` */
+    labelPlacement?: "start" | "end" | "top" | "bottom";
+}
+declare const Radio: ({ className, value, label, checked, onChange, disabled, labelPlacement, required, ...props }: RadioProps) => import("react/jsx-runtime").JSX.Element;
+export default Radio;

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,54 @@
+import { SelectProps as MSelectProps, SelectChangeEvent, SxProps, Theme } from '@mui/material';
+import * as React from "react";
+type CustomSelectProps = {
+    width?: string | number;
+};
+export interface SelectProps extends Omit<MSelectProps, any>, CustomSelectProps {
+    /** React className. 외부에서 추가 스타일/선택자용으로 사용 */
+    className?: string;
+    /** HTML form name. 폼 전송 시 key가 됨 */
+    name?: string;
+    /** <MenuItem/> 등의 직접 children. 있으면 MenuItems보다 우선 */
+    children?: React.ReactNode;
+    /** MUI Select variant (outlined | filled | standard). 기본 outlined */
+    variant?: "outlined" | "filled" | "standard";
+    /** 헬퍼 텍스트(오류/설명). 현재 컴포넌트 내부에서 직접 렌더링하진 않음 */
+    helperText?: string;
+    /** 컴포넌트 사이즈. 높이/폰트 크기 동시 제어 (small | medium) */
+    size?: "small" | "medium";
+    /** 비활성화 여부 */
+    disabled?: boolean;
+    /** 옵션 목록. children이 없을 때만 사용됨 */
+    MenuItems?: {
+        label: string;
+        value: string;
+    }[];
+    /** 선택 값(Controlled). 넘기면 완전 제어 모드 */
+    value?: string;
+    /** 값 변경 콜백. e.target.value로 선택 값 획득 */
+    onChange?: (event: SelectChangeEvent | any) => void;
+    /** FormControl의 fullWidth 여부. true면 가로폭 100% */
+    fullWidth?: boolean;
+    /** MUI system sx. Select에 대한 스타일 오버라이드 */
+    sx?: SxProps<Theme>;
+    /** 가로폭 지정. 숫자면 px로 처리(예: 240 -> '240px') */
+    width?: string | number;
+    /** 값이 비어도 렌더(placeholder 표현)할지 여부 */
+    displayEmpty?: boolean;
+    /** 선택된 값 커스텀 렌더 함수. 제공 시 내부 기본 렌더 로직보다 우선 */
+    renderValue?: (value: unknown) => React.ReactNode;
+    /** true면 '{ label: "전체", value: "" }' 옵션을 맨 앞에 자동 추가 */
+    all?: boolean;
+    /** true면 placeholder를 "선택"으로 표시(그리고 '전체' 자동 추가는 하지 않음) */
+    select?: boolean;
+    /** 비제어(Uncontrolled) 초기값. value 미사용 시 초깃값으로 적용 */
+    defaultValue?: string;
+    /** 메뉴 및 선택된 값 가운데 정렬 여부 */
+    center?: boolean;
+    /** 메뉴 아이템(<MenuItem/>)에 추가로 적용할 sx */
+    menuItemSx?: SxProps<Theme>;
+    /** Select 셀 등에서 폰트 크기 오버라이드(예: '1.4rem') */
+    fontSize?: string;
+}
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
+export default Select;

package/dist/components/{ui/Skeleton → Skeleton}/Skeleton.d.ts

@@ -1,11 +1,18 @@
 import { ReactNode } from 'react';
 import { SkeletonProps as MSkeletonProps } from '@mui/material/Skeleton';
 export interface SkeletonProps extends MSkeletonProps {
-    className?: string;
+    /** Skeleton의 종류를 설정합니다. @default rectangular */
     variant?: "rectangular" | "circular" | "text";
+    /** Skeleton의 애니메이션 효과를 설정합니다. @default pulse */
     animation?: "pulse" | "wave" | false;
-    children?: ReactNode;
+    /** 로딩중인지 여부를 설정합니다. @default true */
     isLoading?: boolean;
+    /** Skeleton의 너비를 설정합니다. */
+    width?: string | number;
+    /** Skeleton의 높이를 설정합니다. */
+    height?: string | number;
+    children?: ReactNode;
+    className?: string;
 }
 declare const Skeleton: ({ className, variant, animation, children, isLoading, ...props }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
 export default Skeleton;

package/dist/components/{ui/Table2 → Table2}/Table2.d.ts

@@ -34,7 +34,7 @@ export interface Table2Props<T extends object> {
     No?: boolean;
     checkbox?: boolean;
     radio?: boolean;
-    onChecked?: (checkedRows: T[]) => void;
+    onChecked?: (checkedRows: T[], rowIndex: number) => void;
     onDelete?: (checkedRows: T[]) => void;
     onSave?: (checkedRows: T[], allRows: T[]) => void;
     onRowClick?: (row: T, rowIndex: number) => void;

package/dist/components/TextField2/TextField2.d.ts

@@ -0,0 +1,34 @@
+import { default as React, ChangeEventHandler, ReactNode } from 'react';
+import { OutlinedInputProps } from '@mui/material';
+export interface TextField2Props extends Omit<OutlinedInputProps, "onChange"> {
+    /** 입력 값(Controlled). 미지정 시 비제어로 동작 가능 */
+    value?: any;
+    /** 값 변경 핸들러. e.target.value로 현재 값 접근 */
+    onChange?: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /** 루트 FormControl에 부착할 className (스타일 훅용) */
+    className?: string;
+    /** 비활성화 여부 */
+    disabled?: boolean;
+    /** 인풋 왼쪽 영역에 표시할 부가 요소 (예: 아이콘) */
+    startAdornment?: ReactNode;
+    /** 인풋 오른쪽 영역에 표시할 부가 요소 (예: 버튼) */
+    endAdornment?: ReactNode;
+    /** MUI 슬롯 전용 prop 전달용 (필요 시 내부 슬롯에 세부 옵션 전달) */
+    slotProps?: any;
+    /** MUI system `sx` 스타일 오버라이드 (루트 FormControl에 적용) */
+    sx?: any;
+    /** HTML input type (text, password, number 등) */
+    type?: string;
+    /** 읽기 전용 여부 */
+    readOnly?: boolean;
+    /** 필수 입력 여부(브라우저 기본 유효성에 사용) */
+    required?: boolean;
+    /** HTML id 속성 (label-for 연결 등) */
+    id?: string;
+    /** forwardRef로 외부에서 인풋에 접근하기 위한 ref
+     *  - 일반적으로 React.forwardRef 제네릭으로 처리하므로 props에 직접 넣지 않아도 됨
+     */
+    ref?: React.ForwardedRef<HTMLInputElement>;
+}
+declare const TextField2: React.ForwardRefExoticComponent<Omit<TextField2Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default TextField2;

package/dist/components/{ui/Tooltip → Tooltip}/Tooltip.d.ts

@@ -1,18 +1,20 @@
-import { default as React } from 'react';
+import { default as React, Dispatch, ReactNode, SetStateAction } from 'react';
 import { TooltipProps as MTooltipProps } from '@mui/material/Tooltip';
 export interface TooltipProps extends MTooltipProps {
-    className?: string;
-    title: string | React.ReactNode;
-    children: React.ReactElement<unknown, any>;
+    /** Tooltip의 제목을 설정합니다. */
+    title: string | ReactNode;
+    /** Tooltip에 화살표를 표시할지 여부를 설정합니다. @default false */
     arrow?: boolean;
+    /** Tooltip의 위치를 설정합니다. @default bottom */
     placement?: "bottom-end" | "bottom-start" | "bottom" | "left-end" | "left-start" | "left" | "right-end" | "right-start" | "right" | "top-end" | "top-start" | "top";
+    /** 마우스 커서를 따라다니는지 여부를 설정합니다. @default false */
     followCursor?: boolean;
+    /** Tooltip이 열려 있는지 여부를 설정합니다. @default false */
     open?: boolean;
-    setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+    /** Tooltip의 열림 상태를 제어하는 함수입니다. */
+    setOpen?: Dispatch<SetStateAction<boolean>>;
+    /** 닫기 버튼을 표시할지 여부를 설정합니다. @default false */
     closeButton?: boolean;
-    style?: {
-        [key: string]: string | number | undefined;
-    };
     componentsProps?: {
         tooltip?: {
             sx?: Record<string, any>;
@@ -25,6 +27,11 @@ export interface TooltipProps extends MTooltipProps {
             style?: React.CSSProperties;
         };
     };
+    style?: {
+        [key: string]: string | number | undefined;
+    };
+    children: React.ReactElement<unknown, any>;
+    className?: string;
 }
 declare const Tooltip: ({ className, title, children, arrow, placement, followCursor, open, setOpen, closeButton, style, componentsProps, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

package/dist/components/{ui/TreeView2 → TreeView2}/TreeView2.d.ts

@@ -10,9 +10,10 @@ export interface TreeView2Props extends RichTreeViewProps<TreeViewBaseItem, bool
     items: TreeViewBaseItem[];
     /** 아이템 비활성 조건 함수(비활성 시 클릭/체크 방지) */
     isItemDisabled?: (item: TreeViewBaseItem) => boolean;
-    /** 체크박스 선택 기능 사용 여부 */
+    /** 체크박스 선택 기능 사용 여부 @default false*/
+    /** item title 앞에 체크박스를 추가할지 여부 */
     checkboxSelection?: boolean;
-    /** 다중 선택 허용 여부(선택 집합 유지) */
+    /** 다중 선택 허용 여부(선택 집합 유지) @default false*/
     multiSelect?: boolean;
     /** 선택/해제 토글 시 콜백
      *  @param event - 원본 이벤트

package/dist/components/VerticalTable/VerticalTable.d.ts

@@ -0,0 +1,77 @@
+import { default as React } from 'react';
+import { ButtonProps } from '../Button';
+/** ---------------------------------------------
+ * 보조 타입: 버튼 그룹 정의
+ * - `buttons` 필드에서 사용된다.
+ * - Button 컴포넌트와 호환되는 onClick/variant/disabled 속성을 그대로 연결.
+ * --------------------------------------------- */
+type Buttons = {
+    title?: string;
+    onClick?: ButtonProps["onClick"];
+    variant?: ButtonProps["variant"] | string;
+    disabled?: ButtonProps["disabled"];
+};
+/** ---------------------------------------------
+ * 보조 타입: colspan 정의
+ * - span: 합칠 칸 수
+ * - target: "th" | "td" (어느 쪽에 적용할지)
+ * --------------------------------------------- */
+type ColSpan = {
+    span: number;
+    target: "th" | "td" | string;
+};
+/** ---------------------------------------------
+ * 외부에서 내려주는 필드(아이템) 정의
+ * - 각 항목은 제목 셀(th) + 값 셀(td) 한 쌍으로 렌더된다.
+ * - type에 따라 입력/선택/버튼/텍스트 등 다양한 UI로 확장 가능.
+ * - colSpan.target으로 th/td 각각의 span을 독립적으로 제어할 수 있다.
+ * --------------------------------------------- */
+export type FieldRow = {
+    accessorKey: string;
+    title: string;
+    value?: string | React.ReactNode;
+    type?: "input" | "inputNum" | "inputEng" | "select" | "checkbox" | "checkboxN" | "datepicker" | "dateRangePicker" | "modal" | "button" | "date" | "text" | string;
+    required?: boolean;
+    textAlign?: "left" | "center" | "right";
+    buttons?: Buttons[];
+    colSpan?: ColSpan;
+    menuItems?: {
+        label: string;
+        value: string;
+    }[];
+    onClick?: () => void;
+    startIcon?: {
+        icon: React.ReactNode;
+        onClick: () => void;
+    };
+    endIcon?: {
+        icon: React.ReactNode;
+        onClick: () => void;
+    };
+    disabled?: boolean;
+    readOnly?: boolean;
+    maxLength?: number;
+};
+/** ---------------------------------------------
+ * 컴포넌트 외부에서 받는 props
+ * - data: 렌더/초기화에 사용할 원본 데이터
+ * - items: 테이블을 구성할 필드 정의 목록(FieldRow[])
+ * - totalColumns: 한 행을 구성하는 총 칸 수(th+td 합의 기준). 각 항목의 th span + td span 합이 누적되어 정확히 일치할 때 줄바꿈한다.
+ * - colGroup: <colgroup> 용 폭 배열 등(옵션)
+ * - title: 상단 타이틀(옵션)
+ * - onSave: 상단 TitleContainer에서 저장 액션 등으로 연결
+ * - onTableChange: 폼 데이터 변경을 100ms 디바운스로 통지
+ * --------------------------------------------- */
+export interface VerticalTableProps {
+    data: {
+        [key: string]: any;
+    };
+    items: FieldRow[];
+    totalColumns: number;
+    colGroup?: string[];
+    title?: string;
+    onSave?: (e: any) => void;
+    onTableChange?: (data: any) => void;
+}
+declare const VerticalTable: React.ForwardRefExoticComponent<VerticalTableProps & React.RefAttributes<HTMLTableElement>>;
+export default VerticalTable;

package/dist/components/VerticalTable/index.d.ts

@@ -0,0 +1,2 @@
+import { default as VerticalTable, FieldRow, VerticalTableProps } from './VerticalTable';
+export { VerticalTable, FieldRow, VerticalTableProps };