@gusun/design-system 0.1.0

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

@@ -0,0 +1,67 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ChipColor } from './chipStyles';
+import { OptionItem } from './formulaFunctions';
+export type SelectPlacement = 'auto' | `${'top' | 'bottom' | 'auto'}-${'left' | 'right' | 'auto'}`;
+interface SelectBaseProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue'> {
+    options?: OptionItem[];
+    confirm?: boolean;
+    variant?: 'box' | 'text' | 'chip';
+    size?: '24' | '20';
+    weight?: 'normal' | 'semibold';
+    defaultOpen?: boolean;
+    tabOpens?: boolean;
+    color?: ChipColor;
+    label?: ReactNode;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    width?: number | string;
+    maxWidth?: number | string;
+    menuWidth?: number | string;
+    placement?: SelectPlacement;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    emptyMessage?: string;
+    noResultMessage?: string;
+}
+export interface SelectSingleProps extends SelectBaseProps {
+    multiple?: false;
+    value?: string | null;
+    defaultValue?: string;
+    onChange?: (e: {
+        target: {
+            value: string;
+        };
+    }) => void;
+}
+export interface SelectMultipleProps extends SelectBaseProps {
+    multiple: true;
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (e: {
+        target: {
+            value: string[];
+        };
+    }) => void;
+}
+export type SelectProps = SelectSingleProps | SelectMultipleProps;
+export declare function Select({ value, defaultValue, onChange: onChangeProp, options, // [{ value, label, disabled? }] — disabled 옵션은 목록에 비활성 행으로 표시(선택 불가)
+multiple, // 체크박스 다중 선택 — value/defaultValue/onChange 값은 배열([value])
+confirm, // multiple 전용 — 선택을 draft로 들고 푸터(전체 선택+취소/확인)에서
+variant, // 'box'(필드형, 기본) | 'text'(인라인 텍스트형 — 필터·문단 사이용)
+size, // text variant 전용: '24'(14px) | '20'(12px) — box는 항상 14px
+weight, // chip variant 전용 텍스트 두께 — 'normal'(기본) | 'semibold'
+defaultOpen, // 마운트 시 드롭다운을 연 상태로 시작(1회성 — 이후는 일반 동작)
+tabOpens, // 트리거 포커스 상태에서 Tab=메뉴 열기(수식 키보드 체인용 — 일반 폼은 기본 꺼짐)
+color, // chip variant 전용: 'gray' | 'red' | 'blue' | 'black' — Chip과 동일한
+label, // 내부 라벨(box 전용, Figma type="solid label") — 값 선택 시 트리거에
+placeholder, disabled, readOnly, error, errorMessage, width, // 트리거 너비: 숫자(px) | CSS 길이 | 'hug'(콘텐츠 맞춤). 미지정 시 200px
+maxWidth, // 트리거 최대 너비(숫자 px/CSS 길이). hug일 때 제한용 — 넘으면 말줄임
+menuWidth, // 드롭다운 너비: 숫자(px)/CSS 길이. 미지정 시 트리거와 동일
+placement, // 'auto' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'
+searchable, // 드롭다운 상단 검색바로 옵션 필터
+searchPlaceholder, emptyMessage, noResultMessage, className, ...props }: SelectProps): import("react").JSX.Element;
+export declare function SelectChip(props: SelectProps): import("react").JSX.Element;
+export {};

package/dist-lib/components/SelectGroup.d.ts

@@ -0,0 +1,18 @@
+import { ComponentPropsWithoutRef } from 'react';
+declare const GAP_STYLE: {
+    '3': string;
+    '4': string;
+    '5': string;
+    '6': string;
+    '7': string;
+};
+interface SelectGroupProps extends ComponentPropsWithoutRef<'div'> {
+    direction?: 'horizontal' | 'vertical';
+    gap?: keyof typeof GAP_STYLE;
+    width?: 'hug' | 'fill';
+}
+export declare function SelectGroup({ children, direction, // 'horizontal' | 'vertical'
+gap, // 간격 토큰 키 — 기본 '5'(8px)
+width, // 'hug'(콘텐츠 폭) | 'fill'(부모 전체 폭 — 셀렉트들 균등 분할)
+className, ...props }: SelectGroupProps): import("react").JSX.Element;
+export {};

package/dist-lib/components/SelectOrInput.d.ts

@@ -0,0 +1,49 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { SelectPlacement } from './Select';
+import { OptionItem } from './formulaFunctions';
+type SelectOrInputSource = 'select' | 'input' | null;
+interface SelectOrInputProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (e: {
+        target: {
+            value: string;
+            source: SelectOrInputSource;
+        };
+    }) => void;
+    options?: (string | OptionItem)[];
+    showSelect?: boolean;
+    showInput?: boolean;
+    selectPlaceholder?: string;
+    inputPlaceholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    formatInput?: (raw: string) => string;
+    width?: number | string;
+    selectWidth?: number | string;
+    menuWidth?: number | string;
+    placement?: SelectPlacement;
+    searchable?: boolean;
+    inputProps?: ComponentPropsWithoutRef<'input'>;
+}
+export declare function SelectOrInput({ value, defaultValue, onChange, // (e) => void — e.target.value(문자열) · e.target.source('select'|'input'|null)
+options, // 등록된 값 목록: 문자열 | { value, label }
+showSelect, // false면 Select 숨김 — 직접 입력 전용(Input이 전체 폭)
+showInput, // false면 Input 숨김 — 등록값 선택 전용(Select가 전체 폭)
+selectPlaceholder, inputPlaceholder, disabled, readOnly, error, errorMessage, // Input의 에러 툴팁으로 표시
+formatInput, // (raw) => string — 직접 입력값 변환(예: 전화번호 하이픈). 입력 시마다 적용
+width, // 전체 너비: 숫자(px) | CSS 길이('100%' 등)
+selectWidth, // Select 너비 — 나머지는 Input이 채움
+menuWidth, // Select 드롭다운 너비(미지정 시 트리거와 동일)
+placement, searchable, // Select 검색 필터
+inputProps, // 내부 <input> 속성 통과(inputMode 등)
+className, ...props }: SelectOrInputProps): import("react").JSX.Element;
+export declare function EmailField({ selectPlaceholder, inputPlaceholder, inputProps, ...props }: SelectOrInputProps): import("react").JSX.Element;
+interface PhoneFieldProps extends Omit<SelectOrInputProps, 'formatInput'> {
+    formatInput?: ((raw: string) => string) | null;
+}
+export declare function PhoneField({ selectPlaceholder, inputPlaceholder, formatInput, // 기본: 하이픈 자동 포맷(끄려면 null)
+inputProps, ...props }: PhoneFieldProps): import("react").JSX.Element;
+export {};

package/dist-lib/components/SideNavigation.d.ts

@@ -0,0 +1,33 @@
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
+export interface SideNavigationButtonProps extends ComponentPropsWithoutRef<'button'> {
+    /** 좌측 아이콘(lucide 컴포넌트) — 없으면 생략 */
+    icon?: ElementType;
+    /** select 상태(파란 텍스트·알파 배경) */
+    selected?: boolean;
+    /** 라벨 오른쪽 NewTag(N) 표시 */
+    showNewTag?: boolean;
+    /** NewTag color 패스스루 */
+    newTagColor?: 'blue' | 'red' | 'black';
+    /** 우측 chevron(›) */
+    showArrow?: boolean;
+    /** 긴 라벨 처리: 'ellipsis'(말줄임 + hover 전체 툴팁) | 'wrap'(멀티라인 줄바꿈) */
+    overflow?: 'ellipsis' | 'wrap';
+    /** true=컨테이너 우측 라인에 붙는 형태(왼쪽만 라운드) / false=전체 라운드 */
+    line?: boolean;
+}
+export declare function SideNavigationButton({ children, icon: Icon, selected, disabled, showNewTag, newTagColor, showArrow, overflow, line, onClick, className, ...props }: SideNavigationButtonProps): import("react").JSX.Element;
+export interface SideNavigationProps extends ComponentPropsWithoutRef<'nav'> {
+    /** 180 | 220 | 260 (Figma variants) 또는 임의 px/CSS 길이 */
+    width?: number | string;
+    /** 우측 1px 구분선(side-nav-right-line) 표시 */
+    line?: boolean;
+    /** 'add menu'(+) 행 표시 — 메뉴 추가 기능 on/off */
+    showAdd?: boolean;
+    addLabel?: ReactNode;
+    /** 'bottom' | 'top' — 추가 행 위치(템플릿은 top 사용) */
+    addPosition?: 'bottom' | 'top';
+    /** (+) 클릭 시 메뉴 추가 동작 */
+    onAdd?: () => void;
+}
+export declare function SideNavigation({ children, // SideNavigationButton들
+width, line, showAdd, addLabel, addPosition, onAdd, className, ...props }: SideNavigationProps): import("react").JSX.Element;

package/dist-lib/components/SideNavigationTemplate.d.ts

@@ -0,0 +1,29 @@
+import { ComponentPropsWithoutRef, ElementType } from 'react';
+interface SideNavigationMenu {
+    id: string;
+    label: string;
+    count?: number;
+    icon?: ElementType;
+    showNewTag?: boolean;
+    newTagColor?: 'blue' | 'red' | 'black';
+    disabled?: boolean;
+}
+interface SideNavigationTemplateProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange' | 'onSelect'> {
+    menus?: SideNavigationMenu[];
+    selectedId?: string;
+    defaultSelectedId?: string;
+    onSelect?: (id: string) => void;
+    navWidth?: number;
+    line?: boolean;
+    showAdd?: boolean;
+    addLabel?: string;
+    addPosition?: 'top' | 'bottom';
+    onAdd?: () => void;
+    overflow?: 'ellipsis' | 'wrap';
+    height?: number | string;
+}
+export declare function SideNavigationTemplate({ menus, selectedId: selectedProp, // controlled 선택 id
+defaultSelectedId, // uncontrolled 초기 선택
+onSelect, navWidth, line, showAdd, addLabel, addPosition, onAdd, overflow, height, children, // 우측 콘텐츠 슬롯
+className, ...props }: SideNavigationTemplateProps): import("react").JSX.Element;
+export {};

package/dist-lib/components/Slot.d.ts

@@ -0,0 +1,16 @@
+import { ReactElement, ReactNode, Ref } from 'react';
+type AnyProps = Record<string, unknown>;
+export interface SlotProps {
+    /** 합성 대상 — 반드시 유효한 단일 엘리먼트 하나 */
+    children: ReactNode;
+    /** 자식의 내부 내용을 대체할 새 콘텐츠(미지정 시 자식 원래 내용 유지) */
+    content?: ReactNode;
+    /** 병합할 ref(우리 쪽) */
+    ref?: Ref<unknown>;
+    /** 그 외 머지할 props(className·style·on*·기타 속성) */
+    [prop: string]: unknown;
+}
+export declare function Slot({ children, content, ref, ...slotProps }: SlotProps): ReactElement<AnyProps & {
+    children?: ReactNode;
+}, string | import('react').JSXElementConstructor<any>> | null;
+export {};

package/dist-lib/components/Switch.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+interface SwitchProps extends ComponentPropsWithoutRef<'input'> {
+    label?: ReactNode;
+}
+export declare function Switch({ checked, defaultChecked, onChange, disabled, label, className, ...props }: SwitchProps): import("react").JSX.Element;
+export {};

package/dist-lib/components/Table.d.ts

@@ -0,0 +1,66 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+import { TableRowData, TableSort } from './tableView';
+export type TableRowKey = string | number;
+export interface TableColumnFilterOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface TableHeaderMenuItem {
+    key?: string | number;
+    label: ReactNode;
+    icon?: LucideIcon;
+    onClick?: (column: TableColumn) => void;
+}
+export interface TableColumn {
+    key: string;
+    label?: ReactNode;
+    /** 없으면 가변(fill). fill 컬럼은 최소 40px 유지 */
+    width?: number;
+    align?: 'left' | 'center' | 'right';
+    /** 본문 셀 직접 렌더 */
+    render?: (row: TableRowData) => ReactNode;
+    /** 헤더 셀(라벨 영역)을 직접 렌더(가장 우선). 없으면 filter → label 순으로 처리 */
+    renderHeader?: () => ReactNode;
+    /** 헤더 라벨 자리 인라인 텍스트형 Select(size 20) 필터 */
+    filter?: {
+        options: TableColumnFilterOption[];
+        allLabel?: string;
+        placeholder?: string;
+    };
+    /** 헤더 우측 ghost 아이콘 버튼(size 24) + Popover 메뉴 */
+    headerMenu?: {
+        sortable?: boolean;
+        items?: TableHeaderMenuItem[];
+        icon?: LucideIcon;
+        width?: number;
+    };
+    /** 셀 세로 병합 — (row, rowIndex, rows) => n. n>1=아래로 n행 병합, 0=위 셀 병합 범위에 포함(td 생략), 1/미지정=일반 셀 */
+    cellSpan?: (row: TableRowData, rowIndex: number, rows: TableRowData[]) => number;
+}
+export interface TableProps extends ComponentPropsWithoutRef<'div'> {
+    columns?: TableColumn[];
+    rows?: TableRowData[];
+    rowKey?: string;
+    selectable?: boolean;
+    selectedIds?: TableRowKey[];
+    onSelectChange?: (selectedIds: TableRowKey[]) => void;
+    filters?: Record<string, unknown>;
+    onFilterChange?: (filters: Record<string, unknown>) => void;
+    sort?: TableSort | null;
+    onSortChange?: (sort: TableSort | null) => void;
+    bordered?: boolean;
+    wrap?: boolean;
+    /** number | 'fill' — fill=부모 flex 높이를 상한으로(모달 등), 내용 적으면 자연 높이 */
+    maxHeight?: number | string;
+    /** 바디 스크롤 영역 최소 높이(px|CSS) — 내용이 적어도 이 높이는 확보 */
+    minHeight?: number | string;
+    minWidth?: number;
+    scrollX?: boolean;
+    loading?: boolean;
+    loadingMessage?: ReactNode;
+    emptyMessage?: ReactNode;
+    onRowClick?: (row: TableRowData) => void;
+}
+export declare function Table({ columns, rows, rowKey, selectable, selectedIds, onSelectChange, filters, onFilterChange, sort, onSortChange, bordered, wrap, maxHeight, minHeight, minWidth, scrollX, loading, loadingMessage, emptyMessage, onRowClick, className, ...props }: TableProps): import("react").JSX.Element;

package/dist-lib/components/TableTemplate.d.ts

@@ -0,0 +1,52 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { TableColumn } from './Table';
+import { TableRowData } from './tableView';
+interface TableTemplateColumn extends TableColumn {
+    [option: string]: unknown;
+}
+interface TableTemplateContext {
+    selectedIds: (string | number)[];
+    clearSelection: () => void;
+    visibleRows: TableRowData[];
+    query: string;
+}
+type TableTemplateSlot = ReactNode | ((ctx: TableTemplateContext) => ReactNode);
+interface TableTemplateProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    columns?: TableTemplateColumn[];
+    rows?: TableRowData[];
+    rowKey?: string;
+    actions?: TableTemplateSlot;
+    rightActions?: TableTemplateSlot;
+    selects?: TableTemplateSlot;
+    rightSelects?: TableTemplateSlot;
+    title?: ReactNode;
+    searchable?: boolean;
+    pagination?: boolean;
+    bordered?: boolean;
+    selectable?: boolean;
+    searchPlaceholder?: string;
+    searchKeys?: string[];
+    searchWidth?: number | string;
+    page?: number;
+    onPageChange?: (page: number) => void;
+    defaultPageSize?: number;
+    pageSize?: number;
+    onPageSizeChange?: (size: number) => void;
+    pageSizeOptions?: number[];
+    showPageSize?: boolean;
+    showTotal?: boolean;
+    maxButtons?: number;
+    paginationClassName?: string;
+    selectedIds?: (string | number)[];
+    onSelectChange?: (ids: (string | number)[]) => void;
+    wrap?: boolean;
+    minWidth?: number;
+    maxHeight?: number | string;
+    loading?: boolean;
+    emptyMessage?: ReactNode;
+    onRowClick?: (row: TableRowData) => void;
+    buttonGroupGap?: '3' | '4' | '5' | '6' | '7';
+    selectGroupGap?: '3' | '4' | '5' | '6' | '7';
+}
+export declare function TableTemplate({ columns, rows, rowKey, actions, rightActions, selects, rightSelects, title, searchable, pagination, bordered, selectable, searchPlaceholder, searchKeys, searchWidth, page: pageProp, onPageChange, defaultPageSize, pageSize: pageSizeProp, onPageSizeChange, pageSizeOptions, showPageSize, showTotal, maxButtons, paginationClassName, selectedIds: selectedIdsProp, onSelectChange, wrap, minWidth, maxHeight, loading, emptyMessage, onRowClick, buttonGroupGap, selectGroupGap, className, ...props }: TableTemplateProps): import("react").JSX.Element;
+export {};

package/dist-lib/components/Tabs.d.ts

@@ -0,0 +1,40 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+type TabTagType = 'blue' | 'red' | 'gray';
+export type TabValue = string | number;
+export interface TabMenuProps extends ComponentPropsWithoutRef<'button'> {
+    icon?: LucideIcon | null;
+    tag?: boolean;
+    tagText?: ReactNode;
+    /** Tag 타입: 'blue' | 'red' | 'gray' */
+    tagType?: TabTagType;
+    selected?: boolean;
+}
+export declare function TabMenu({ children, icon: Icon, tag, tagText, tagType, selected, disabled, onClick, className, ...props }: TabMenuProps): import("react").JSX.Element;
+export interface TabItem {
+    value: TabValue;
+    label: ReactNode;
+    icon?: LucideIcon;
+    tag?: boolean;
+    tagText?: ReactNode;
+    tagType?: TabTagType;
+    disabled?: boolean;
+}
+export interface TabsProps<V extends TabValue = TabValue> extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+    /** [{ value, label, icon?, tag?, tagText?, tagType?, disabled? }] */
+    items?: (Omit<TabItem, 'value'> & {
+        value: V;
+    })[];
+    /** controlled 선택값 */
+    value?: V;
+    /** uncontrolled 초기 선택값 */
+    defaultValue?: V;
+    /** (value) => void */
+    onChange?: (value: V) => void;
+    /** 'hug' | 'fill' */
+    variant?: 'hug' | 'fill';
+    /** 우측 임의 요소(ReactNode) */
+    rightSlot?: ReactNode;
+}
+export declare function Tabs<V extends TabValue>({ items, value, defaultValue, onChange, variant, rightSlot, className, ...props }: TabsProps<V>): import("react").JSX.Element;
+export {};

package/dist-lib/components/Tag.d.ts

@@ -0,0 +1,25 @@
+import { ComponentPropsWithoutRef } from 'react';
+declare const COLOR_STYLE: {
+    blue: string;
+    red: string;
+    gray: string;
+    black: string;
+};
+interface TagProps extends ComponentPropsWithoutRef<'span'> {
+    color?: keyof typeof COLOR_STYLE;
+    width?: 'hug' | 'fill';
+}
+export declare function Tag({ children, color, width, // 'hug' | 'fill'
+className, ...props }: TagProps): import("react").JSX.Element;
+declare const NEW_TAG_BG: {
+    blue: string;
+    red: string;
+    black: string;
+};
+interface NewTagProps extends ComponentPropsWithoutRef<'span'> {
+    color?: keyof typeof NEW_TAG_BG;
+}
+export declare function NewTag({ color, // 'blue' | 'red' | 'black'
+children, // 뱃지 글자(기본 'N')
+className, ...props }: NewTagProps): import("react").JSX.Element;
+export {};

package/dist-lib/components/TextArea.d.ts

@@ -0,0 +1,26 @@
+import { ChangeEvent, ComponentPropsWithoutRef } from 'react';
+interface TextAreaProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+    placeholder?: string;
+    rows?: number;
+    autoGrow?: boolean;
+    maxRows?: number;
+    maxLength?: number;
+    showCount?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    width?: number | string;
+    textareaProps?: ComponentPropsWithoutRef<'textarea'>;
+}
+export declare function TextArea({ value, defaultValue, onChange, placeholder, rows, // 기본 높이(줄 수). autoGrow=false면 고정 높이(초과 시 스크롤), true면 최소 높이
+autoGrow, // 입력량에 따라 높이 자동 증가
+maxRows, // autoGrow일 때 최대 행(초과 시 스크롤). 미지정 + autoGrow = 무한 증가
+maxLength, // 최대 글자수(입력 제한 + 카운터 분모)
+showCount, // 글자수 카운터 표시(Figma countTxt) — maxLength 있으면 'N/max', 없으면 'N'
+disabled, readOnly, error, errorMessage, width, // 너비: 숫자(px) 또는 CSS 길이 문자열. 미지정 시 320px
+className, textareaProps, ...props }: TextAreaProps): import("react").JSX.Element;
+export {};

package/dist-lib/components/TimeField.d.ts

@@ -0,0 +1,15 @@
+interface TimeFieldProps {
+    value?: string | null;
+    defaultValue?: string | null;
+    onChange?: (value: string | null) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    formatErrorMessage?: string;
+    width?: number | string;
+    className?: string;
+}
+export declare function TimeField({ value, defaultValue, onChange, placeholder, disabled, readOnly, error, errorMessage, formatErrorMessage, width, className, ...props }: TimeFieldProps): import("react").JSX.Element;
+export {};

package/dist-lib/components/ToolBar.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef } from 'react';
+type ToolBarProps = ComponentPropsWithoutRef<'div'>;
+export declare function ToolBar({ children, className, ...props }: ToolBarProps): import("react").JSX.Element;
+export declare function ToolBarDivider(): import("react").JSX.Element;
+export {};

package/dist-lib/components/Tooltip.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+declare const VARIANT_COLOR: {
+    error: {
+        bg: string;
+        fg: string;
+    };
+    normal: {
+        bg: string;
+        fg: string;
+    };
+};
+declare const BEAK_STYLE: {
+    top: string;
+    bottom: string;
+};
+interface TooltipProps {
+    children?: ReactNode;
+    variant?: keyof typeof VARIANT_COLOR;
+    beak?: keyof typeof BEAK_STYLE | 'none';
+    className?: string;
+}
+export declare function Tooltip({ children, variant, // 'error' | 'normal'
+beak, // 'top' | 'bottom' | 'none'
+className, }: TooltipProps): import("react").JSX.Element;
+export {};

package/dist-lib/components/TruncatingText.d.ts

@@ -0,0 +1,7 @@
+import { ComponentPropsWithoutRef, ElementType } from 'react';
+interface TruncatingTextProps extends ComponentPropsWithoutRef<'p'> {
+    as?: ElementType;
+}
+export declare function TruncatingText({ children, as: Component, // 'p' | 'span' | 'div' 등
+className, ...props }: TruncatingTextProps): import("react").JSX.Element;
+export {};

package/dist-lib/components/TwoDepthList.d.ts

@@ -0,0 +1,41 @@
+import { ChangeEvent, ComponentPropsWithoutRef, ReactNode } from 'react';
+interface TwoDepthOption {
+    value: string | number;
+    label: ReactNode;
+    disabled?: boolean;
+}
+interface TwoDepthApplyError {
+    error: 'left' | 'right';
+    message?: string;
+}
+interface TwoDepthListProps extends ComponentPropsWithoutRef<'div'> {
+    inputValue?: string;
+    separator?: string;
+    showInput?: boolean;
+    editable?: boolean;
+    onInputChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    onInputApply?: (text: string) => string | boolean | TwoDepthApplyError | null | undefined;
+    errorMessage?: string;
+    allowedChars?: RegExp | null;
+    inputPlaceholder?: string;
+    inputProps?: ComponentPropsWithoutRef<'input'>;
+    leftOptions?: TwoDepthOption[];
+    leftValue?: TwoDepthOption['value'];
+    onLeftChange?: (value: TwoDepthOption['value']) => void;
+    rightOptions?: TwoDepthOption[];
+    rightValue?: TwoDepthOption['value'];
+    onRightChange?: (value: TwoDepthOption['value']) => void;
+    maxVisible?: number;
+    width?: number | string;
+}
+export declare function TwoDepthList({ inputValue, separator, // 좌/우 파트 구분자 표시·합성 기준 — year_month '.' / time ':'
+showInput, // 상단 입력 영역 표시 여부(false면 좌/우 컬럼만 — 트리거가 따로 입력을 가질 때)
+editable, // 상단 input 직접 입력 허용(false면 readOnly로 값만 표시)
+onInputChange, // (e) => void — 입력 변경(raw 이벤트)
+onInputApply, errorMessage, // 파트 지정이 없을 때의 기본 툴팁 메시지
+allowedChars, inputPlaceholder, // 'YYYY.MM'·'HH:MM'처럼 구분자 포함 문자열 — 구분자로 쪼개 좌/우 placeholder로 사용
+inputProps, leftOptions, // [{ value, label, disabled? }]
+leftValue, onLeftChange, rightOptions, // [{ value, label, disabled? }]
+rightValue, onRightChange, maxVisible, // 각 컬럼 표시 행 수(초과 시 내부 스크롤)
+width, className, ...props }: TwoDepthListProps): import("react").JSX.Element;
+export {};

package/dist-lib/components/UsageExample.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+interface UsagePropRow {
+    name: string;
+    type?: string;
+    default?: string;
+    desc?: ReactNode;
+}
+interface UsageExampleProps {
+    code: string;
+    title?: string;
+    note?: ReactNode;
+    props?: UsagePropRow[];
+    className?: string;
+}
+export declare function UsageExample({ code, title, note, props, className }: UsageExampleProps): import("react").JSX.Element;
+export {};

package/dist-lib/components/chipStyles.d.ts

@@ -0,0 +1,11 @@
+export declare const CHIP_COLOR_CLASS: {
+    gray: string;
+    red: string;
+    blue: string;
+    black: string;
+    green: string;
+    violet: string;
+    pink: string;
+    orange: string;
+};
+export type ChipColor = keyof typeof CHIP_COLOR_CLASS;

package/dist-lib/components/formulaFunctions.d.ts

@@ -0,0 +1,75 @@
+export interface OptionItem {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface ConditionTab {
+    value: string;
+    label: string;
+    disableOptions?: boolean;
+    multiSelect?: boolean;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    bundleLabel?: string;
+}
+export interface ConditionMeta {
+    tabs: ConditionTab[];
+    optionsByTab: Record<string, OptionItem[]>;
+    options: OptionItem[];
+}
+export type IndividualItemSetting = {
+    type: 'plus' | 'minus';
+    points?: string;
+} | {
+    type: 'fit' | 'unfit';
+};
+export interface IndividualSetting {
+    type: 'individual';
+    mode: 'points' | 'fitness';
+    items: Record<string, IndividualItemSetting>;
+    fn?: string;
+}
+export interface FormulaLeafNode {
+    id: string;
+    kind: 'leaf';
+    criteria?: string | null;
+    value?: string | null;
+    valueTab?: string | null;
+    points?: string;
+    scoreType?: 'plus' | 'minus' | 'fit' | 'unfit' | null;
+    display?: 'full' | 'compact';
+    items?: string[];
+    individual?: IndividualSetting | null;
+    criteriaOptions?: OptionItem[];
+    valueOptions?: OptionItem[];
+    valueOptionsByCriteria?: Record<string, OptionItem[]>;
+    conditionMetaByCriteria?: Record<string, ConditionMeta>;
+}
+export interface FormulaGroupNode {
+    id: string;
+    kind: 'group';
+    fn: string;
+    children: FormulaNode[];
+    trueScore?: string;
+    falseScore?: string;
+    capScore?: string;
+    compareOp?: string;
+    compareScore?: string;
+}
+export type FormulaNode = FormulaLeafNode | FormulaGroupNode;
+export interface FormulaCatalog {
+    criteriaOptions: OptionItem[];
+    valueOptionsByCriteria: Record<string, OptionItem[]>;
+    conditionMetaByCriteria: Record<string, ConditionMeta>;
+}
+export declare const FORMULA_FN_FAMILY: Record<string, string>;
+export declare const FORMULA_GROUP_FUNCTIONS: string[];
+export declare function focusNextChainStop(currentEl: HTMLElement | null): void;
+export declare function chainTriggerKey(e: {
+    defaultPrevented: boolean;
+    key: string;
+    shiftKey: boolean;
+    preventDefault: () => void;
+}, open: boolean, onOpen: () => void): void;
+export declare function hasPointsScore(node: FormulaNode): boolean;
+export declare const CHAIN_STOP_FOCUS = "focus:outline-none focus-visible:ring-2 focus-visible:ring-text-field-focused-line data-[chain-focus]:ring-2 data-[chain-focus]:ring-text-field-focused-line";

package/dist-lib/components/modalContext.d.ts

@@ -0,0 +1 @@
+export declare const ModalBodyMaxContext: import('react').Context<number | null>;

package/dist-lib/components/popoverLayers.d.ts

@@ -0,0 +1,6 @@
+type LayerRef = object;
+export declare function pushPopoverLayer(ref: LayerRef): void;
+export declare function removePopoverLayer(ref: LayerRef): void;
+export declare function isTopPopoverLayer(ref: LayerRef): boolean;
+export declare function hasPopoverLayers(): boolean;
+export {};