@t3q-ui/design-system 0.0.0-stage → 1.56.0

package/dist/fonts.css

@@ -0,0 +1,12 @@
+@import 'pretendard/dist/web/variable/pretendardvariable.css';
+
+body {
+  font-family:
+    'Pretendard Variable',
+    Pretendard,
+    -apple-system,
+    BlinkMacSystemFont,
+    system-ui,
+    'Segoe UI',
+    sans-serif;
+}

package/dist/index-Ci1Wh5sA.d.cts

@@ -0,0 +1,253 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+declare namespace class_variance_authority_types {
+    type ClassValue = import('clsx').ClassValue;
+    type ClassProp = { class: ClassValue; className?: never } | { class?: never; className: ClassValue } | { class?: never; className?: never };
+}
+import * as React from 'react';
+import { ReactNode, CSSProperties } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { IHeaderParams, ICellRendererParams } from 'ag-grid-community';
+import { AgGridReactProps, AgGridReact } from 'ag-grid-react';
+
+type BadgeTone = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'etc';
+/**
+ * outline 뱃지의 accent(테두리) 색. 기본은 {hue}30 — 흰 바탕 대비 primary 4.7 · danger 5.9 · success 4.6 · etc 5.8.
+ * yellow30(1.75:1)·cyan30(1.59:1)은 흰 바탕에서 선이 안 보여 warning·info 는 40(5.4·5.5), grayscale30 도 연해 secondary 는 50(3.7)
+ * — bold 변형이 warning·info 글자만 예외로 두는 것과 같은 "밝은 색 예외" 규칙 (2026-10-17 이슈 47 6차)
+ */
+declare const BADGE_OUTLINE_ACCENT: Record<BadgeTone, {
+    border: string;
+    icon: string;
+}>;
+declare const badgeVariants: (props?: ({
+    size?: "small" | "medium" | null | undefined;
+    variant?: "primary" | "info" | "success" | "warning" | "danger" | "primaryBold" | "secondary" | "secondaryBold" | "dangerBold" | "warningBold" | "infoBold" | "etc" | "successBold" | "etcBold" | null | undefined;
+    rounded?: "full" | "default" | null | undefined;
+    appearance?: "tint" | "outline" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+/**
+ * 상태·분류를 색으로 보여 주는 읽기 전용 표시. 표의 상태 열, 제목 옆 상태에 쓴다.
+ *
+ * 언제 쓰나: 실행 중/중지/오류 같은 상태(`success`·`danger`·`warning`·`info`), 개수·등급 표시. 의미 variant 를 쓰고 색을 직접 바꾸지 않는다. `appearance='outline'` 은 흰 바탕 + 1px accent 테두리.
+ * 언제 안 쓰나: 사용자가 붙이고 뗄 수 있는 라벨(→ Tag), 클릭해 동작하는 것(→ Button), 지나가는 알림(→ Toast).
+ * 대신/함께: **상태 표시는 Badge 에 아이콘 + 글자** — `<Badge variant='success'><LucideIcon iconComponentName='circle-check' />완료</Badge>`(아이콘은 자식으로 바로, 16px·글자색). 별도 상태 컴포넌트는 없다(2026-10-30). 크기는 기본(`size` 를 주지 않는다). 상태값 → variant·아이콘 매핑은 소비 앱의 상수 한 곳에 둔다.
+ */
+declare function Badge({ className, variant, rounded, appearance, size, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "warning" | "danger" | "primaryBold" | "secondary" | "secondaryBold" | "dangerBold" | "warningBold" | "primaryLink" | "dangerLink" | "secondaryLink" | "warningLink" | "primaryOutline" | "secondaryOutline" | "dangerOutline" | "warningOutline" | null | undefined;
+    spacing?: "normal" | "compact" | null | undefined;
+    shape?: "rounded" | "normal" | null | undefined;
+    weight?: "medium" | "bold" | "regular" | "semibold" | null | undefined;
+    loading?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+/**
+ * 클릭으로 동작을 실행하는 기본 버튼. 텍스트가 있는 모든 행동(생성·저장·취소·링크형 보조 행동)에 쓴다.
+ *
+ * 언제 쓰나: 화면의 주요 행동은 `primaryBold` 1개, 보조 행동은 `secondaryOutline`·`secondaryLink`, 파괴적 행동은 `danger*`. 비동기 처리 중에는 `loading` 으로 잠근다.
+ * 언제 안 쓰나: 아이콘만 있는 버튼(→ IconButton), 페이지 이동(→ 링크. 버튼 모양이 꼭 필요하면 `asChild` 로 `<a>` 를 감싼다), 표 안의 상태 표시(→ Badge).
+ * 대신/함께: 같은 줄에 주요 버튼을 두 개 두지 않는다. 폼 푸터에서는 취소(secondaryOutline) 왼쪽, 저장(primaryBold) 오른쪽.
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * 모달 대화상자 본체. 짧은 입력이나 복합 상호작용을 현재 화면 위에서 처리할 때 쓴다.
+ *
+ * 언제 쓰나: 이름 바꾸기·태그 추가처럼 필드 서너 개의 입력, 미리보기·선택기처럼 맥락을 잠시 가리는 작업. `DialogTitle` 은 항상 넣는다.
+ * 언제 안 쓰나: 되돌릴 수 없는 행동의 최종 확인(→ AlertDialog), 섹션이 여럿인 긴 폼·상세 보기(→ Drawer), 지나가는 결과 알림(→ Toast).
+ * 대신/함께: 폼이면 `@t3q-ui/design-system/patterns` 의 FormDialog 가 제출 중 닫힘 차단까지 포함한다.
+ */
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
+    width?: "small" | "medium" | "large" | "xlarge" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    overlayClassName?: string;
+    hideCloseButton?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    (props: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    (props: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & {
+    variant?: "success" | "info" | "warning" | "danger";
+} & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+
+/**
+ * Drawer 루트. `modal`(기본 true)이 false 면 옆 패널 — 배경 dim 없음, 포커스 가두지 않음, 바깥 클릭으로 닫히지 않음(ESC·닫기 버튼).
+ *
+ * 언제 쓰나: 목록 행을 눌러 보는 상세는 `modal={false}`, 목록 위에 띄우는 긴 폼은 기본(modal).
+ * 언제 안 쓰나: 되돌릴 수 없는 확인(→ AlertDialog), 전용 URL 이 필요한 화면(→ 페이지).
+ * 대신/함께: 본체는 `DrawerContent`, 폼이면 patterns 의 FormDrawer.
+ */
+declare const Drawer: {
+    ({ modal, ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DrawerTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * 화면 가장자리에서 미끄러져 나오는 패널 본체. 목록 맥락을 유지한 채 긴 폼·상세를 볼 때 쓴다.
+ *
+ * 언제 쓰나: 목록에서 "생성" 을 눌러 여는 섹션 여럿의 폼(side right, size large), 행을 눌러 보는 상세(루트 `Drawer` 에 `modal={false}` — 옆 패널). `DrawerTitle` 은 항상 넣는다.
+ * 언제 안 쓰나: 필드 서너 개의 짧은 입력(→ Dialog), 되돌릴 수 없는 확인(→ AlertDialog), 전용 URL 이 필요한 화면(→ 페이지).
+ * 대신/함께: 폼이면 `@t3q-ui/design-system/patterns` 의 FormDrawer 가 제출 중 닫힘 차단까지 포함한다. 본문은 `DrawerBody` 로 스크롤시킨다.
+ */
+declare const DrawerContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
+    side?: "bottom" | "left" | "right" | "top" | null | undefined;
+    size?: "small" | "medium" | "large" | "xLarge" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerHeader: {
+    ({ ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DrawerBody: {
+    ({ ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DrawerFooter: {
+    ({ ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+
+type PageHeaderTabItem = {
+    label: string;
+    value: string;
+    href?: string;
+    matchValues?: string[];
+    disabled?: boolean;
+    badge?: number | string;
+};
+type PageHeaderState = {
+    title?: string;
+    /**
+     * Optional override for the breadcrumb tail (last item).
+     * - `undefined` (default): consuming apps may fall back to `title`.
+     * - `null`: explicitly suppress the auto-appended breadcrumb tail.
+     * - `string`: use the given text as the breadcrumb tail regardless of `title`.
+     *
+     * design-system itself does not render breadcrumbs (they are passed in as the
+     * `breadcrumb` slot) — this field is a contract for the consuming app's
+     * breadcrumb wrapper to read.
+     */
+    breadcrumbTitle?: string | null;
+    description?: ReactNode;
+    status?: ReactNode;
+    /** 제목 아래 메타. 상세 화면의 핵심 정보는 여기 한 곳 — 여러 개면 `MetaGroup columns={3}` + `MetaItem`(2026-10-30 사용자 결정: 메타 자리를 두 개로 나누지 않는다) */
+    meta?: ReactNode;
+    actions?: ReactNode;
+    /** Right-aligned slot next to the title (e.g. a secondary title action). */
+    titleRight?: ReactNode;
+    bottomLeft?: ReactNode;
+    bottomRight?: ReactNode;
+    tabs?: PageHeaderTabItem[];
+    activeTab?: string;
+};
+type PageHeaderUpdate = PageHeaderState | ((prev: PageHeaderState) => PageHeaderState);
+type PageHeaderContextType = {
+    pageHeader: PageHeaderState;
+    setPageHeader: (state: PageHeaderUpdate) => void;
+    resetPageHeader: () => void;
+};
+declare function PageHeaderProvider({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function usePageHeader(): PageHeaderContextType;
+type PageHeaderProps = PageHeaderState & {
+    breadcrumb?: ReactNode;
+    onTabChange?: (value: string, tab: PageHeaderTabItem) => void;
+    fallbackTitle?: string;
+    compact?: boolean;
+    /** 내용(빵부스러기·제목·행동·설명·탭)의 최대 폭 — CSS 길이(예: `var(--max-w-page-content)`). 주면 그 폭 안에 가운데 두고 띠(배경·아래 선)는 전폭 그대로. FormPage 가 폼 폭에 맞춰 넘긴다(2026-10-26 22차). 기본 없음 = 전폭 */
+    contentMaxWidth?: string;
+};
+/**
+ * 페이지 최상단 헤더. 제목·설명·상태·메타·주요 행동·필터 줄·탭을 한 곳에 둔다.
+ *
+ * 언제 쓰나: 모든 목록·상세 화면의 맨 위에 한 번. 주요 행동은 `actions`(제목 줄 오른쪽 — 탭이 있어도 같고, 제목이 길어 자리가 모자라면 버튼 묶음이 제목 아래 줄 오른쪽으로 내려간다), 검색·필터는 `bottomRight`, 새로고침은 `titleRight` 에 PageHeaderRefreshButton(actions 와 같은 묶음), 페이지 이동 탭은 `tabs`(제목 아래 별도 줄). 버튼이 나란히 놓이는 슬롯(`actions`·`titleRight`·`bottomLeft`)은 버튼 사이 8px 로 그린다 — 직접 Stack 으로 감싸지 않는다.
+ * 언제 안 쓰나: 섹션 제목(→ `FormSection`·`CardHeader`), 모달·패널 제목(→ DialogHeader·DrawerHeader), 한 페이지에 두 번.
+ * 대신/함께: 레이아웃이 헤더를 소유하는 앱은 `PageHeaderProvider` + `usePageHeader` 로 내용만 밀어 넣는다. 목록 화면 전체는 ListPage 패턴이 이를 포함한다.
+ */
+declare function PageHeader({ breadcrumb, title, fallbackTitle, description, status, meta, actions, titleRight, bottomLeft, bottomRight, tabs, activeTab, onTabChange, compact, contentMaxWidth, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
+
+type AgGridTableType = AgGridReactProps & {
+    containerStyle?: CSSProperties;
+    noRowsOverlayComponentContainerStyle?: CSSProperties;
+};
+/**
+ * ag-grid 기반 데이터 표. 목록 화면의 본 표에 쓴다.
+ *
+ * 언제 쓰나: 서버 페이징 목록, 정렬·컬럼 숨김·행 선택·셀 렌더러가 필요한 표. `loading` 이면 TableSkeleton, 0건이면 `noRowsOverlayComponent`. 주 식별자 열(보통 이름)에는 `type: 'primary'` 를 주면 굵게 강조되고 클릭 가능한 행에서 hover 시 밑줄이 생긴다. `sortable: true` 로 명시한 열은 정렬 전에도 정렬 아이콘이 보인다(그 열에 `unSortIcon: false` 를 주면 끔. 2026-10-16 다시 켬 — 원문 심판이 "정렬 가능 표시 없음" 을 반복 감점). 숫자 열(건수·크기·비율·시간)은 `type: 'number'` — 오른쪽 정렬·숫자 폭이고, width·flex 를 안 주면 폭 140(ag-grid 기본 200 은 비어 보인다). 숫자 열에 `flex` 를 주지 않는다.
+ * 언제 안 쓰나: 수십 행 이하의 단순 나열(→ Table), 키-값 표(→ MetaItem), 편집 가능한 파라미터 표(→ ParameterTable).
+ * 대신/함께: 목록 화면 전체 골격은 `@t3q-ui/design-system/patterns` 의 ListPage 가 이 표를 포함한다. 정렬 값은 `getSortedColumnState` 로 읽는다. `onRowClicked` 를 주면 포커스된 셀에서 Enter 로도 호출된다(키보드 상세 진입). 열 제목이 들어가는 최소 폭은 표가 보정하고(`width: 110` 같은 좁은 폭을 줘도 "크기(M…" 로 잘리지 않음) 넘치는 셀 글자는 말줄임표로 끝난다. 보조 정보(id·이미지·경로·설명)는 열을 늘리지 말고 `TwoLineCellRenderer`(`cellRendererParams.secondaryField`)로 이름 아래 줄에 — ListPage 는 `secondaryField` 한 줄로 된다. 이름 열만 `flex: 1, minWidth: 200`(남는 폭을 가진다 — maxWidth 를 주면 표 오른쪽이 빈다), 숫자·날짜 열은 `width` 로.
+ */
+declare const AgGridTable: React.ForwardRefExoticComponent<AgGridReactProps<any> & {
+    containerStyle?: CSSProperties;
+    noRowsOverlayComponentContainerStyle?: CSSProperties;
+} & React.RefAttributes<AgGridReact<any>>>;
+declare function HeaderCheckboxRenderer(props: IHeaderParams): react_jsx_runtime.JSX.Element;
+declare function RowCheckboxRenderer(params: ICellRendererParams): react_jsx_runtime.JSX.Element;
+
+/** `sortable: true` 로 명시한 열(그룹 안의 열 포함)에 `unSortIcon: true` 를 붙인다. 열이 직접 unSortIcon 을 정했으면 그대로 */
+declare function withExplicitSortIcons<T>(defs: T): T;
+/** 정렬 아이콘이 늘 보이는 숫자 열의 값 셀에 붙는 클래스 — style.css 가 오른쪽 여백을 아이콘 폭(16 + 간격 8)만큼 늘린다 */
+declare const SORT_ICON_OFFSET_CLASS = "ag-cell-sort-offset";
+/**
+ * 정렬 아이콘이 늘 보이는 숫자 열(`type` 에 number + `sortable: true` + `unSortIcon: true` — `withExplicitSortIcons` 다음에 부른다)의 값 셀에
+ * `SORT_ICON_OFFSET_CLASS` 를 합친다(그룹 children 재귀). 숫자 열 제목은 아이콘이 글자 뒤라 글자가 값보다 아이콘 폭만큼 왼쪽에서 끝났다 —
+ * 값을 그만큼 안쪽으로 들여 글자 끝과 값 끝을 맞춘다(2026-10-30 홀드아웃 17 세트 2, Gemini "right-aligned numeric values under left-aligned
+ * column headers" 2쌍). 아이콘 위치(글자 뒤, 2026-10-16 4차)는 그대로. 정렬 전엔 아이콘이 없는 열(`defaultColDef` 로만 정렬 가능)·함수형 cellClass 는 그대로
+ */
+declare function withSortIconOffset<T>(defs: T): T;
+/** 열 제목 글자 폭 추정(px) — 헤더 14px/700 기준: 한글·한자·전각 14, 그 외(영문·숫자·기호) 8. "제목이 잘리지 않을 만큼" 이면 되고 정확할 필요는 없다 */
+declare function estimateHeaderTextWidth(label: string): number;
+/** 보이는 flex 열이 모두 `maxWidth` 를 가지면 그 `maxWidth` 를 뗀다(그룹 children 재귀) — 남는 폭을 받을 열이 없으면 행이 표 오른쪽 끝 전에
+ *  끝나 빈 띠가 남는다(2026-10-28 홀드아웃 14: 이름 열 하나만 `flex: 2, maxWidth: 480` 이고 나머지가 고정 폭, "row dividers stop around 1330px",
+ *  Opus·Gemini). 상한 없는 flex 열이 하나라도 있거나 flex 열이 없으면 그대로(같은 배열). 런타임에 열을 숨겨 생기는 경우는 다루지 않는다 */
+declare function withFlexFill<T>(defs: T): T;
+/** 폭을 안 준 number 열의 기본 폭. ag-grid 기본 200 은 숫자 열을 비어 보이게 한다(2026-10-27 홀드아웃 13 layout 지적 "wide empty area") */
+declare const NUMBER_COLUMN_WIDTH = 140;
+/** `type: 'number'` 열에 width·flex·minWidth·maxWidth 가 모두 없으면 `width: 140`(그룹 children 재귀). 폭을 하나라도 줬으면 그대로 */
+declare function withNumberColumnWidth<T>(defs: T): T;
+/** `type` 이 가리키는 columnTypes 의 cellClass/headerClass 를 열이 직접 준 값과 합친다(그룹 children 재귀). ag-grid 는 열의 값이
+ *  타입의 값을 통째로 덮으므로, 열이 `cellClass: 'font-semibold'` 를 더하기만 해도 number 의 `ag-right-aligned-cell` 이 사라진다 — 그걸 막는다 */
+declare function withTypeClasses<T>(defs: T, columnTypes: Record<string, {
+    cellClass?: unknown;
+    headerClass?: unknown;
+}>): T;
+declare function withHeaderMinWidth<T>(defs: T): T;
+interface TwoLineCellRendererParams<TRow = unknown> extends ICellRendererParams<TRow> {
+    /** 보조 줄에 보일 행 필드(점 표기 가능: 'image.tag'). 값이 없거나 빈 문자열이면 한 줄만 그린다 */
+    secondaryField?: string;
+    /** 보조 줄에 덧붙일 클래스 — id·경로·버전처럼 고정폭이 읽기 좋은 값은 'font-mono' */
+    secondaryClassName?: string;
+}
+/**
+ * 두 줄 셀 — 첫 줄은 열의 값(이름), 둘째 줄은 `cellRendererParams.secondaryField` 의 값(id·이미지·경로·설명)을 12px 회색으로.
+ * dl-ui-v3 목록의 이름 열(이름 / 설명, 행 56px)과 같은 모양.
+ *
+ * 언제 쓰나: 주 식별자 열 아래에 보조 정보를 둘 때 — 열을 하나 더 늘리는 대신(열이 많아지면 잘린다. 한 줄 판 12차, 2026-10-18 13차 ⑥). `ListPage secondaryField` 가 이 렌더러를 primary 열에 붙인다.
+ * 쓰는 법: `{ field: 'name', cellRenderer: TwoLineCellRenderer, cellRendererParams: { secondaryField: 'image' } }` + 표에 `rowHeight={56}`(ListPage 는 자동).
+ * 언제 안 쓰나: 보조 값이 정렬·필터 대상이면 제 열로 둔다. 상태는 Badge(아이콘 + 글자) 셀 렌더러.
+ */
+declare function TwoLineCellRenderer<TRow = unknown>(params: TwoLineCellRendererParams<TRow>): react_jsx_runtime.JSX.Element;
+
+export { DrawerDescription as A, type BadgeProps as B, type PageHeaderState as C, Dialog as D, PageHeaderProvider as E, usePageHeader as F, type PageHeaderProps as G, PageHeader as H, AgGridTable as I, HeaderCheckboxRenderer as J, type AgGridTableType as K, withExplicitSortIcons as L, withSortIconOffset as M, estimateHeaderTextWidth as N, withFlexFill as O, type PageHeaderTabItem as P, NUMBER_COLUMN_WIDTH as Q, RowCheckboxRenderer as R, SORT_ICON_OFFSET_CLASS as S, withNumberColumnWidth as T, withTypeClasses as U, withHeaderMinWidth as V, type TwoLineCellRendererParams as W, TwoLineCellRenderer as X, Badge as a, badgeVariants as b, type BadgeTone as c, BADGE_OUTLINE_ACCENT as d, Button as e, buttonVariants as f, type ButtonProps as g, DialogPortal as h, DialogOverlay as i, DialogTrigger as j, DialogClose as k, DialogContent as l, DialogHeader as m, DialogFooter as n, DialogTitle as o, DialogDescription as p, Drawer as q, DrawerPortal as r, DrawerOverlay as s, DrawerTrigger as t, DrawerClose as u, DrawerContent as v, DrawerHeader as w, DrawerBody as x, DrawerFooter as y, DrawerTitle as z };

package/dist/index-Ci1Wh5sA.d.ts

@@ -0,0 +1,253 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+declare namespace class_variance_authority_types {
+    type ClassValue = import('clsx').ClassValue;
+    type ClassProp = { class: ClassValue; className?: never } | { class?: never; className: ClassValue } | { class?: never; className?: never };
+}
+import * as React from 'react';
+import { ReactNode, CSSProperties } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { IHeaderParams, ICellRendererParams } from 'ag-grid-community';
+import { AgGridReactProps, AgGridReact } from 'ag-grid-react';
+
+type BadgeTone = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'etc';
+/**
+ * outline 뱃지의 accent(테두리) 색. 기본은 {hue}30 — 흰 바탕 대비 primary 4.7 · danger 5.9 · success 4.6 · etc 5.8.
+ * yellow30(1.75:1)·cyan30(1.59:1)은 흰 바탕에서 선이 안 보여 warning·info 는 40(5.4·5.5), grayscale30 도 연해 secondary 는 50(3.7)
+ * — bold 변형이 warning·info 글자만 예외로 두는 것과 같은 "밝은 색 예외" 규칙 (2026-10-17 이슈 47 6차)
+ */
+declare const BADGE_OUTLINE_ACCENT: Record<BadgeTone, {
+    border: string;
+    icon: string;
+}>;
+declare const badgeVariants: (props?: ({
+    size?: "small" | "medium" | null | undefined;
+    variant?: "primary" | "info" | "success" | "warning" | "danger" | "primaryBold" | "secondary" | "secondaryBold" | "dangerBold" | "warningBold" | "infoBold" | "etc" | "successBold" | "etcBold" | null | undefined;
+    rounded?: "full" | "default" | null | undefined;
+    appearance?: "tint" | "outline" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+/**
+ * 상태·분류를 색으로 보여 주는 읽기 전용 표시. 표의 상태 열, 제목 옆 상태에 쓴다.
+ *
+ * 언제 쓰나: 실행 중/중지/오류 같은 상태(`success`·`danger`·`warning`·`info`), 개수·등급 표시. 의미 variant 를 쓰고 색을 직접 바꾸지 않는다. `appearance='outline'` 은 흰 바탕 + 1px accent 테두리.
+ * 언제 안 쓰나: 사용자가 붙이고 뗄 수 있는 라벨(→ Tag), 클릭해 동작하는 것(→ Button), 지나가는 알림(→ Toast).
+ * 대신/함께: **상태 표시는 Badge 에 아이콘 + 글자** — `<Badge variant='success'><LucideIcon iconComponentName='circle-check' />완료</Badge>`(아이콘은 자식으로 바로, 16px·글자색). 별도 상태 컴포넌트는 없다(2026-10-30). 크기는 기본(`size` 를 주지 않는다). 상태값 → variant·아이콘 매핑은 소비 앱의 상수 한 곳에 둔다.
+ */
+declare function Badge({ className, variant, rounded, appearance, size, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "warning" | "danger" | "primaryBold" | "secondary" | "secondaryBold" | "dangerBold" | "warningBold" | "primaryLink" | "dangerLink" | "secondaryLink" | "warningLink" | "primaryOutline" | "secondaryOutline" | "dangerOutline" | "warningOutline" | null | undefined;
+    spacing?: "normal" | "compact" | null | undefined;
+    shape?: "rounded" | "normal" | null | undefined;
+    weight?: "medium" | "bold" | "regular" | "semibold" | null | undefined;
+    loading?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+/**
+ * 클릭으로 동작을 실행하는 기본 버튼. 텍스트가 있는 모든 행동(생성·저장·취소·링크형 보조 행동)에 쓴다.
+ *
+ * 언제 쓰나: 화면의 주요 행동은 `primaryBold` 1개, 보조 행동은 `secondaryOutline`·`secondaryLink`, 파괴적 행동은 `danger*`. 비동기 처리 중에는 `loading` 으로 잠근다.
+ * 언제 안 쓰나: 아이콘만 있는 버튼(→ IconButton), 페이지 이동(→ 링크. 버튼 모양이 꼭 필요하면 `asChild` 로 `<a>` 를 감싼다), 표 안의 상태 표시(→ Badge).
+ * 대신/함께: 같은 줄에 주요 버튼을 두 개 두지 않는다. 폼 푸터에서는 취소(secondaryOutline) 왼쪽, 저장(primaryBold) 오른쪽.
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * 모달 대화상자 본체. 짧은 입력이나 복합 상호작용을 현재 화면 위에서 처리할 때 쓴다.
+ *
+ * 언제 쓰나: 이름 바꾸기·태그 추가처럼 필드 서너 개의 입력, 미리보기·선택기처럼 맥락을 잠시 가리는 작업. `DialogTitle` 은 항상 넣는다.
+ * 언제 안 쓰나: 되돌릴 수 없는 행동의 최종 확인(→ AlertDialog), 섹션이 여럿인 긴 폼·상세 보기(→ Drawer), 지나가는 결과 알림(→ Toast).
+ * 대신/함께: 폼이면 `@t3q-ui/design-system/patterns` 의 FormDialog 가 제출 중 닫힘 차단까지 포함한다.
+ */
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
+    width?: "small" | "medium" | "large" | "xlarge" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    overlayClassName?: string;
+    hideCloseButton?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    (props: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    (props: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & {
+    variant?: "success" | "info" | "warning" | "danger";
+} & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+
+/**
+ * Drawer 루트. `modal`(기본 true)이 false 면 옆 패널 — 배경 dim 없음, 포커스 가두지 않음, 바깥 클릭으로 닫히지 않음(ESC·닫기 버튼).
+ *
+ * 언제 쓰나: 목록 행을 눌러 보는 상세는 `modal={false}`, 목록 위에 띄우는 긴 폼은 기본(modal).
+ * 언제 안 쓰나: 되돌릴 수 없는 확인(→ AlertDialog), 전용 URL 이 필요한 화면(→ 페이지).
+ * 대신/함께: 본체는 `DrawerContent`, 폼이면 patterns 의 FormDrawer.
+ */
+declare const Drawer: {
+    ({ modal, ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DrawerTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * 화면 가장자리에서 미끄러져 나오는 패널 본체. 목록 맥락을 유지한 채 긴 폼·상세를 볼 때 쓴다.
+ *
+ * 언제 쓰나: 목록에서 "생성" 을 눌러 여는 섹션 여럿의 폼(side right, size large), 행을 눌러 보는 상세(루트 `Drawer` 에 `modal={false}` — 옆 패널). `DrawerTitle` 은 항상 넣는다.
+ * 언제 안 쓰나: 필드 서너 개의 짧은 입력(→ Dialog), 되돌릴 수 없는 확인(→ AlertDialog), 전용 URL 이 필요한 화면(→ 페이지).
+ * 대신/함께: 폼이면 `@t3q-ui/design-system/patterns` 의 FormDrawer 가 제출 중 닫힘 차단까지 포함한다. 본문은 `DrawerBody` 로 스크롤시킨다.
+ */
+declare const DrawerContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
+    side?: "bottom" | "left" | "right" | "top" | null | undefined;
+    size?: "small" | "medium" | "large" | "xLarge" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerHeader: {
+    ({ ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DrawerBody: {
+    ({ ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DrawerFooter: {
+    ({ ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+
+type PageHeaderTabItem = {
+    label: string;
+    value: string;
+    href?: string;
+    matchValues?: string[];
+    disabled?: boolean;
+    badge?: number | string;
+};
+type PageHeaderState = {
+    title?: string;
+    /**
+     * Optional override for the breadcrumb tail (last item).
+     * - `undefined` (default): consuming apps may fall back to `title`.
+     * - `null`: explicitly suppress the auto-appended breadcrumb tail.
+     * - `string`: use the given text as the breadcrumb tail regardless of `title`.
+     *
+     * design-system itself does not render breadcrumbs (they are passed in as the
+     * `breadcrumb` slot) — this field is a contract for the consuming app's
+     * breadcrumb wrapper to read.
+     */
+    breadcrumbTitle?: string | null;
+    description?: ReactNode;
+    status?: ReactNode;
+    /** 제목 아래 메타. 상세 화면의 핵심 정보는 여기 한 곳 — 여러 개면 `MetaGroup columns={3}` + `MetaItem`(2026-10-30 사용자 결정: 메타 자리를 두 개로 나누지 않는다) */
+    meta?: ReactNode;
+    actions?: ReactNode;
+    /** Right-aligned slot next to the title (e.g. a secondary title action). */
+    titleRight?: ReactNode;
+    bottomLeft?: ReactNode;
+    bottomRight?: ReactNode;
+    tabs?: PageHeaderTabItem[];
+    activeTab?: string;
+};
+type PageHeaderUpdate = PageHeaderState | ((prev: PageHeaderState) => PageHeaderState);
+type PageHeaderContextType = {
+    pageHeader: PageHeaderState;
+    setPageHeader: (state: PageHeaderUpdate) => void;
+    resetPageHeader: () => void;
+};
+declare function PageHeaderProvider({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function usePageHeader(): PageHeaderContextType;
+type PageHeaderProps = PageHeaderState & {
+    breadcrumb?: ReactNode;
+    onTabChange?: (value: string, tab: PageHeaderTabItem) => void;
+    fallbackTitle?: string;
+    compact?: boolean;
+    /** 내용(빵부스러기·제목·행동·설명·탭)의 최대 폭 — CSS 길이(예: `var(--max-w-page-content)`). 주면 그 폭 안에 가운데 두고 띠(배경·아래 선)는 전폭 그대로. FormPage 가 폼 폭에 맞춰 넘긴다(2026-10-26 22차). 기본 없음 = 전폭 */
+    contentMaxWidth?: string;
+};
+/**
+ * 페이지 최상단 헤더. 제목·설명·상태·메타·주요 행동·필터 줄·탭을 한 곳에 둔다.
+ *
+ * 언제 쓰나: 모든 목록·상세 화면의 맨 위에 한 번. 주요 행동은 `actions`(제목 줄 오른쪽 — 탭이 있어도 같고, 제목이 길어 자리가 모자라면 버튼 묶음이 제목 아래 줄 오른쪽으로 내려간다), 검색·필터는 `bottomRight`, 새로고침은 `titleRight` 에 PageHeaderRefreshButton(actions 와 같은 묶음), 페이지 이동 탭은 `tabs`(제목 아래 별도 줄). 버튼이 나란히 놓이는 슬롯(`actions`·`titleRight`·`bottomLeft`)은 버튼 사이 8px 로 그린다 — 직접 Stack 으로 감싸지 않는다.
+ * 언제 안 쓰나: 섹션 제목(→ `FormSection`·`CardHeader`), 모달·패널 제목(→ DialogHeader·DrawerHeader), 한 페이지에 두 번.
+ * 대신/함께: 레이아웃이 헤더를 소유하는 앱은 `PageHeaderProvider` + `usePageHeader` 로 내용만 밀어 넣는다. 목록 화면 전체는 ListPage 패턴이 이를 포함한다.
+ */
+declare function PageHeader({ breadcrumb, title, fallbackTitle, description, status, meta, actions, titleRight, bottomLeft, bottomRight, tabs, activeTab, onTabChange, compact, contentMaxWidth, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
+
+type AgGridTableType = AgGridReactProps & {
+    containerStyle?: CSSProperties;
+    noRowsOverlayComponentContainerStyle?: CSSProperties;
+};
+/**
+ * ag-grid 기반 데이터 표. 목록 화면의 본 표에 쓴다.
+ *
+ * 언제 쓰나: 서버 페이징 목록, 정렬·컬럼 숨김·행 선택·셀 렌더러가 필요한 표. `loading` 이면 TableSkeleton, 0건이면 `noRowsOverlayComponent`. 주 식별자 열(보통 이름)에는 `type: 'primary'` 를 주면 굵게 강조되고 클릭 가능한 행에서 hover 시 밑줄이 생긴다. `sortable: true` 로 명시한 열은 정렬 전에도 정렬 아이콘이 보인다(그 열에 `unSortIcon: false` 를 주면 끔. 2026-10-16 다시 켬 — 원문 심판이 "정렬 가능 표시 없음" 을 반복 감점). 숫자 열(건수·크기·비율·시간)은 `type: 'number'` — 오른쪽 정렬·숫자 폭이고, width·flex 를 안 주면 폭 140(ag-grid 기본 200 은 비어 보인다). 숫자 열에 `flex` 를 주지 않는다.
+ * 언제 안 쓰나: 수십 행 이하의 단순 나열(→ Table), 키-값 표(→ MetaItem), 편집 가능한 파라미터 표(→ ParameterTable).
+ * 대신/함께: 목록 화면 전체 골격은 `@t3q-ui/design-system/patterns` 의 ListPage 가 이 표를 포함한다. 정렬 값은 `getSortedColumnState` 로 읽는다. `onRowClicked` 를 주면 포커스된 셀에서 Enter 로도 호출된다(키보드 상세 진입). 열 제목이 들어가는 최소 폭은 표가 보정하고(`width: 110` 같은 좁은 폭을 줘도 "크기(M…" 로 잘리지 않음) 넘치는 셀 글자는 말줄임표로 끝난다. 보조 정보(id·이미지·경로·설명)는 열을 늘리지 말고 `TwoLineCellRenderer`(`cellRendererParams.secondaryField`)로 이름 아래 줄에 — ListPage 는 `secondaryField` 한 줄로 된다. 이름 열만 `flex: 1, minWidth: 200`(남는 폭을 가진다 — maxWidth 를 주면 표 오른쪽이 빈다), 숫자·날짜 열은 `width` 로.
+ */
+declare const AgGridTable: React.ForwardRefExoticComponent<AgGridReactProps<any> & {
+    containerStyle?: CSSProperties;
+    noRowsOverlayComponentContainerStyle?: CSSProperties;
+} & React.RefAttributes<AgGridReact<any>>>;
+declare function HeaderCheckboxRenderer(props: IHeaderParams): react_jsx_runtime.JSX.Element;
+declare function RowCheckboxRenderer(params: ICellRendererParams): react_jsx_runtime.JSX.Element;
+
+/** `sortable: true` 로 명시한 열(그룹 안의 열 포함)에 `unSortIcon: true` 를 붙인다. 열이 직접 unSortIcon 을 정했으면 그대로 */
+declare function withExplicitSortIcons<T>(defs: T): T;
+/** 정렬 아이콘이 늘 보이는 숫자 열의 값 셀에 붙는 클래스 — style.css 가 오른쪽 여백을 아이콘 폭(16 + 간격 8)만큼 늘린다 */
+declare const SORT_ICON_OFFSET_CLASS = "ag-cell-sort-offset";
+/**
+ * 정렬 아이콘이 늘 보이는 숫자 열(`type` 에 number + `sortable: true` + `unSortIcon: true` — `withExplicitSortIcons` 다음에 부른다)의 값 셀에
+ * `SORT_ICON_OFFSET_CLASS` 를 합친다(그룹 children 재귀). 숫자 열 제목은 아이콘이 글자 뒤라 글자가 값보다 아이콘 폭만큼 왼쪽에서 끝났다 —
+ * 값을 그만큼 안쪽으로 들여 글자 끝과 값 끝을 맞춘다(2026-10-30 홀드아웃 17 세트 2, Gemini "right-aligned numeric values under left-aligned
+ * column headers" 2쌍). 아이콘 위치(글자 뒤, 2026-10-16 4차)는 그대로. 정렬 전엔 아이콘이 없는 열(`defaultColDef` 로만 정렬 가능)·함수형 cellClass 는 그대로
+ */
+declare function withSortIconOffset<T>(defs: T): T;
+/** 열 제목 글자 폭 추정(px) — 헤더 14px/700 기준: 한글·한자·전각 14, 그 외(영문·숫자·기호) 8. "제목이 잘리지 않을 만큼" 이면 되고 정확할 필요는 없다 */
+declare function estimateHeaderTextWidth(label: string): number;
+/** 보이는 flex 열이 모두 `maxWidth` 를 가지면 그 `maxWidth` 를 뗀다(그룹 children 재귀) — 남는 폭을 받을 열이 없으면 행이 표 오른쪽 끝 전에
+ *  끝나 빈 띠가 남는다(2026-10-28 홀드아웃 14: 이름 열 하나만 `flex: 2, maxWidth: 480` 이고 나머지가 고정 폭, "row dividers stop around 1330px",
+ *  Opus·Gemini). 상한 없는 flex 열이 하나라도 있거나 flex 열이 없으면 그대로(같은 배열). 런타임에 열을 숨겨 생기는 경우는 다루지 않는다 */
+declare function withFlexFill<T>(defs: T): T;
+/** 폭을 안 준 number 열의 기본 폭. ag-grid 기본 200 은 숫자 열을 비어 보이게 한다(2026-10-27 홀드아웃 13 layout 지적 "wide empty area") */
+declare const NUMBER_COLUMN_WIDTH = 140;
+/** `type: 'number'` 열에 width·flex·minWidth·maxWidth 가 모두 없으면 `width: 140`(그룹 children 재귀). 폭을 하나라도 줬으면 그대로 */
+declare function withNumberColumnWidth<T>(defs: T): T;
+/** `type` 이 가리키는 columnTypes 의 cellClass/headerClass 를 열이 직접 준 값과 합친다(그룹 children 재귀). ag-grid 는 열의 값이
+ *  타입의 값을 통째로 덮으므로, 열이 `cellClass: 'font-semibold'` 를 더하기만 해도 number 의 `ag-right-aligned-cell` 이 사라진다 — 그걸 막는다 */
+declare function withTypeClasses<T>(defs: T, columnTypes: Record<string, {
+    cellClass?: unknown;
+    headerClass?: unknown;
+}>): T;
+declare function withHeaderMinWidth<T>(defs: T): T;
+interface TwoLineCellRendererParams<TRow = unknown> extends ICellRendererParams<TRow> {
+    /** 보조 줄에 보일 행 필드(점 표기 가능: 'image.tag'). 값이 없거나 빈 문자열이면 한 줄만 그린다 */
+    secondaryField?: string;
+    /** 보조 줄에 덧붙일 클래스 — id·경로·버전처럼 고정폭이 읽기 좋은 값은 'font-mono' */
+    secondaryClassName?: string;
+}
+/**
+ * 두 줄 셀 — 첫 줄은 열의 값(이름), 둘째 줄은 `cellRendererParams.secondaryField` 의 값(id·이미지·경로·설명)을 12px 회색으로.
+ * dl-ui-v3 목록의 이름 열(이름 / 설명, 행 56px)과 같은 모양.
+ *
+ * 언제 쓰나: 주 식별자 열 아래에 보조 정보를 둘 때 — 열을 하나 더 늘리는 대신(열이 많아지면 잘린다. 한 줄 판 12차, 2026-10-18 13차 ⑥). `ListPage secondaryField` 가 이 렌더러를 primary 열에 붙인다.
+ * 쓰는 법: `{ field: 'name', cellRenderer: TwoLineCellRenderer, cellRendererParams: { secondaryField: 'image' } }` + 표에 `rowHeight={56}`(ListPage 는 자동).
+ * 언제 안 쓰나: 보조 값이 정렬·필터 대상이면 제 열로 둔다. 상태는 Badge(아이콘 + 글자) 셀 렌더러.
+ */
+declare function TwoLineCellRenderer<TRow = unknown>(params: TwoLineCellRendererParams<TRow>): react_jsx_runtime.JSX.Element;
+
+export { DrawerDescription as A, type BadgeProps as B, type PageHeaderState as C, Dialog as D, PageHeaderProvider as E, usePageHeader as F, type PageHeaderProps as G, PageHeader as H, AgGridTable as I, HeaderCheckboxRenderer as J, type AgGridTableType as K, withExplicitSortIcons as L, withSortIconOffset as M, estimateHeaderTextWidth as N, withFlexFill as O, type PageHeaderTabItem as P, NUMBER_COLUMN_WIDTH as Q, RowCheckboxRenderer as R, SORT_ICON_OFFSET_CLASS as S, withNumberColumnWidth as T, withTypeClasses as U, withHeaderMinWidth as V, type TwoLineCellRendererParams as W, TwoLineCellRenderer as X, Badge as a, badgeVariants as b, type BadgeTone as c, BADGE_OUTLINE_ACCENT as d, Button as e, buttonVariants as f, type ButtonProps as g, DialogPortal as h, DialogOverlay as i, DialogTrigger as j, DialogClose as k, DialogContent as l, DialogHeader as m, DialogFooter as n, DialogTitle as o, DialogDescription as p, Drawer as q, DrawerPortal as r, DrawerOverlay as s, DrawerTrigger as t, DrawerClose as u, DrawerContent as v, DrawerHeader as w, DrawerBody as x, DrawerFooter as y, DrawerTitle as z };