@t3q-ui/design-system 0.0.0-stage → 1.56.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1977 -0
- package/LICENSE.md +88 -0
- package/README.md +464 -2
- package/cli/doctor.mjs +196 -0
- package/cli/lib.mjs +425 -0
- package/cli/setup.mjs +181 -0
- package/cli/t3q-design.mjs +78 -0
- package/dist/chunk-IPF3K4BS.js +4274 -0
- package/dist/chunk-IPF3K4BS.js.map +1 -0
- package/dist/chunk-MHAO45AL.cjs +4427 -0
- package/dist/chunk-MHAO45AL.cjs.map +1 -0
- package/dist/fonts.css +12 -0
- package/dist/index-Ci1Wh5sA.d.cts +253 -0
- package/dist/index-Ci1Wh5sA.d.ts +253 -0
- package/dist/index.cjs +10998 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.css +332 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.cts +2554 -0
- package/dist/index.d.ts +2554 -0
- package/dist/index.js +10354 -0
- package/dist/index.js.map +1 -0
- package/dist/patterns/index.cjs +885 -0
- package/dist/patterns/index.cjs.map +1 -0
- package/dist/patterns/index.css +265 -0
- package/dist/patterns/index.css.map +1 -0
- package/dist/patterns/index.d.cts +373 -0
- package/dist/patterns/index.d.ts +373 -0
- package/dist/patterns/index.js +873 -0
- package/dist/patterns/index.js.map +1 -0
- package/dist/styles.css +2014 -0
- package/package.json +212 -4
- package/skills/tds/SKILL.md +91 -0
- package/skills/tds/examples/dashboard-page.tsx +344 -0
- package/skills/tds/examples/detail-page.tsx +388 -0
- package/skills/tds/examples/form-page.tsx +460 -0
- package/skills/tds/examples/list-page.tsx +275 -0
- package/skills/tds/reference/components.md +1424 -0
- package/skills/tds/rules.md +28 -0
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,2554 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React$1 from 'react';
|
|
3
|
+
import React__default, { ReactNode, HTMLAttributes, CSSProperties, ForwardedRef } from 'react';
|
|
4
|
+
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
5
|
+
declare namespace class_variance_authority_types {
|
|
6
|
+
type ClassValue = import('clsx').ClassValue;
|
|
7
|
+
type ClassProp = { class: ClassValue; className?: never } | { class?: never; className: ClassValue } | { class?: never; className?: never };
|
|
8
|
+
}
|
|
9
|
+
import { VariantProps } from 'class-variance-authority';
|
|
10
|
+
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
|
11
|
+
import { B as BadgeProps } from './index-Ci1Wh5sA.cjs';
|
|
12
|
+
export { I as AgGridTable, K as AgGridTableType, d as BADGE_OUTLINE_ACCENT, a as Badge, c as BadgeTone, e as Button, g as ButtonProps, D as Dialog, k as DialogClose, l as DialogContent, p as DialogDescription, n as DialogFooter, m as DialogHeader, i as DialogOverlay, h as DialogPortal, o as DialogTitle, j as DialogTrigger, q as Drawer, x as DrawerBody, u as DrawerClose, v as DrawerContent, A as DrawerDescription, y as DrawerFooter, w as DrawerHeader, s as DrawerOverlay, r as DrawerPortal, z as DrawerTitle, t as DrawerTrigger, J as HeaderCheckboxRenderer, Q as NUMBER_COLUMN_WIDTH, H as PageHeader, G as PageHeaderProps, E as PageHeaderProvider, C as PageHeaderState, P as PageHeaderTabItem, R as RowCheckboxRenderer, S as SORT_ICON_OFFSET_CLASS, X as TwoLineCellRenderer, W as TwoLineCellRendererParams, b as badgeVariants, f as buttonVariants, N as estimateHeaderTextWidth, F as usePageHeader, L as withExplicitSortIcons, O as withFlexFill, V as withHeaderMinWidth, T as withNumberColumnWidth, M as withSortIconOffset, U as withTypeClasses } from './index-Ci1Wh5sA.cjs';
|
|
13
|
+
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
|
|
14
|
+
import { DayPicker, SelectSingleEventHandler, DateRange, SelectRangeEventHandler } from 'react-day-picker';
|
|
15
|
+
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
16
|
+
import { DialogProps } from '@radix-ui/react-dialog';
|
|
17
|
+
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
18
|
+
import * as _radix_ui_react_slot from '@radix-ui/react-slot';
|
|
19
|
+
import * as react_hook_form from 'react-hook-form';
|
|
20
|
+
import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
|
|
21
|
+
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
22
|
+
import * as lucide from 'lucide-react';
|
|
23
|
+
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
24
|
+
import * as ProgressPrimitive from '@radix-ui/react-progress';
|
|
25
|
+
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
|
|
26
|
+
import { Command as Command$1 } from 'cmdk';
|
|
27
|
+
import * as SeparatorPrimitive from '@radix-ui/react-separator';
|
|
28
|
+
import * as SliderPrimitive from '@radix-ui/react-slider';
|
|
29
|
+
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
|
30
|
+
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
31
|
+
import { TextareaAutosizeProps } from 'react-textarea-autosize';
|
|
32
|
+
import * as sonner from 'sonner';
|
|
33
|
+
import { ExternalToast } from 'sonner';
|
|
34
|
+
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
35
|
+
import { ClassValue } from 'clsx';
|
|
36
|
+
import { ColDef, SortChangedEvent } from 'ag-grid-community';
|
|
37
|
+
import { AgGridReactProps, AgGridReact } from 'ag-grid-react';
|
|
38
|
+
|
|
39
|
+
type AccordionProps = React$1.ComponentProps<typeof AccordionPrimitive.Root> & {
|
|
40
|
+
sticky?: boolean;
|
|
41
|
+
};
|
|
42
|
+
declare function Accordion({ sticky, className, ...props }: AccordionProps): react_jsx_runtime.JSX.Element;
|
|
43
|
+
declare function AccordionItem({ className, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Item>): react_jsx_runtime.JSX.Element;
|
|
44
|
+
declare function AccordionTrigger({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
|
|
45
|
+
declare function AccordionContent({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Content>): react_jsx_runtime.JSX.Element;
|
|
46
|
+
|
|
47
|
+
declare const alertVariants: (props?: ({
|
|
48
|
+
variant?: "primary" | "info" | "success" | "warning" | "danger" | null | undefined;
|
|
49
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
50
|
+
/**
|
|
51
|
+
* 화면 안에 남아 있는 상태·안내 박스. 섹션 상단의 경고·오류·정보 안내에 쓴다.
|
|
52
|
+
*
|
|
53
|
+
* 언제 쓰나: 폼 전체 오류(서버 거부), 권한·만료 같은 지속 상태, 주의가 필요한 설명, **폼 섹션 안의 부분 실패**(선택지 목록을 못 불러옴 — `variant='danger'` 한 줄 제목 + 설명 + `AlertActions` 의 "다시 시도" 링크, 2026-10-13). `variant` 로 의미를 주고 `AlertTitle`·`AlertDescription` 으로 구성한다.
|
|
54
|
+
* 언제 안 쓰나: 잠깐 보이면 되는 결과(→ Toast), 필드 하나의 오류(→ FormMessage), 상태 한 단어(→ Badge), 화면·패널 본문을 통째로 못 불러온 것(→ ErrorState 상자).
|
|
55
|
+
* 대신/함께: 아이콘을 첫 자식으로 넣으면 자동으로 왼쪽 열에 놓인다. 행동 버튼은 `AlertActions` 에(링크형 `Button variant='secondaryLink'` 기본, 버튼 사이 8px).
|
|
56
|
+
*/
|
|
57
|
+
declare function Alert({ className, variant, ...props }: React$1.ComponentProps<'div'> & VariantProps<typeof alertVariants>): react_jsx_runtime.JSX.Element;
|
|
58
|
+
declare function AlertTitle({ className, children, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
|
|
59
|
+
declare function AlertDescription({ className, children, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
|
|
60
|
+
/** 설명 아래 행동 버튼 줄. 링크형 버튼(`secondaryLink`)이 기본이고 버튼 사이는 8px.
|
|
61
|
+
* 링크 버튼은 Alert 의 글자색을 물려받고(variant 마다 대비가 맞는 색 — 회색 링크는 danger 바탕에서 대비 미달) 밑줄로 눌림을 알린다. 왼쪽 패딩을 없애 설명과 왼쪽 끝을 맞춘다 */
|
|
62
|
+
declare function AlertActions({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
|
|
63
|
+
|
|
64
|
+
declare const AlertDialog: React$1.FC<AlertDialogPrimitive.AlertDialogProps>;
|
|
65
|
+
declare const AlertDialogTrigger: React$1.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
66
|
+
declare const AlertDialogPortal: React$1.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
|
|
67
|
+
declare const AlertDialogOverlay: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
68
|
+
type AlertDialogContextType = {
|
|
69
|
+
variant?: 'success' | 'info' | 'warning' | 'danger';
|
|
70
|
+
};
|
|
71
|
+
/**
|
|
72
|
+
* 확인 대화상자 본체. 되돌릴 수 없는 행동 직전의 최종 확인에만 쓴다.
|
|
73
|
+
*
|
|
74
|
+
* 언제 쓰나: 삭제·중지·초기화처럼 결과가 사라지는 행동. 제목에 대상 이름을 넣고, 확인 버튼은 `danger*` variant 로 행동 이름("삭제")을 쓴다.
|
|
75
|
+
* 언제 안 쓰나: 입력이 필요한 작업(→ Dialog), 단순 정보 안내(→ Alert·Toast), 되돌릴 수 있는 행동(확인 없이 실행 후 Toast).
|
|
76
|
+
* 대신/함께: 실수 방지가 더 필요하면 이름을 입력해야 삭제되는 방식을 소비 앱에서 더한다.
|
|
77
|
+
*/
|
|
78
|
+
declare const AlertDialogContent: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
|
|
79
|
+
width?: "small" | "medium" | "large" | "xlarge" | null | undefined;
|
|
80
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & AlertDialogContextType & React$1.RefAttributes<HTMLDivElement>>;
|
|
81
|
+
declare const AlertDialogHeader: {
|
|
82
|
+
(props: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
83
|
+
displayName: string;
|
|
84
|
+
};
|
|
85
|
+
declare const AlertDialogFooter: {
|
|
86
|
+
(props: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
87
|
+
displayName: string;
|
|
88
|
+
};
|
|
89
|
+
declare const AlertDialogTitle: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
|
|
90
|
+
declare const AlertDialogDescription: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
91
|
+
declare const AlertDialogAction: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & Pick<VariantProps<(props?: ({
|
|
92
|
+
variant?: "primary" | "warning" | "danger" | "primaryBold" | "secondary" | "secondaryBold" | "dangerBold" | "warningBold" | "primaryLink" | "dangerLink" | "secondaryLink" | "warningLink" | "primaryOutline" | "secondaryOutline" | "dangerOutline" | "warningOutline" | null | undefined;
|
|
93
|
+
spacing?: "normal" | "compact" | null | undefined;
|
|
94
|
+
shape?: "rounded" | "normal" | null | undefined;
|
|
95
|
+
weight?: "medium" | "bold" | "regular" | "semibold" | null | undefined;
|
|
96
|
+
loading?: boolean | null | undefined;
|
|
97
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string>, "variant" | "loading"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
98
|
+
declare const AlertDialogCancel: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
99
|
+
|
|
100
|
+
declare const Breadcrumb: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
|
|
101
|
+
/** 하위 `BreadcrumbSeparator` 의 기본 구분자 (children 을 넘기지 않은 Separator 에 적용) */
|
|
102
|
+
separator?: React$1.ReactNode;
|
|
103
|
+
} & React$1.RefAttributes<HTMLElement>>;
|
|
104
|
+
declare const BreadcrumbList: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React$1.RefAttributes<HTMLOListElement>>;
|
|
105
|
+
declare const BreadcrumbItem: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React$1.RefAttributes<HTMLLIElement>>;
|
|
106
|
+
declare const BreadcrumbLink: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
|
|
107
|
+
asChild?: boolean;
|
|
108
|
+
truncate?: boolean;
|
|
109
|
+
maxLength?: number;
|
|
110
|
+
leftIcon?: React$1.ReactNode;
|
|
111
|
+
rightIcon?: React$1.ReactNode;
|
|
112
|
+
} & React$1.RefAttributes<HTMLAnchorElement>>;
|
|
113
|
+
declare const BreadcrumbPage: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
114
|
+
truncate?: boolean;
|
|
115
|
+
maxLength?: number;
|
|
116
|
+
leftIcon?: React$1.ReactNode;
|
|
117
|
+
rightIcon?: React$1.ReactNode;
|
|
118
|
+
} & React$1.RefAttributes<HTMLSpanElement>>;
|
|
119
|
+
declare const BreadcrumbSeparator: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React$1.RefAttributes<HTMLLIElement>>;
|
|
120
|
+
|
|
121
|
+
interface ToggleGroupBaseProps extends Omit<React$1.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>, 'type' | 'value' | 'defaultValue' | 'onValueChange'> {
|
|
122
|
+
/** 아이템 스타일. default: 테두리 없음 / outline: 테두리 있음 */
|
|
123
|
+
variant?: 'default' | 'outline';
|
|
124
|
+
/** true일 때 아이템 간 gap-1 간격 추가 (outline variant와 조합 가능) */
|
|
125
|
+
spacing?: boolean;
|
|
126
|
+
}
|
|
127
|
+
/** 단일 선택 그룹. 한 번에 하나의 아이템만 선택된다 */
|
|
128
|
+
interface ToggleGroupSingleProps extends ToggleGroupBaseProps {
|
|
129
|
+
/** 미지정 시 'single' — 기존 호출부 무수정 호환 (radix와 달리 optional인 이유) */
|
|
130
|
+
type?: 'single';
|
|
131
|
+
value?: string;
|
|
132
|
+
defaultValue?: string;
|
|
133
|
+
/** 선택 해제 시 빈 문자열이 전달된다 */
|
|
134
|
+
onValueChange?: (value: string) => void;
|
|
135
|
+
}
|
|
136
|
+
/** 다중 선택 그룹. 여러 아이템을 동시에 선택할 수 있다 */
|
|
137
|
+
interface ToggleGroupMultipleProps extends ToggleGroupBaseProps {
|
|
138
|
+
type: 'multiple';
|
|
139
|
+
value?: string[];
|
|
140
|
+
defaultValue?: string[];
|
|
141
|
+
/** 전체 해제 시 빈 배열이 전달된다 */
|
|
142
|
+
onValueChange?: (value: string[]) => void;
|
|
143
|
+
}
|
|
144
|
+
type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;
|
|
145
|
+
/**
|
|
146
|
+
* 선택지가 모두 보이는 버튼 묶음(세그먼트). 단일 선택(`type='single'`, 기본) 또는 다중 선택(`type='multiple'`).
|
|
147
|
+
*
|
|
148
|
+
* 언제 쓰나: 선택지가 2~6개이고 항상 보여야 할 때 — 상태·심각도 같은 빠른 필터, 보기 전환(목록/카드), 기간(일/주/월). `count` 로 항목별 건수를 보일 수 있다.
|
|
149
|
+
* 언제 안 쓰나: 선택지가 많거나(7개 이상) 검색이 필요할 때 → `TableFilterSingleSelect`/`TableFilterMultiSelect`·`Select`. 화면(내용 영역)을 전환할 때 → `Tabs`. 폼의 단일 선택 입력 → `RadioGroup`.
|
|
150
|
+
* 대신/함께: 목록 화면의 상태 필터는 `ListPage quickFilter` 가 이 컴포넌트로 표 왼쪽 위에 그린다. 그룹 이름은 `aria-label` 로 준다(기본 이름 없음). 붙어있는 모양은 `variant='outline' spacing={false}`.
|
|
151
|
+
*/
|
|
152
|
+
declare function ToggleGroup({ type, variant, spacing, className, ...props }: ToggleGroupProps): react_jsx_runtime.JSX.Element;
|
|
153
|
+
interface ToggleGroupItemProps extends React$1.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> {
|
|
154
|
+
/** 항목 오른쪽의 건수 — 작은 pill 뱃지(`Badge size='small' rounded='full'`, 20px). 색은 `countVariant`. 4차(2026-10-17)에 "colored count pills look loud" 로 흐린 숫자로 바꿨던 것을 2026-10-18 13차에 사용자 결정(D)으로 되돌림 — 표의 상태 뱃지와 같은 색이면 칩과 표가 한 언어가 된다 */
|
|
155
|
+
count?: number;
|
|
156
|
+
/** 건수 뱃지의 색. 기본 `secondary`. 상태 필터면 그 상태의 tone(`success`·`danger`·`warning`·`info`·`secondary`), "전체" 는 `primary`(ListPage quickFilter 가 그렇게 준다) */
|
|
157
|
+
countVariant?: NonNullable<BadgeProps['variant']>;
|
|
158
|
+
}
|
|
159
|
+
declare function ToggleGroupItem({ value, count, countVariant, children, className, ...props }: ToggleGroupItemProps): react_jsx_runtime.JSX.Element;
|
|
160
|
+
|
|
161
|
+
type CalendarProps = React$1.ComponentProps<typeof DayPicker> & {
|
|
162
|
+
className?: string;
|
|
163
|
+
classNames?: React$1.ComponentProps<typeof DayPicker>['classNames'];
|
|
164
|
+
showOutsideDays?: boolean;
|
|
165
|
+
/** 뷰 전환 비활성화 (항상 days view만 표시) */
|
|
166
|
+
disableViewSwitching?: boolean;
|
|
167
|
+
};
|
|
168
|
+
declare function Calendar({ classNames: classNamesProp, className, showOutsideDays, disableViewSwitching, ...dayPickerProps }: CalendarProps): react_jsx_runtime.JSX.Element;
|
|
169
|
+
|
|
170
|
+
declare function Card({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
|
|
171
|
+
declare function CardHeader({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
|
|
172
|
+
declare function CardTitle({ className, children, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
|
|
173
|
+
declare function CardDescription({ className, children, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
|
|
174
|
+
declare function CardContent({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
|
|
175
|
+
declare function CardFooter({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
|
|
176
|
+
declare function CardThumbnail({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
|
|
177
|
+
|
|
178
|
+
declare const checkboxVariants: (props?: ({
|
|
179
|
+
size?: "small" | "medium" | "large" | null | undefined;
|
|
180
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
181
|
+
interface CheckboxProps extends React$1.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, VariantProps<typeof checkboxVariants> {
|
|
182
|
+
indeterminate?: boolean;
|
|
183
|
+
}
|
|
184
|
+
/**
|
|
185
|
+
* 켜기/끄기 또는 여러 항목 중 복수 선택. 폼의 동의·옵션 플래그와 표의 행 선택에 쓴다.
|
|
186
|
+
*
|
|
187
|
+
* 언제 쓰나: 서로 독립인 옵션을 여러 개 고를 때. 표의 행 선택은 AgGridTable 이 rowSelection 을 켜면 이 Checkbox 를 쓴 HeaderCheckboxRenderer·RowCheckboxRenderer 를 자동으로 넣으므로 셀에 직접 넣지 않는다(바꾸려면 그 렌더러를 감싼다).
|
|
188
|
+
* 언제 안 쓰나: 하나만 골라야 할 때(→ Radio·RadioGroup), 켜기/끄기 하나의 설정(→ SwitchSection·Switch — 폼 제출값이어도), 선택지마다 제목·설명이 붙는 복수 선택(→ CheckboxSectionGroup), 선택지가 많을 때(→ MultiSelect).
|
|
189
|
+
* 대신/함께: 라벨은 `Label` 또는 `FormLabel` 로 연결해 클릭 영역을 넓힌다.
|
|
190
|
+
*/
|
|
191
|
+
declare const Checkbox: React$1.ForwardRefExoticComponent<CheckboxProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
192
|
+
|
|
193
|
+
interface CheckboxSectionGroupProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
|
|
194
|
+
/** 선택된 값들. controlled 전제 */
|
|
195
|
+
value: string[];
|
|
196
|
+
/** 카드를 누를 때 바뀐 값 목록 */
|
|
197
|
+
onValueChange?: (value: string[]) => void;
|
|
198
|
+
/** 가로(기본)·세로 배치 */
|
|
199
|
+
orientation?: 'horizontal' | 'vertical';
|
|
200
|
+
/** 그룹 전체 비활성 */
|
|
201
|
+
disabled?: boolean;
|
|
202
|
+
}
|
|
203
|
+
/**
|
|
204
|
+
* 카드형 체크박스(CheckboxSection)들을 묶는 그룹 — 제목·설명이 붙는 복수 선택(알림 채널, 포함할 산출물 종류).
|
|
205
|
+
*
|
|
206
|
+
* 언제 쓰나: 선택지 2~4개에 각각 제목과 한 줄 설명이 붙고 여러 개를 고를 수 있을 때(dl-ui-v3 의 카드형 선택 관례를 복수 선택으로).
|
|
207
|
+
* 가로 배치는 개수로 정한다 — 2~3개 한 줄(n 등분), 4개 2×2, 5개 이상 세로 쌓기(카드 안은 제목 · 설명 가로), 카드 사이 8px — RadioSectionGroup 과 같은 규칙(2026-10-21 19차: 한 줄 4px 로 몰려 "cards sit too close together"·"uneven internal heights").
|
|
208
|
+
* 언제 안 쓰나: 하나만 고르면 RadioSectionGroup, 설명 없는 짧은 옵션은 Checkbox, 선택지가 많으면 MultiSelect, 켜기/끄기 하나는 SwitchSection.
|
|
209
|
+
* 대신/함께: `role='group'` 이므로 이름은 `aria-labelledby`(FormLabel 의 id) 또는 `aria-label` 로 준다. 카드마다 Tab 으로 가고 Space 로 켜고 끈다. 폼에서는 `FormField` 의 `field.value`(string[])·`field.onChange` 를 `value`·`onValueChange` 에 연결한다.
|
|
210
|
+
*/
|
|
211
|
+
declare function CheckboxSectionGroup({ className, value, onValueChange, orientation, disabled, children, ...props }: CheckboxSectionGroupProps): react_jsx_runtime.JSX.Element;
|
|
212
|
+
interface CheckboxSectionProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'title' | 'type'> {
|
|
213
|
+
/** 그룹의 value 배열과 맞출 값 */
|
|
214
|
+
value: string;
|
|
215
|
+
/** 카드 제목 */
|
|
216
|
+
title: React$1.ReactNode;
|
|
217
|
+
/** 한 줄 설명 */
|
|
218
|
+
description?: React$1.ReactNode;
|
|
219
|
+
disabled?: boolean;
|
|
220
|
+
}
|
|
221
|
+
/**
|
|
222
|
+
* 카드형 체크박스 — 제목 + 설명이 있는 카드 안에 체크 표시. `CheckboxSectionGroup` 안에서 `value` 로 쓴다.
|
|
223
|
+
*
|
|
224
|
+
* 언제 쓰나: 설명이 붙는 복수 선택의 한 항목(RadioSection 의 복수 선택판). 카드 전체가 눌리고, 선택되면 2px 주조색 테두리(padding 으로 보정해 layout shift 없음).
|
|
225
|
+
* 언제 안 쓰나: 그룹 밖 단독(→ Checkbox + Label), 하나만 고를 때(→ RadioSection).
|
|
226
|
+
* 대신/함께: 네이티브 `<button role='checkbox'>` 라 Tab 으로 이동, Space·Enter 로 켜고 끈다. 안의 체크 표시는 표시 전용이다.
|
|
227
|
+
*/
|
|
228
|
+
declare function CheckboxSection({ value, title, description, disabled: disabledProp, className, onClick, ...props }: CheckboxSectionProps): react_jsx_runtime.JSX.Element;
|
|
229
|
+
|
|
230
|
+
/**
|
|
231
|
+
* ColumnFilter 컴포넌트 타입 정의
|
|
232
|
+
* 테이블/카드 목록 상단의 복합 검색 컴포넌트
|
|
233
|
+
*/
|
|
234
|
+
type ColumnType = 'string' | 'number' | 'date' | 'select';
|
|
235
|
+
type StringOperator = '=' | '!=' | 'contains' | 'not_contains';
|
|
236
|
+
type NumberOperator = '=' | '!=' | '>' | '<' | '>=' | '<=';
|
|
237
|
+
type Operator = StringOperator | NumberOperator;
|
|
238
|
+
type OperatorOverridesByType = Partial<Record<ColumnType, Operator[]>>;
|
|
239
|
+
type OperatorOverridesByColumn = Partial<Record<string, Operator[]>>;
|
|
240
|
+
interface ColumnDefinition {
|
|
241
|
+
/** 컬럼 고유 키 */
|
|
242
|
+
key: string;
|
|
243
|
+
/** 표시될 컬럼명 */
|
|
244
|
+
label: string;
|
|
245
|
+
/** 컬럼 데이터 타입 */
|
|
246
|
+
type: ColumnType;
|
|
247
|
+
/** select 타입일 경우 선택 옵션 */
|
|
248
|
+
options?: {
|
|
249
|
+
value: string;
|
|
250
|
+
label: string;
|
|
251
|
+
}[];
|
|
252
|
+
/** 컬럼 설명 (툴팁 등에 사용) */
|
|
253
|
+
description?: string;
|
|
254
|
+
}
|
|
255
|
+
interface FilterCondition {
|
|
256
|
+
/** 고유 ID */
|
|
257
|
+
id: string;
|
|
258
|
+
/** 컬럼 키 */
|
|
259
|
+
column: string;
|
|
260
|
+
/** 연산자 */
|
|
261
|
+
operator: Operator;
|
|
262
|
+
/** 필터 값 */
|
|
263
|
+
value: string | number;
|
|
264
|
+
}
|
|
265
|
+
interface EditingFilter {
|
|
266
|
+
/** 기존 필터 편집 시 원본 ID (신규면 undefined) */
|
|
267
|
+
id?: string;
|
|
268
|
+
/** 선택된 컬럼 키 */
|
|
269
|
+
column?: string;
|
|
270
|
+
/** 선택된 연산자 */
|
|
271
|
+
operator?: Operator;
|
|
272
|
+
/** 입력 중인 값 */
|
|
273
|
+
value?: string;
|
|
274
|
+
}
|
|
275
|
+
type PopoverType = 'column' | 'operator' | 'search' | 'value' | null;
|
|
276
|
+
type PopoverTrigger$1 = 'input' | 'button' | null;
|
|
277
|
+
type AutocompleteFocusMode = 'input' | 'option';
|
|
278
|
+
interface ValueSuggestion {
|
|
279
|
+
/** 커밋되는 실제 값 */
|
|
280
|
+
value: string;
|
|
281
|
+
/** 팝오버에 표시되는 텍스트 */
|
|
282
|
+
label: string;
|
|
283
|
+
}
|
|
284
|
+
interface PopoverPosition {
|
|
285
|
+
x: number;
|
|
286
|
+
y: number;
|
|
287
|
+
}
|
|
288
|
+
interface ColumnFilterContextType {
|
|
289
|
+
disabled?: boolean;
|
|
290
|
+
columns: ColumnDefinition[];
|
|
291
|
+
filters: FilterCondition[];
|
|
292
|
+
searchQuery: string;
|
|
293
|
+
editingFilter: EditingFilter | null;
|
|
294
|
+
activePopover: PopoverType;
|
|
295
|
+
popoverTrigger: PopoverTrigger$1;
|
|
296
|
+
popoverPosition: PopoverPosition | null;
|
|
297
|
+
addFilter: (filter: Omit<FilterCondition, 'id'>) => void;
|
|
298
|
+
removeFilter: (id: string) => void;
|
|
299
|
+
updateFilter: (id: string, updates: Partial<FilterCondition>) => void;
|
|
300
|
+
resetFilters: () => void;
|
|
301
|
+
setSearchQuery: (query: string) => void;
|
|
302
|
+
selectColumn: (columnKey: string) => void;
|
|
303
|
+
selectOperator: (operator: Operator) => void;
|
|
304
|
+
setEditingValue: (value: string) => void;
|
|
305
|
+
commitFilter: () => void;
|
|
306
|
+
cancelEditing: () => void;
|
|
307
|
+
editExistingFilter: (id: string) => void;
|
|
308
|
+
editingFilterId: string | null;
|
|
309
|
+
openPopover: (type: PopoverType, position?: PopoverPosition, trigger?: PopoverTrigger$1) => void;
|
|
310
|
+
closePopover: () => void;
|
|
311
|
+
columnSuggestionIndex: number;
|
|
312
|
+
setColumnSuggestionIndex: (index: number) => void;
|
|
313
|
+
autocompleteFocusMode: AutocompleteFocusMode;
|
|
314
|
+
setAutocompleteFocusMode: (mode: AutocompleteFocusMode) => void;
|
|
315
|
+
valueSuggestions: ValueSuggestion[];
|
|
316
|
+
valueSuggestionsLoading: boolean;
|
|
317
|
+
valueSuggestionIndex: number;
|
|
318
|
+
setValueSuggestionIndex: (index: number) => void;
|
|
319
|
+
selectValueSuggestion: (value: string) => void;
|
|
320
|
+
searchSuggestions: ColumnDefinition[];
|
|
321
|
+
searchSuggestionIndex: number;
|
|
322
|
+
setSearchSuggestionIndex: (index: number) => void;
|
|
323
|
+
selectSearchSuggestion: (columnKey: string) => void;
|
|
324
|
+
getColumnByKey: (key: string) => ColumnDefinition | undefined;
|
|
325
|
+
getOperatorsForColumn: (columnKey: string) => Operator[];
|
|
326
|
+
ids: {
|
|
327
|
+
inputId: string;
|
|
328
|
+
columnListId: string;
|
|
329
|
+
operatorListId: string;
|
|
330
|
+
searchListId: string;
|
|
331
|
+
valueListId: string;
|
|
332
|
+
getColumnOptionId: (index: number) => string;
|
|
333
|
+
getOperatorOptionId: (index: number) => string;
|
|
334
|
+
getSearchOptionId: (index: number) => string;
|
|
335
|
+
getValueOptionId: (index: number) => string;
|
|
336
|
+
};
|
|
337
|
+
}
|
|
338
|
+
interface ColumnFilterProps {
|
|
339
|
+
/** 필터링할 컬럼 정의 */
|
|
340
|
+
columns: ColumnDefinition[];
|
|
341
|
+
/** 현재 필터 조건 (controlled) */
|
|
342
|
+
value?: FilterCondition[];
|
|
343
|
+
/** 필터 변경 콜백 */
|
|
344
|
+
onChange?: (filters: FilterCondition[]) => void;
|
|
345
|
+
/**
|
|
346
|
+
* 통합 검색 쿼리 변경 콜백.
|
|
347
|
+
*
|
|
348
|
+
* 제공 여부가 검색 팝오버의 Enter 동작을 가른다.
|
|
349
|
+
* - 제공: 첫 제안을 선점하지 않는다. 선택 없는 Enter는 입력 텍스트로 통합 검색을 확정한다.
|
|
350
|
+
* - 미제공: 팝오버가 열리면 첫 제안이 하이라이트(`aria-activedescendant`)되어
|
|
351
|
+
* ArrowDown 없는 Enter가 그 컬럼의 편집으로 진입한다. 자유 텍스트를 받을 곳이 없기 때문이다.
|
|
352
|
+
*/
|
|
353
|
+
onSearch?: (query: string) => void;
|
|
354
|
+
/** 플레이스홀더 텍스트 */
|
|
355
|
+
placeholder?: string;
|
|
356
|
+
/** 추가 CSS 클래스 */
|
|
357
|
+
className?: string;
|
|
358
|
+
/** 비활성화 여부 */
|
|
359
|
+
disabled?: boolean;
|
|
360
|
+
/** 값 자동완성 콜백. select 타입에 options가 있으면 무시됨 */
|
|
361
|
+
getValueSuggestions?: (columnKey: string, query: string) => Promise<string[]> | string[];
|
|
362
|
+
/** 컬럼 타입별 사용 가능 연산자 override. 지정하지 않으면 기본 연산자 목록을 사용한다. */
|
|
363
|
+
operatorsByType?: OperatorOverridesByType;
|
|
364
|
+
/** 컬럼 key별 사용 가능 연산자 override. operatorsByType보다 우선한다. */
|
|
365
|
+
operatorsByColumn?: OperatorOverridesByColumn;
|
|
366
|
+
}
|
|
367
|
+
declare const OPERATOR_LABELS: Record<Operator, string>;
|
|
368
|
+
declare const OPERATORS_BY_TYPE: Record<ColumnType, Operator[]>;
|
|
369
|
+
|
|
370
|
+
declare function useColumnFilter(): ColumnFilterContextType;
|
|
371
|
+
declare function ColumnFilter({ columns, value, onChange, onSearch, className, disabled, getValueSuggestions, operatorsByType, operatorsByColumn, children, }: ColumnFilterProps & {
|
|
372
|
+
children: React$1.ReactNode;
|
|
373
|
+
}): react_jsx_runtime.JSX.Element;
|
|
374
|
+
declare namespace ColumnFilter {
|
|
375
|
+
var displayName: string;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
interface ColumnFilterInputProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
379
|
+
/** 플레이스홀더 텍스트 */
|
|
380
|
+
placeholder?: string;
|
|
381
|
+
}
|
|
382
|
+
declare function ColumnFilterInput({ placeholder, className, style, ...props }: ColumnFilterInputProps): react_jsx_runtime.JSX.Element;
|
|
383
|
+
declare namespace ColumnFilterInput {
|
|
384
|
+
var displayName: string;
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
interface ColumnFilterTagProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
388
|
+
/** 필터 조건 */
|
|
389
|
+
filter: FilterCondition;
|
|
390
|
+
/** Invalid 상태 (빨간색 테마) */
|
|
391
|
+
isInvalid?: boolean;
|
|
392
|
+
/** 삭제(x) 버튼 처리 직후 호출 — ColumnFilterInput이 팝오버 재오픈에 사용 (#1042) */
|
|
393
|
+
onRemoved?: () => void;
|
|
394
|
+
}
|
|
395
|
+
/**
|
|
396
|
+
* 적용된 필터 1건을 보여주는 태그. 구조는 `div > [편집 button][삭제 button]` —
|
|
397
|
+
* 루트를 role=button 으로 두고 그 안에 삭제 button 을 넣으면 위젯 중첩(axe nested-interactive)이라
|
|
398
|
+
* 편집 영역과 삭제 영역을 형제 버튼으로 분리한다. 루트 div 는 모양(배경·라운드)만 담당한다.
|
|
399
|
+
*/
|
|
400
|
+
declare function ColumnFilterTag({ filter, isInvalid, onRemoved, // 구조분해로 걸러낸다 — 루트 div의 {...props}로 새면 DOM unknown prop 경고
|
|
401
|
+
className, style, ...props }: ColumnFilterTagProps): react_jsx_runtime.JSX.Element;
|
|
402
|
+
declare namespace ColumnFilterTag {
|
|
403
|
+
var displayName: string;
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
/** 통합 팝오버 래퍼 - Input과 함께 사용 */
|
|
407
|
+
interface ColumnFilterPopoverProps {
|
|
408
|
+
/** 팝오버 트리거 영역 */
|
|
409
|
+
children: React$1.ReactNode;
|
|
410
|
+
/** 추가 CSS 클래스 */
|
|
411
|
+
className?: string;
|
|
412
|
+
}
|
|
413
|
+
declare function ColumnFilterPopover({ children, className }: ColumnFilterPopoverProps): react_jsx_runtime.JSX.Element;
|
|
414
|
+
declare namespace ColumnFilterPopover {
|
|
415
|
+
var displayName: string;
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
type ColumnVisibilityOption = {
|
|
419
|
+
value: string;
|
|
420
|
+
label: string;
|
|
421
|
+
};
|
|
422
|
+
interface ColumnVisibilityFilterProps {
|
|
423
|
+
title?: string;
|
|
424
|
+
options: ColumnVisibilityOption[];
|
|
425
|
+
value: string[];
|
|
426
|
+
onChange: (selected: string[]) => void;
|
|
427
|
+
placeholder?: string;
|
|
428
|
+
emptyText?: string;
|
|
429
|
+
allText?: string;
|
|
430
|
+
className?: {
|
|
431
|
+
button?: string;
|
|
432
|
+
PopoverContent?: string;
|
|
433
|
+
Command?: string;
|
|
434
|
+
CommandInput?: string;
|
|
435
|
+
CommandList?: string;
|
|
436
|
+
CommandGroup?: string;
|
|
437
|
+
CommandItem?: string;
|
|
438
|
+
};
|
|
439
|
+
searchPlaceholder?: string;
|
|
440
|
+
searchable?: boolean;
|
|
441
|
+
align?: 'start' | 'center' | 'end';
|
|
442
|
+
}
|
|
443
|
+
declare function ColumnVisibilityFilter({ title, options, value, onChange, searchPlaceholder, emptyText, allText, searchable, className, align, }: ColumnVisibilityFilterProps): react_jsx_runtime.JSX.Element;
|
|
444
|
+
|
|
445
|
+
declare const Command: React$1.ForwardRefExoticComponent<Omit<{
|
|
446
|
+
children?: React$1.ReactNode;
|
|
447
|
+
} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
|
|
448
|
+
ref?: React$1.Ref<HTMLDivElement>;
|
|
449
|
+
} & {
|
|
450
|
+
asChild?: boolean;
|
|
451
|
+
}, "key" | keyof React$1.HTMLAttributes<HTMLDivElement> | "asChild"> & {
|
|
452
|
+
label?: string;
|
|
453
|
+
shouldFilter?: boolean;
|
|
454
|
+
filter?: (value: string, search: string, keywords?: string[]) => number;
|
|
455
|
+
defaultValue?: string;
|
|
456
|
+
value?: string;
|
|
457
|
+
onValueChange?: (value: string) => void;
|
|
458
|
+
loop?: boolean;
|
|
459
|
+
disablePointerSelection?: boolean;
|
|
460
|
+
vimBindings?: boolean;
|
|
461
|
+
} & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
462
|
+
type CommandDialogProps = DialogProps & {
|
|
463
|
+
/** 화면에는 보이지 않고 보조기술에만 읽히는 다이얼로그 제목 */
|
|
464
|
+
title?: string;
|
|
465
|
+
};
|
|
466
|
+
declare const CommandDialog: ({ children, title, ...props }: CommandDialogProps) => react_jsx_runtime.JSX.Element;
|
|
467
|
+
declare const CommandInput: React$1.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React$1.InputHTMLAttributes<HTMLInputElement>> & {
|
|
468
|
+
ref?: React$1.Ref<HTMLInputElement>;
|
|
469
|
+
} & {
|
|
470
|
+
asChild?: boolean;
|
|
471
|
+
}, "key" | "asChild" | keyof React$1.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
|
|
472
|
+
value?: string;
|
|
473
|
+
onValueChange?: (search: string) => void;
|
|
474
|
+
} & React$1.RefAttributes<HTMLInputElement>, "ref"> & {
|
|
475
|
+
wrapperClassName?: string;
|
|
476
|
+
iconClassName?: string;
|
|
477
|
+
} & React$1.RefAttributes<HTMLInputElement>>;
|
|
478
|
+
declare const CommandList: React$1.ForwardRefExoticComponent<Omit<{
|
|
479
|
+
children?: React$1.ReactNode;
|
|
480
|
+
} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
|
|
481
|
+
ref?: React$1.Ref<HTMLDivElement>;
|
|
482
|
+
} & {
|
|
483
|
+
asChild?: boolean;
|
|
484
|
+
}, "key" | keyof React$1.HTMLAttributes<HTMLDivElement> | "asChild"> & {
|
|
485
|
+
label?: string;
|
|
486
|
+
} & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
487
|
+
declare const CommandEmpty: React$1.ForwardRefExoticComponent<Omit<{
|
|
488
|
+
children?: React$1.ReactNode;
|
|
489
|
+
} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
|
|
490
|
+
ref?: React$1.Ref<HTMLDivElement>;
|
|
491
|
+
} & {
|
|
492
|
+
asChild?: boolean;
|
|
493
|
+
}, "key" | keyof React$1.HTMLAttributes<HTMLDivElement> | "asChild"> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
494
|
+
declare const CommandGroup: React$1.ForwardRefExoticComponent<Omit<{
|
|
495
|
+
children?: React$1.ReactNode;
|
|
496
|
+
} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
|
|
497
|
+
ref?: React$1.Ref<HTMLDivElement>;
|
|
498
|
+
} & {
|
|
499
|
+
asChild?: boolean;
|
|
500
|
+
}, "key" | keyof React$1.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
|
|
501
|
+
heading?: React$1.ReactNode;
|
|
502
|
+
value?: string;
|
|
503
|
+
forceMount?: boolean;
|
|
504
|
+
} & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
505
|
+
declare const CommandSeparator: React$1.ForwardRefExoticComponent<Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
|
|
506
|
+
ref?: React$1.Ref<HTMLDivElement>;
|
|
507
|
+
} & {
|
|
508
|
+
asChild?: boolean;
|
|
509
|
+
}, "key" | keyof React$1.HTMLAttributes<HTMLDivElement> | "asChild"> & {
|
|
510
|
+
alwaysRender?: boolean;
|
|
511
|
+
} & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
512
|
+
declare const CommandItem: React$1.ForwardRefExoticComponent<Omit<{
|
|
513
|
+
children?: React$1.ReactNode;
|
|
514
|
+
} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
|
|
515
|
+
ref?: React$1.Ref<HTMLDivElement>;
|
|
516
|
+
} & {
|
|
517
|
+
asChild?: boolean;
|
|
518
|
+
}, "key" | keyof React$1.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "value" | "disabled"> & {
|
|
519
|
+
disabled?: boolean;
|
|
520
|
+
onSelect?: (value: string) => void;
|
|
521
|
+
value?: string;
|
|
522
|
+
keywords?: string[];
|
|
523
|
+
forceMount?: boolean;
|
|
524
|
+
} & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
525
|
+
declare const CommandShortcut: {
|
|
526
|
+
({ className, ...props }: React$1.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
|
|
527
|
+
displayName: string;
|
|
528
|
+
};
|
|
529
|
+
|
|
530
|
+
type DateRangePresetsProps = {
|
|
531
|
+
/** 컴포넌트의 각 부분에 대한 className 오버라이드 */
|
|
532
|
+
className?: {
|
|
533
|
+
Command?: string;
|
|
534
|
+
CommandInput?: string;
|
|
535
|
+
CommandList?: string;
|
|
536
|
+
CommandGroup?: string;
|
|
537
|
+
CommandItem?: string;
|
|
538
|
+
};
|
|
539
|
+
options?: {
|
|
540
|
+
value: string;
|
|
541
|
+
label: string;
|
|
542
|
+
}[];
|
|
543
|
+
defaultValue?: string;
|
|
544
|
+
allText?: string;
|
|
545
|
+
calendarButtonLabel?: string;
|
|
546
|
+
date?: DateRange;
|
|
547
|
+
setDate?: SelectRangeEventHandler;
|
|
548
|
+
calendarProps?: CalendarProps;
|
|
549
|
+
todayPosition?: 'to' | 'from';
|
|
550
|
+
withPresets?: boolean;
|
|
551
|
+
/** '선택 안함' 옵션 표시 여부 (default: true) */
|
|
552
|
+
showAllOption?: boolean;
|
|
553
|
+
/** '직접 선택' 버튼 표시 여부 (default: true) */
|
|
554
|
+
showCalendarButton?: boolean;
|
|
555
|
+
};
|
|
556
|
+
declare function DateRangePresets({ options, className, defaultValue, date, setDate, allText, calendarButtonLabel, calendarProps, todayPosition, withPresets, showAllOption, showCalendarButton, }: DateRangePresetsProps): react_jsx_runtime.JSX.Element;
|
|
557
|
+
type DatePresetsProps = {
|
|
558
|
+
/** 컴포넌트의 각 부분에 대한 className 오버라이드 */
|
|
559
|
+
className?: {
|
|
560
|
+
Command?: string;
|
|
561
|
+
CommandInput?: string;
|
|
562
|
+
CommandList?: string;
|
|
563
|
+
CommandGroup?: string;
|
|
564
|
+
CommandItem?: string;
|
|
565
|
+
};
|
|
566
|
+
options?: {
|
|
567
|
+
value: Date;
|
|
568
|
+
label: string;
|
|
569
|
+
}[];
|
|
570
|
+
defaultValue?: Date;
|
|
571
|
+
allText?: string;
|
|
572
|
+
calendarButtonLabel?: string;
|
|
573
|
+
date?: Date;
|
|
574
|
+
setDate?: SelectSingleEventHandler;
|
|
575
|
+
calendarProps?: CalendarProps;
|
|
576
|
+
withPresets?: boolean;
|
|
577
|
+
};
|
|
578
|
+
declare function DatePresets({ options: optionsProp, className, defaultValue, date, setDate, allText, calendarButtonLabel, calendarProps, withPresets, }: DatePresetsProps): react_jsx_runtime.JSX.Element;
|
|
579
|
+
|
|
580
|
+
type DatePickerProps = {
|
|
581
|
+
date?: Date;
|
|
582
|
+
setDate?: SelectSingleEventHandler;
|
|
583
|
+
/** 클래스 오버라이드. `button` = 트리거 틀(기본 폭 250px — 폼 칸을 채우려면 `'w-full'`), `PopoverContent` = 달력 팝오버 */
|
|
584
|
+
classNames?: {
|
|
585
|
+
button?: string;
|
|
586
|
+
PopoverContent?: string;
|
|
587
|
+
};
|
|
588
|
+
disabled?: boolean;
|
|
589
|
+
placeholder?: string;
|
|
590
|
+
withPresets?: boolean;
|
|
591
|
+
datePresetsProps?: Omit<DatePresetsProps, 'date' | 'setDate'>;
|
|
592
|
+
calendarProps?: CalendarProps;
|
|
593
|
+
isInvalid?: boolean;
|
|
594
|
+
/** Floating label 텍스트 */
|
|
595
|
+
label?: string;
|
|
596
|
+
/** @default 'standard' */
|
|
597
|
+
appearance?: 'standard' | 'none';
|
|
598
|
+
/** 라벨 필수 표시 (*) */
|
|
599
|
+
required?: boolean;
|
|
600
|
+
};
|
|
601
|
+
/**
|
|
602
|
+
* 날짜 하나를 고르는 입력. 트리거를 누르면 달력 팝오버가 열린다.
|
|
603
|
+
*
|
|
604
|
+
* 언제 쓰나: 폼의 날짜 필드(시작일·만료일·예약일). `FormField` 안에서 `FormControl` 로 감싸 오류 상태(`isInvalid`)를 받는다. 시각까지 필요하면 옆에 `TimePicker` 를 둔다.
|
|
605
|
+
* 언제 안 쓰나: 기간(→ DatePickerRange), 시각만(→ TimePicker).
|
|
606
|
+
* 대신/함께: 기본 폭은 250px 이다. 폼 칸을 채우려면 `classNames={{ button: 'w-full' }}`(TimePicker 는 `classNames={{ trigger: 'w-full' }}`) — 좁은 고정 폭이 두 칸 줄의 절반을 비워 감점됐다(2026-10-28 홀드아웃 14).
|
|
607
|
+
*/
|
|
608
|
+
declare function DatePicker({ date, setDate, classNames, disabled, placeholder, withPresets, datePresetsProps, calendarProps, isInvalid, label, appearance, required, }: DatePickerProps): react_jsx_runtime.JSX.Element;
|
|
609
|
+
type DatePickerRangeProps = {
|
|
610
|
+
date: DateRange;
|
|
611
|
+
setDate?: SelectRangeEventHandler;
|
|
612
|
+
placeholder?: string;
|
|
613
|
+
withPresets?: boolean;
|
|
614
|
+
classNames?: {
|
|
615
|
+
button?: string;
|
|
616
|
+
};
|
|
617
|
+
disabled?: boolean;
|
|
618
|
+
isInvalid?: boolean;
|
|
619
|
+
/** Floating label 텍스트 */
|
|
620
|
+
label?: string;
|
|
621
|
+
/** @default 'standard' */
|
|
622
|
+
appearance?: 'standard' | 'none';
|
|
623
|
+
/** 라벨 필수 표시 (*) */
|
|
624
|
+
required?: boolean;
|
|
625
|
+
/**
|
|
626
|
+
* Calendar 에 전달할 추가 props (예: `defaultMonth`, `disabled` 날짜).
|
|
627
|
+
* `mode`·`selected`·`onSelect`·`numberOfMonths` 는 DatePickerRange 가 관리한다.
|
|
628
|
+
* `defaultMonth` 는 선택된 시작일(`date.from`)이 없을 때만 적용된다.
|
|
629
|
+
*/
|
|
630
|
+
calendarProps?: Omit<CalendarProps, 'mode' | 'selected' | 'onSelect' | 'numberOfMonths'>;
|
|
631
|
+
};
|
|
632
|
+
declare function DatePickerRange({ date, setDate, withPresets, placeholder, classNames, disabled, isInvalid, label, appearance, required, calendarProps, }: DatePickerRangeProps): react_jsx_runtime.JSX.Element;
|
|
633
|
+
|
|
634
|
+
declare function DropdownMenu({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Root>): react_jsx_runtime.JSX.Element;
|
|
635
|
+
declare function DropdownMenuPortal({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Portal>): react_jsx_runtime.JSX.Element;
|
|
636
|
+
declare function DropdownMenuTrigger({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
|
|
637
|
+
declare function DropdownMenuContent({ className, sideOffset, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Content>): react_jsx_runtime.JSX.Element;
|
|
638
|
+
declare function DropdownMenuGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Group>): react_jsx_runtime.JSX.Element;
|
|
639
|
+
declare function DropdownMenuItem({ className, variant, keepOpen, onSelect, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
|
|
640
|
+
variant?: 'default' | 'danger';
|
|
641
|
+
/**
|
|
642
|
+
* true 이면 항목 선택 시 메뉴를 닫지 않고 열린 상태로 유지합니다.
|
|
643
|
+
* 토글성 액션(체크/언체크, 다중 선택 등)에 유용합니다.
|
|
644
|
+
* @default false
|
|
645
|
+
*/
|
|
646
|
+
keepOpen?: boolean;
|
|
647
|
+
}): react_jsx_runtime.JSX.Element;
|
|
648
|
+
declare function DropdownMenuSeparator({ className, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Separator>): react_jsx_runtime.JSX.Element;
|
|
649
|
+
declare function DropdownMenuSub({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Sub>): react_jsx_runtime.JSX.Element;
|
|
650
|
+
declare function DropdownMenuSubTrigger({ className, children, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger>): react_jsx_runtime.JSX.Element;
|
|
651
|
+
declare function DropdownMenuSubContent({ className, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): react_jsx_runtime.JSX.Element;
|
|
652
|
+
|
|
653
|
+
declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React$1.JSX.Element;
|
|
654
|
+
declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
|
|
655
|
+
declare const useFormField: () => {
|
|
656
|
+
invalid: boolean;
|
|
657
|
+
isDirty: boolean;
|
|
658
|
+
isTouched: boolean;
|
|
659
|
+
isValidating: boolean;
|
|
660
|
+
error?: react_hook_form.FieldError;
|
|
661
|
+
id: string;
|
|
662
|
+
name: string;
|
|
663
|
+
formItemId: string;
|
|
664
|
+
formDescriptionId: string;
|
|
665
|
+
formMessageId: string;
|
|
666
|
+
};
|
|
667
|
+
declare const FormItem: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
668
|
+
declare const FormLabel: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & {
|
|
669
|
+
required?: boolean;
|
|
670
|
+
} & React$1.RefAttributes<HTMLLabelElement>>;
|
|
671
|
+
type FormControlContextValue = {
|
|
672
|
+
isInvalid: boolean;
|
|
673
|
+
};
|
|
674
|
+
declare const useFormControlContext: () => FormControlContextValue | null;
|
|
675
|
+
/**
|
|
676
|
+
* Form field 의 input slot wrapper.
|
|
677
|
+
*
|
|
678
|
+
* 자식 input 컴포넌트 (TextField / TextArea / Select / MultiSelect / DatePicker / TimePicker / IconSelect 등)
|
|
679
|
+
* 에 isInvalid context + ARIA 속성을 전파하고, 기본으로 max-width 720 cap 을 씌웁니다.
|
|
680
|
+
*
|
|
681
|
+
* `maxWidth` prop:
|
|
682
|
+
* - `'default'` (기본) — 720px. Baymard 가독성 optimal upper bound
|
|
683
|
+
* - `'narrow'` — 480px. 짧은 입력 (코드, 우편번호 등)
|
|
684
|
+
* - `'full'` — cap 없음. 부모 폭 그대로 (예: 큰 검색바, full-page 에디터)
|
|
685
|
+
*
|
|
686
|
+
* **콘텐츠(파일트리/테이블/미리보기/차트 등) 는 FormControl 안에 두지 마세요.**
|
|
687
|
+
* FormControl 은 input slot 전용입니다. 콘텐츠는 FormControl 밖에 배치하세요.
|
|
688
|
+
*
|
|
689
|
+
* 풀폭 override 는 `maxWidth='full'` 또는 `className='max-w-none'` 사용.
|
|
690
|
+
*/
|
|
691
|
+
declare const FormControl: React$1.ForwardRefExoticComponent<Omit<_radix_ui_react_slot.SlotProps & React$1.RefAttributes<HTMLElement>, "ref"> & VariantProps<(props?: ({
|
|
692
|
+
maxWidth?: "full" | "default" | "narrow" | null | undefined;
|
|
693
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLElement>>;
|
|
694
|
+
interface FormDescriptionProps extends React$1.HTMLAttributes<HTMLParagraphElement> {
|
|
695
|
+
/** 앞의 정보 아이콘. 글자 수("0 / 500자") 같은 보조 표시는 `false` — 안내 문장에만 아이콘을 둔다(2026-10-28 홀드아웃 15: 글자 수에 붙은 아이콘을 Opus·Gemini 가 감점). @default true */
|
|
696
|
+
icon?: boolean;
|
|
697
|
+
}
|
|
698
|
+
declare const FormDescription: React$1.ForwardRefExoticComponent<FormDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
699
|
+
declare const FormMessage: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
700
|
+
declare const FormValidMessage: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
701
|
+
declare const FormHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
|
|
702
|
+
title?: React$1.ReactNode;
|
|
703
|
+
description?: React$1.ReactNode;
|
|
704
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
705
|
+
/** FormSection 제목 레벨의 문맥 기본값. FormPage(제목이 PageHeader h1)는 2 를 제공한다 */
|
|
706
|
+
declare const FormSectionLevelContext: React$1.Context<2 | 3>;
|
|
707
|
+
declare const FormSection: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
|
|
708
|
+
title?: React$1.ReactNode;
|
|
709
|
+
/** 제목 태그 레벨. 기본은 문맥(FormPage 안 = 2, Drawer·Dialog 안 = 3) */
|
|
710
|
+
level?: 2 | 3;
|
|
711
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
712
|
+
declare const FormFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
|
|
713
|
+
align?: "end" | "start" | "center" | "stretch" | null | undefined;
|
|
714
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
|
|
715
|
+
|
|
716
|
+
declare const iconButtonVariants: (props?: ({
|
|
717
|
+
variant?: "primary" | "warning" | "danger" | "primaryBold" | "secondary" | "secondaryBold" | "dangerBold" | "warningBold" | "primaryLink" | "dangerLink" | "secondaryLink" | "warningLink" | "outline" | null | undefined;
|
|
718
|
+
spacing?: "normal" | "compact" | null | undefined;
|
|
719
|
+
shape?: "rounded" | "normal" | null | undefined;
|
|
720
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
721
|
+
interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
|
|
722
|
+
asChild?: boolean;
|
|
723
|
+
}
|
|
724
|
+
/**
|
|
725
|
+
* 아이콘만 있는 버튼. 좁은 자리(툴바·표 행·카드 모서리)의 보조 행동에 쓴다.
|
|
726
|
+
*
|
|
727
|
+
* 언제 쓰나: 새로고침·편집·삭제·닫기처럼 아이콘만으로 뜻이 통하는 행동. 항상 `aria-label` 로 이름을 주고, 필요하면 Tooltip 을 함께 쓴다.
|
|
728
|
+
* 언제 안 쓰나: 화면의 주요 행동(→ Button 텍스트), 아이콘 뜻이 모호한 행동(→ Button 에 아이콘+텍스트).
|
|
729
|
+
* 대신/함께: Dialog·Drawer 의 닫기 버튼은 각 컴포넌트가 내장하므로 따로 두지 않는다.
|
|
730
|
+
*/
|
|
731
|
+
declare const IconButton: React$1.ForwardRefExoticComponent<IconButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
732
|
+
|
|
733
|
+
type IconSelectProps = {
|
|
734
|
+
/** 선택된 아이콘 이름 (lucide kebab-case, 예: 'calendar-days') */
|
|
735
|
+
value?: string | null;
|
|
736
|
+
/** 아이콘을 클릭하면 그 아이콘 이름으로 호출된다 */
|
|
737
|
+
onValueChange?: (value: string) => void;
|
|
738
|
+
/** 한 줄에 보여줄 아이콘 수 @default 8 */
|
|
739
|
+
iconColumnCount?: number;
|
|
740
|
+
/** 왼쪽에 카테고리 목록 표시 @default false */
|
|
741
|
+
hasCategory?: boolean;
|
|
742
|
+
/** 검색 입력 숨김 @default false */
|
|
743
|
+
hiddenSearch?: boolean;
|
|
744
|
+
};
|
|
745
|
+
declare function IconSelect({ iconColumnCount, hasCategory, hiddenSearch, ...props }: IconSelectProps): react_jsx_runtime.JSX.Element;
|
|
746
|
+
|
|
747
|
+
type TextFieldProps = Omit<React$1.ComponentProps<'input'>, 'children'> & {
|
|
748
|
+
/** @default 'standard' */
|
|
749
|
+
appearance?: 'standard' | 'none';
|
|
750
|
+
/** Floating label 텍스트 */
|
|
751
|
+
label?: string;
|
|
752
|
+
/** 라벨 필수 표시 (*) */
|
|
753
|
+
required?: boolean;
|
|
754
|
+
/** Clear 버튼 표시 여부 */
|
|
755
|
+
hasClearButton?: boolean;
|
|
756
|
+
/** 입력 필드 왼쪽 아이콘/요소 슬롯 */
|
|
757
|
+
elemBeforeInput?: React$1.ReactNode;
|
|
758
|
+
/** 입력 필드 오른쪽 아이콘/요소 슬롯 */
|
|
759
|
+
elemAfterInput?: React$1.ReactNode;
|
|
760
|
+
/** 에러 상태 */
|
|
761
|
+
isInvalid?: boolean;
|
|
762
|
+
/** 컨테이너 div에 적용할 추가 className */
|
|
763
|
+
containerClassName?: string;
|
|
764
|
+
};
|
|
765
|
+
/**
|
|
766
|
+
* 한 줄 텍스트 입력. 폼의 이름·코드·URL·숫자 같은 짧은 값에 쓴다.
|
|
767
|
+
*
|
|
768
|
+
* 언제 쓰나: `FormField` 안에서 `FormControl` 로 감싸 오류 상태를 받는다. 라벨은 `FormLabel` 로 두고, 독립 사용 시에만 `label`(floating) 을 쓴다.
|
|
769
|
+
* 언제 안 쓰나: 여러 줄 입력(→ Textarea), 정해진 선택지(→ Select·RadioGroup), 목록 검색·필터(→ ColumnFilter·TableFilter*).
|
|
770
|
+
* 대신/함께: 지우기 버튼은 `hasClearButton`, 단위·아이콘은 `elemBeforeInput`/`elemAfterInput`.
|
|
771
|
+
*/
|
|
772
|
+
declare const TextField: React$1.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
|
|
773
|
+
|
|
774
|
+
declare const Label: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React$1.RefAttributes<HTMLLabelElement>>;
|
|
775
|
+
|
|
776
|
+
interface MetaItemProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
777
|
+
label: React$1.ReactNode;
|
|
778
|
+
value: React$1.ReactNode;
|
|
779
|
+
}
|
|
780
|
+
/**
|
|
781
|
+
* 라벨·값 한 쌍의 메타 정보. 가로 나열(`MetaItem`+`MetaGroup`, 헤더용)과 세로 쌓기(`MetaRow`+`MetaList`, 상세 패널용) 두 모양이 있다.
|
|
782
|
+
* 언제 쓰나: PageHeader 아래 등록자·일시 같은 메타(MetaItem). 상세 화면의 핵심 정보도 여기 한 곳 — 여러 개면 `MetaGroup columns={3}` 격자(2026-10-30 사용자 결정: 헤더의 메타 자리를 두 개로 나누지 않는다). 본문 카드의 속성 묶음은 MetaList + MetaRow align='start'.
|
|
783
|
+
* 언제 안 쓰나: 편집 가능한 값(폼), 열이 여러 개인 표(Table).
|
|
784
|
+
* 대신/함께: MetaRow 값은 14px·라벨 12px — 행마다 값 크기를 바꾸지 않는다(패널 안 크기 차이는 심판 감점, 2026-10-18). 상태는 value 에 Badge.
|
|
785
|
+
*/
|
|
786
|
+
declare function MetaItem({ label, value, className, ...props }: MetaItemProps): react_jsx_runtime.JSX.Element;
|
|
787
|
+
interface MetaRowProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
788
|
+
label: React$1.ReactNode;
|
|
789
|
+
/** 생략 시 슬롯만 우측 정렬로 렌더링됨 (Figma hasText=false 대응) */
|
|
790
|
+
value?: React$1.ReactNode;
|
|
791
|
+
slotBefore?: React$1.ReactNode;
|
|
792
|
+
slotAfter?: React$1.ReactNode;
|
|
793
|
+
/**
|
|
794
|
+
* 값의 자리. `end`(기본)는 라벨 100px + 값을 행 오른쪽 끝에(dl-ui-v3 시안). `start` 는 라벨 120px + 값을 라벨 바로 옆 왼쪽 정렬 —
|
|
795
|
+
* 상세 패널·오른쪽 정보 열처럼 행이 넓은 곳에서 라벨과 값 사이가 비지 않는다(2026-10-16 이슈 47, 원문 심판 13회 감점). 패턴 예제는 `start`
|
|
796
|
+
*/
|
|
797
|
+
align?: 'end' | 'start';
|
|
798
|
+
/**
|
|
799
|
+
* 값을 숫자 강조(20px, 탭룰러)로. 통계·건수처럼 숫자가 행의 주인공일 때만 — 예: "사용 중인 엔드포인트 3개", "크기 1,280 MB".
|
|
800
|
+
* 한 패널에 한두 행만. 2026-10-17 8차 A3(디자이너 점수 역추적: 글자 크기 단계가 많은 화면이 높게 평가됨).
|
|
801
|
+
* 2026-10-18 9차: 예제·스킬·스토리에서 뺐다 — 개발용 8차 심판이 패널 안 크기 차이를 "불균일"로 읽어 감점(타이포 3쌍·컴포넌트 2쌍). KPI 띠 같은 전용 자리가 생기기 전엔 기본으로 쓰지 않는다
|
|
802
|
+
*/
|
|
803
|
+
emphasis?: boolean;
|
|
804
|
+
}
|
|
805
|
+
interface MetaGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
806
|
+
/** 열 수. 없으면 가로로 흘려 줄바꿈(짧은 메타 한 줄). 주면 열을 맞춘 격자(md 2열, xl 부터 지정 열) — 상세 화면 헤더의 핵심 정보처럼 항목이 많을 때 */
|
|
807
|
+
columns?: 2 | 3 | 4;
|
|
808
|
+
}
|
|
809
|
+
/**
|
|
810
|
+
* PageHeader 등의 메타 항목(`MetaItem`)들을 가로로 나열하는 컨테이너.
|
|
811
|
+
* 폭이 좁아지면 줄바꿈되며, 가로 간격은 24px, 줄바꿈 시 세로 간격은 0이다. `columns` 를 주면 열을 맞춘 격자 — 상세 화면의 핵심 정보(ID·버전·소유자·수정일 …)를
|
|
812
|
+
* 헤더 메타 자리 한 곳에 둔다(2026-10-30 사용자 결정: 요약 상자를 따로 두지 않는다).
|
|
813
|
+
*/
|
|
814
|
+
declare function MetaGroup({ className, columns, ...props }: MetaGroupProps): react_jsx_runtime.JSX.Element;
|
|
815
|
+
declare function MetaRow({ label, value, slotBefore, slotAfter, align, emphasis, className, ...props }: MetaRowProps): react_jsx_runtime.JSX.Element;
|
|
816
|
+
interface MetaListProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
817
|
+
/** 열 수(기본 1 = 세로 한 줄씩). 2 이상이면 행을 격자로 흘린다(md 2열, xl 부터 지정 열) — 전폭 본문 카드처럼 넓은 자리의 키-값 격자. 행은 `MetaRow align='start'` */
|
|
818
|
+
columns?: 1 | 2 | 3 | 4;
|
|
819
|
+
}
|
|
820
|
+
/**
|
|
821
|
+
* `MetaRow` 를 위에서 아래로 한 줄씩 쌓는 목록. 상세 Drawer·오른쪽 정보 패널의 "필드: 값" 묶음.
|
|
822
|
+
*
|
|
823
|
+
* 언제 쓰나: Drawer 본문처럼 폭이 좁은 곳에 리소스의 필드를 나열할 때(세로 한 줄씩), 또는 `columns={3}` 으로 전폭 본문 카드의 키-값 격자. 행마다 라벨 100px + 값 오른쪽 정렬(기본) — 상세 패널·정보 열처럼 행이 넓으면 `MetaRow align='start'` 로 값을 라벨 옆에 붙인다.
|
|
824
|
+
* 언제 안 쓰나: PageHeader 아래의 메타(→ MetaGroup + MetaItem, 많으면 `MetaGroup columns`), 표 형태 데이터(→ Table).
|
|
825
|
+
* 대신/함께: `Stack` 은 기본 방향이 가로라 `<Stack>` 으로 MetaRow 를 감싸면 행이 옆으로 늘어서 잘린다 — MetaList 를 쓴다.
|
|
826
|
+
*/
|
|
827
|
+
declare function MetaList({ className, columns, ...props }: MetaListProps): react_jsx_runtime.JSX.Element;
|
|
828
|
+
|
|
829
|
+
type EventLevel = 'info' | 'success' | 'warning' | 'error';
|
|
830
|
+
type EventListItem = {
|
|
831
|
+
/** 항목 key */
|
|
832
|
+
id: string;
|
|
833
|
+
/** 발생 시각. 소비 앱이 포맷해 넘긴다 (예: "3분 전", "10. 12. 09:28") */
|
|
834
|
+
time: ReactNode;
|
|
835
|
+
/** 레벨. 왼쪽 색 띠와 Badge 색을 정한다 */
|
|
836
|
+
level: EventLevel;
|
|
837
|
+
/** 내용 한 줄 */
|
|
838
|
+
message: ReactNode;
|
|
839
|
+
};
|
|
840
|
+
type EventListProps = Omit<HTMLAttributes<HTMLUListElement>, 'children'> & {
|
|
841
|
+
/** 최신순으로 정렬해 넘긴다 */
|
|
842
|
+
items: EventListItem[];
|
|
843
|
+
/** 항목이 없을 때 문구. 기본 "최근 이벤트가 없습니다." */
|
|
844
|
+
emptyText?: ReactNode;
|
|
845
|
+
/** 레벨 Badge 글자. 기본 정보·성공·경고·오류 */
|
|
846
|
+
levelLabels?: Partial<Record<EventLevel, ReactNode>>;
|
|
847
|
+
};
|
|
848
|
+
/**
|
|
849
|
+
* 최근 이벤트·활동 목록. 항목마다 왼쪽 레벨 색 띠 → 레벨 Badge → 시각 → 메시지 한 줄.
|
|
850
|
+
*
|
|
851
|
+
* 언제 쓰나: 대시보드·상세 화면의 "최근 이벤트/활동" 섹션처럼 최신순 몇 개(보통 5~10개)를 한눈에 보여 줄 때. 레벨(info·success·warning·error)을 색 띠와 Badge 로 구분한다.
|
|
852
|
+
* 언제 안 쓰나: 검색·필터·페이지네이션이 필요한 로그(→ ListPage·AgGridTable), 단계가 있는 진행 상황(→ 소비 앱의 스텝 표시), 사용자가 답해야 하는 알림(→ Alert·Toast).
|
|
853
|
+
* 대신/함께: 시각은 소비 앱이 포맷해 `time` 에 넘긴다. 항목이 없으면 `emptyText` 를 status 로 보여 준다. 레벨 → 색은 고정이고 `className` 으로 색을 바꾸지 않는다.
|
|
854
|
+
*/
|
|
855
|
+
declare function EventList({ items, emptyText, levelLabels, className, ...props }: EventListProps): react_jsx_runtime.JSX.Element;
|
|
856
|
+
|
|
857
|
+
/**
|
|
858
|
+
* 빈 상태 일러스트 — 열린 상자와 구겨진 종이. dl-ui-v3 의 `empty_box.svg`(사용자 정보 화면의 빈 패널)를 토큰 색으로 옮겨 라이트·다크 테마를 따른다.
|
|
859
|
+
*
|
|
860
|
+
* 언제 쓰나: EmptyState 의 기본 그림(목록·상세·대시보드의 "없음" 상자). 소비 앱의 빈 패널(dl-ui-v3 `CEmptyBox`)도 이것으로 대체한다.
|
|
861
|
+
* 언제 안 쓰나: 오류 안내(→ ErrorState 의 경고 아이콘), 로딩(→ LoadingState), 표 안의 한 줄 빈 결과(ListPage 는 문장만 쓴다).
|
|
862
|
+
* 대신/함께: 색은 `fill-primary10/20`·`fill-sys-background`·`fill-current`(종이 = `text-sys-text-subtler`, 원본의 grayscale60) 로 토큰을 따르므로 `className` 으로는 크기·여백만 바꾼다(기본 110×81). 장식이라 `aria-hidden`.
|
|
863
|
+
*/
|
|
864
|
+
declare const EmptyBoxIllustration: React$1.ForwardRefExoticComponent<Omit<React$1.SVGProps<SVGSVGElement>, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
|
|
865
|
+
|
|
866
|
+
interface LucideIconProps extends lucide.LucideProps {
|
|
867
|
+
/** lucide 아이콘 이름 — kebab(`circle-pause`) 또는 Pascal(`CirclePause`). 옛 이름(alias, `pause-circle`)도 받는다. 없는 이름이면 아무것도 그리지 않는다 */
|
|
868
|
+
iconComponentName?: string | null;
|
|
869
|
+
}
|
|
870
|
+
/**
|
|
871
|
+
* 이름으로 그리는 lucide 아이콘. 버튼·뱃지·메뉴의 작은 아이콘에 쓴다.
|
|
872
|
+
*
|
|
873
|
+
* 언제 쓰나: 아이콘 이름이 데이터(메뉴 설정, 상태 상수)에서 올 때, 또는 lucide 를 직접 import 하지 않고 이름으로 쓰고 싶을 때. 기본 크기 16px(버튼 글자 옆·뱃지 안 크기).
|
|
874
|
+
* 언제 안 쓰나: 이름이 코드에 고정돼 있고 lucide 를 직접 import 할 수 있으면 `import { Plus } from 'lucide-react'` 가 더 가볍다.
|
|
875
|
+
* 대신/함께: 상태 뱃지 아이콘은 `Badge` 의 자식으로 넣는다(16px·글자색). 로딩은 `Spinner`.
|
|
876
|
+
*/
|
|
877
|
+
declare function LucideIcon({ iconComponentName, size, ...props }: LucideIconProps): react_jsx_runtime.JSX.Element | null;
|
|
878
|
+
|
|
879
|
+
interface PageHeaderRefreshButtonProps {
|
|
880
|
+
/** 새로고침 클릭 */
|
|
881
|
+
onClick: () => void;
|
|
882
|
+
/** 마지막 갱신 시각. 없으면 "업데이트 전", 1분 안이면 "방금 업데이트", 그 뒤로는 "N분 전 업데이트" (1분마다 갱신) */
|
|
883
|
+
lastUpdatedAt?: Date | number | string;
|
|
884
|
+
/** true 면 아이콘이 돌고 버튼이 비활성 (react-query 의 isRefetching 등) */
|
|
885
|
+
refreshing?: boolean;
|
|
886
|
+
/** 버튼 크기. default 36px, compact 28px (compact PageHeader 용) */
|
|
887
|
+
size?: 'default' | 'compact';
|
|
888
|
+
className?: string;
|
|
889
|
+
}
|
|
890
|
+
/**
|
|
891
|
+
* PageHeader `titleRight` 에 놓는 새로고침 묶음 — "N분 전 업데이트" 라벨 + 아이콘 버튼. 갱신 중에는 아이콘이 돌고 버튼이 잠긴다.
|
|
892
|
+
*
|
|
893
|
+
* 언제 쓰나: 목록·상세·대시보드처럼 서버 데이터를 다시 불러올 수 있는 화면의 헤더. `lastUpdatedAt` 에 조회 시각(react-query `dataUpdatedAt`)을, `refreshing` 에 재조회 중 여부를 넘긴다.
|
|
894
|
+
* 언제 안 쓰나: 폼의 "다시 시도"(→ Button secondary), 표 안의 행 단위 새로고침(→ IconButton secondaryLink), 자동 폴링만 있고 사용자가 누를 일이 없는 화면.
|
|
895
|
+
* 대신/함께: 텍스트 버튼으로 만들지 않는다(dl-ui-v3 헤더 관례와 통일). 라벨은 1분마다 다시 계산한다.
|
|
896
|
+
*/
|
|
897
|
+
declare function PageHeaderRefreshButton({ onClick, lastUpdatedAt, refreshing, size, className, }: PageHeaderRefreshButtonProps): react_jsx_runtime.JSX.Element;
|
|
898
|
+
|
|
899
|
+
interface PopoverContentProps extends React$1.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
|
|
900
|
+
align?: 'start' | 'center' | 'end';
|
|
901
|
+
sideOffset?: number;
|
|
902
|
+
withFitContent?: boolean;
|
|
903
|
+
}
|
|
904
|
+
declare const PopoverContent: React$1.ForwardRefExoticComponent<PopoverContentProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
905
|
+
declare const Popover: React$1.FC<PopoverPrimitive.PopoverProps>;
|
|
906
|
+
declare const PopoverTrigger: React$1.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
907
|
+
declare const PopoverAnchor: React$1.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
908
|
+
|
|
909
|
+
type PaginationPropsType = {
|
|
910
|
+
/** 총 row(데이터)의 개수 */
|
|
911
|
+
total: number;
|
|
912
|
+
/** 한 페이지에 보여줄 row(데이터)의 개수 */
|
|
913
|
+
rowsPerPage: number;
|
|
914
|
+
/** 현재 페이지 번호 */
|
|
915
|
+
page: number;
|
|
916
|
+
/** 페이지 번호 설정 함수 */
|
|
917
|
+
onChange: React$1.Dispatch<number>;
|
|
918
|
+
/** 컴포넌트에서 보여줄 페이지 수 (기본값 : 5)*/
|
|
919
|
+
count?: number;
|
|
920
|
+
/** disabled */
|
|
921
|
+
disabled?: boolean;
|
|
922
|
+
/** 라벨 표시 여부 (전체 N개 중 X - Y번째) */
|
|
923
|
+
showLabel?: boolean;
|
|
924
|
+
};
|
|
925
|
+
/**
|
|
926
|
+
* 페이지 번호 이동. 서버 페이징 목록의 표 아래에 쓴다.
|
|
927
|
+
*
|
|
928
|
+
* 언제 쓰나: `total`·`page`·`rowsPerPage` 를 알 수 있는 목록. `showLabel` 로 "전체 N개 중 X-Y" 를 보여 준다. 필터·검색이 바뀌면 1페이지로.
|
|
929
|
+
* 언제 안 쓰나: 무한 스크롤·더 보기 방식, 커서 기반이라 전체 개수를 모르는 목록(→ 이전/다음 버튼만).
|
|
930
|
+
* 대신/함께: `TablePagination` 으로 감싸 표 아래 가운데에 둔다. ListPage 패턴은 이를 내장한다.
|
|
931
|
+
*/
|
|
932
|
+
declare function Pagination({ total, rowsPerPage, page, onChange, count, disabled, showLabel, ...rest }: PaginationPropsType): react_jsx_runtime.JSX.Element;
|
|
933
|
+
declare function PaginationWrapper({ className, ...props }: React$1.ComponentProps<'nav'>): react_jsx_runtime.JSX.Element;
|
|
934
|
+
declare function PaginationContent({ className, ...props }: React$1.ComponentProps<'ul'>): react_jsx_runtime.JSX.Element;
|
|
935
|
+
declare function PaginationItem({ className, ...props }: React$1.ComponentProps<'li'>): react_jsx_runtime.JSX.Element;
|
|
936
|
+
type PaginationLinkProps = {
|
|
937
|
+
isActive?: boolean;
|
|
938
|
+
disabled?: boolean;
|
|
939
|
+
children?: React$1.ReactNode;
|
|
940
|
+
} & React$1.ComponentProps<'a'>;
|
|
941
|
+
declare function PaginationLink({ className, isActive, disabled, children, onClick, href, ...props }: PaginationLinkProps): react_jsx_runtime.JSX.Element;
|
|
942
|
+
declare function PaginationFirst({ className, ...props }: React$1.ComponentProps<typeof PaginationLink>): react_jsx_runtime.JSX.Element;
|
|
943
|
+
declare function PaginationPrevious({ className, ...props }: React$1.ComponentProps<typeof PaginationLink>): react_jsx_runtime.JSX.Element;
|
|
944
|
+
declare function PaginationLast({ className, ...props }: React$1.ComponentProps<typeof PaginationLink>): react_jsx_runtime.JSX.Element;
|
|
945
|
+
declare function PaginationNext({ className, ...props }: React$1.ComponentProps<typeof PaginationLink>): react_jsx_runtime.JSX.Element;
|
|
946
|
+
|
|
947
|
+
declare const getPaginationRange: (total: number, page: number, limit: number) => {
|
|
948
|
+
start: number;
|
|
949
|
+
end: number;
|
|
950
|
+
};
|
|
951
|
+
|
|
952
|
+
interface PanelProps extends Omit<React$1.HTMLAttributes<HTMLElement>, 'title'> {
|
|
953
|
+
/** 상자 제목. 주면 이름 있는 `section` landmark 가 되고(aria-labelledby), 없으면 `div` */
|
|
954
|
+
title?: React$1.ReactNode;
|
|
955
|
+
/** 제목 아래 한 줄 설명 */
|
|
956
|
+
description?: React$1.ReactNode;
|
|
957
|
+
/** 제목의 heading 레벨. 페이지 제목이 h1 이면 2(기본), 상자 안의 하위 구역이면 3 */
|
|
958
|
+
level?: 2 | 3;
|
|
959
|
+
/** 제목 줄 오른쪽(닫기 버튼 등) */
|
|
960
|
+
titleRight?: React$1.ReactNode;
|
|
961
|
+
/** 본문 아래 안내 한 줄(비활성 사유 등) */
|
|
962
|
+
note?: React$1.ReactNode;
|
|
963
|
+
/** 맨 아래 버튼 줄(오른쪽 정렬, 8px 간격) */
|
|
964
|
+
footer?: React$1.ReactNode;
|
|
965
|
+
/** 안쪽 여백. medium 16px(옆 패널·본문 구역, 기본) · large 24px(목록의 상세 패널) */
|
|
966
|
+
padding?: 'medium' | 'large';
|
|
967
|
+
}
|
|
968
|
+
/**
|
|
969
|
+
* 1px 테두리의 둥근 상자. 상세 화면의 본문 구역·옆 패널, 목록의 상세 패널, 폼의 검토 패널이 전부 이 상자다.
|
|
970
|
+
*
|
|
971
|
+
* 언제 쓰나: 제목 + 내용 묶음을 본문과 구분해 보일 때(상세 본문의 "주요 정보"·"설명", DetailPage `aside`, FormPage `aside`, ListPage `detail`). 그림자 없이 선 하나로 나눈다 — 화면의 다른 선(표·구분선)과 같은 토큰.
|
|
972
|
+
* 언제 안 쓰나: 대시보드 요약 타일(→ Card), 알림(→ Alert), 겹쳐 뜨는 것(→ Dialog·Drawer·Popover).
|
|
973
|
+
* 대신/함께: 안의 필드는 `MetaList` + `MetaRow align='start'`, 표는 `Table`·`AgGridTable`(자기 상자가 있으니 Panel 로 또 감싸지 않는다). 패턴 슬롯(`aside`·`detail`)은 패턴이 Panel 로 그리므로 소비 앱이 상자를 또 두르지 않는다.
|
|
974
|
+
*/
|
|
975
|
+
declare function Panel({ title, description, level, titleRight, note, footer, padding, className, children, ...props }: PanelProps): react_jsx_runtime.JSX.Element;
|
|
976
|
+
|
|
977
|
+
interface ParameterTableRow {
|
|
978
|
+
id: string;
|
|
979
|
+
values: Record<string, string>;
|
|
980
|
+
}
|
|
981
|
+
interface ParameterTableColumn {
|
|
982
|
+
id: string;
|
|
983
|
+
header: string;
|
|
984
|
+
placeholder?: string;
|
|
985
|
+
width?: number | string;
|
|
986
|
+
required?: boolean;
|
|
987
|
+
}
|
|
988
|
+
/**
|
|
989
|
+
* 셀별 invalid 표시. cellErrors[rowId][colId] === true 인 셀에 빨간 테두리 강조.
|
|
990
|
+
* 외부 form 검증 결과를 그대로 매핑해 controlled 로 주입한다.
|
|
991
|
+
*/
|
|
992
|
+
type ParameterTableCellErrors = Record<string, Record<string, boolean>>;
|
|
993
|
+
type ParameterTableSpacing = 'normal' | 'compact';
|
|
994
|
+
declare const DEFAULT_PARAMETER_TABLE_COLUMNS: ParameterTableColumn[];
|
|
995
|
+
|
|
996
|
+
interface ParameterTableProps {
|
|
997
|
+
value?: ParameterTableRow[];
|
|
998
|
+
defaultValue?: ParameterTableRow[];
|
|
999
|
+
onChange?: (rows: ParameterTableRow[]) => void;
|
|
1000
|
+
columns?: ParameterTableColumn[];
|
|
1001
|
+
withHandle?: boolean;
|
|
1002
|
+
spacing?: ParameterTableSpacing;
|
|
1003
|
+
caption?: React$1.ReactNode;
|
|
1004
|
+
disabled?: boolean;
|
|
1005
|
+
className?: string;
|
|
1006
|
+
/**
|
|
1007
|
+
* 셀별 invalid 표시. cellErrors[rowId][colId] === true 인 셀에 빨간 강조.
|
|
1008
|
+
* trailing placeholder 행은 자동으로 제외된다.
|
|
1009
|
+
*/
|
|
1010
|
+
cellErrors?: ParameterTableCellErrors;
|
|
1011
|
+
}
|
|
1012
|
+
declare const ParameterTable: React$1.ForwardRefExoticComponent<ParameterTableProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1013
|
+
|
|
1014
|
+
/** 막대 색 — 작업 상태와 연동(실패한 작업의 막대가 파란색이면 상태와 어긋난다, 2026-10-16 이슈 47) */
|
|
1015
|
+
declare const indicatorVariants: {
|
|
1016
|
+
readonly primary: "bg-primary30";
|
|
1017
|
+
readonly success: "bg-success30";
|
|
1018
|
+
readonly warning: "bg-warning30";
|
|
1019
|
+
readonly danger: "bg-danger30";
|
|
1020
|
+
};
|
|
1021
|
+
interface ProgressProps extends React$1.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
|
|
1022
|
+
/** 진행률 (0–100). 없으면 indeterminate */
|
|
1023
|
+
value?: number;
|
|
1024
|
+
/** 막대 색. 기본 `primary`. 상태 Badge 의 tone 과 맞춘다 — 실패 `danger`, 경고 `warning`, 완료 `success` */
|
|
1025
|
+
variant?: keyof typeof indicatorVariants;
|
|
1026
|
+
}
|
|
1027
|
+
/**
|
|
1028
|
+
* 가로 진행 막대(role=progressbar). 표의 진행률 열, 자원 사용량, 작업 진행에 쓴다.
|
|
1029
|
+
*
|
|
1030
|
+
* 언제 쓰나: 0~100 의 비율을 길이로 보여 줄 때. 이름은 `aria-label` 로 준다 — 표에서는 행마다 `'GPU 사용률 46%'` 처럼 **무엇의 비율인지**.
|
|
1031
|
+
* 이름을 안 주면 `'46%'`(값이 없으면 `'진행 중'`)를 기본 이름으로 붙인다 — 이름 없는 progressbar 는 axe serious(aria-progressbar-name, 2026-10-20 17차). 기본 이름은 숫자뿐이라 뜻이 약하니 호출자가 주는 것이 맞다.
|
|
1032
|
+
* 언제 안 쓰나: 단계가 있는 진행(→ Stepper), 불확정 대기(→ Spinner).
|
|
1033
|
+
* 대신/함께: 막대 옆에 % 글자를 같이 둔다(`tabular-nums`). 색은 `variant` 로 상태와 맞춘다.
|
|
1034
|
+
*/
|
|
1035
|
+
declare const Progress: React$1.ForwardRefExoticComponent<ProgressProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1036
|
+
|
|
1037
|
+
interface RadioProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
1038
|
+
checked?: boolean;
|
|
1039
|
+
disabled?: boolean;
|
|
1040
|
+
}
|
|
1041
|
+
/**
|
|
1042
|
+
* 시각적 라디오 인디케이터 컴포넌트
|
|
1043
|
+
* RadioGroup 없이 독립적으로 사용 가능 (AG Grid 셀 렌더러 등)
|
|
1044
|
+
*
|
|
1045
|
+
* 단일 선택 라디오 버튼 하나. 보통 RadioGroup 안에서 쓴다.
|
|
1046
|
+
*
|
|
1047
|
+
* 언제 쓰나: 2~5개 선택지 중 하나를 고르고, 선택지를 한눈에 보여야 할 때.
|
|
1048
|
+
* 언제 안 쓰나: 선택지가 많을 때(→ Select), 복수 선택(→ Checkbox), 제목·설명이 붙은 큰 선택 카드(→ RadioSection).
|
|
1049
|
+
* 대신/함께: 단독으로 쓰지 말고 RadioGroup 으로 묶어 키보드 이동과 그룹 이름을 받는다.
|
|
1050
|
+
*/
|
|
1051
|
+
declare function Radio({ checked, disabled, className, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
|
|
1052
|
+
|
|
1053
|
+
/**
|
|
1054
|
+
* Radio 묶음. 폼에서 2~5개 선택지 중 하나를 고를 때 쓴다.
|
|
1055
|
+
*
|
|
1056
|
+
* 언제 쓰나: 유형·방식 선택처럼 선택지가 적고 항상 보여야 할 때. `FormField` 안에서 `onValueChange` 를 연결한다.
|
|
1057
|
+
* 언제 안 쓰나: 선택지가 6개 이상(→ Select), 복수 선택(→ Checkbox), 선택지마다 제목·설명이 필요한 카드형(→ RadioSectionGroup).
|
|
1058
|
+
* 대신/함께: 선택에 따라 아래 필드가 바뀌면 반대 분기의 값은 `reset` 으로 비운다(`trigger` 는 빈 필수 필드를 즉시 오류로 띄운다).
|
|
1059
|
+
*/
|
|
1060
|
+
declare function RadioGroup({ className, ...props }: React$1.ComponentProps<typeof RadioGroupPrimitive.Root>): react_jsx_runtime.JSX.Element;
|
|
1061
|
+
declare function RadioGroupItem({ className, ...props }: React$1.ComponentProps<typeof RadioGroupPrimitive.Item>): react_jsx_runtime.JSX.Element;
|
|
1062
|
+
|
|
1063
|
+
type RadioSectionGroupProps = React$1.ComponentProps<typeof RadioGroupPrimitive.Root>;
|
|
1064
|
+
/**
|
|
1065
|
+
* 카드형 라디오(RadioSection)들을 묶는 그룹.
|
|
1066
|
+
*
|
|
1067
|
+
* 언제 쓰나: 선택지마다 제목·설명이 붙는 유형·방식 선택(2개 이상). 설명 없는 짧은 선택은 RadioGroup, 7개 이상·검색이 필요하면 Select.
|
|
1068
|
+
*
|
|
1069
|
+
* Radix RadioGroup 위에 올려 `role='radiogroup'`, roving tabindex, 화살표 키 이동,
|
|
1070
|
+
* 단일 선택(value/onValueChange)을 제공한다. 자식으로 `<RadioSection value=... />` 를 둔다.
|
|
1071
|
+
*
|
|
1072
|
+
* `orientation`(기본 'horizontal')이 레이아웃과 방향키 축을 함께 결정한다:
|
|
1073
|
+
* - 'horizontal' → **개수에 맞춘 grid**: 1~3개 한 줄(n 등분), **4개 2×2**, **5개 이상 세로 쌓기**(카드 안은 제목·설명 가로, 방향키도 Up/Down).
|
|
1074
|
+
* 폼 열 720px 에 카드 4개를 한 줄에 두면 170px 씩이라 설명이 3~4줄로 접혀 "cramped" 로 읽혔다(한 줄 판 12차·상세 판 11차 폼, 2026-10-18 13차).
|
|
1075
|
+
* 2×2 에서는 Left/Right 가 DOM 순서로 돈다
|
|
1076
|
+
* - 'vertical' → 세로 배치(flex col) + Up/Down 으로 이동 (개수와 무관, 카드 안은 세로 그대로)
|
|
1077
|
+
*
|
|
1078
|
+
* 그룹 접근성 이름은 `aria-label`(문자열) 또는 `aria-labelledby`(id) 로 전달한다.
|
|
1079
|
+
* controlled 사용을 전제로 한다(`value` + `onValueChange`).
|
|
1080
|
+
*/
|
|
1081
|
+
declare function RadioSectionGroup({ className, value, orientation, children, ...props }: RadioSectionGroupProps): react_jsx_runtime.JSX.Element;
|
|
1082
|
+
interface RadioSectionProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
|
|
1083
|
+
title: string;
|
|
1084
|
+
description?: string;
|
|
1085
|
+
selected?: boolean;
|
|
1086
|
+
disabled?: boolean;
|
|
1087
|
+
onSelect?: () => void;
|
|
1088
|
+
/** RadioSectionGroup 안에서 사용할 때 필수 — 그룹의 선택 value 와 매칭된다. */
|
|
1089
|
+
value?: string;
|
|
1090
|
+
}
|
|
1091
|
+
/**
|
|
1092
|
+
* 카드형 라디오 — 제목 + 설명이 있는 카드 안에 Radio 인디케이터. 유형·방식 선택의 기본.
|
|
1093
|
+
*
|
|
1094
|
+
* 언제 쓰나: 소스 유형·공개 범위·입력 방식처럼 선택지가 2개 이상이고 선택지마다 제목과 한 줄 설명이 붙을 때 — `RadioSectionGroup` 안에 `value`·`title`·`description` 으로(dl-ui-v3 의 유형 선택 관례). 배치는 그룹이 개수로 정한다(1~3개 한 줄, 4개 2×2, 5개 이상 세로).
|
|
1095
|
+
* 언제 안 쓰나: 설명이 없는 짧은 선택(예·아니오, 켬·끔)은 RadioGroup, 선택지 7개 이상·검색이 필요하면 Select, 복수 선택은 Checkbox.
|
|
1096
|
+
* 대신/함께: 폼에서는 `FormField` 의 `field.value`/`field.onChange` 를 `RadioSectionGroup` 의 `value`/`onValueChange` 에 연결하고, 그룹에 `aria-labelledby` 로 FormLabel 의 id 를 건다(예제 form-page.tsx 의 스케줄 선택).
|
|
1097
|
+
*
|
|
1098
|
+
* 두 가지 사용 방식:
|
|
1099
|
+
* - **그룹 모드**: `<RadioSectionGroup>` 안에서 `value` 와 함께 사용 → Radix Item 으로 동작하여
|
|
1100
|
+
* role=radio / roving tabindex / aria-checked / 화살표·Space 키를 그룹이 관리한다.
|
|
1101
|
+
* - **단독 모드(하위호환)**: `selected` / `onSelect` 로 부모가 직접 제어. (기존 동작 그대로)
|
|
1102
|
+
*/
|
|
1103
|
+
declare function RadioSection({ title, description, selected, disabled, onSelect, value, className, onClick, onKeyDown, ...props }: RadioSectionProps): react_jsx_runtime.JSX.Element;
|
|
1104
|
+
|
|
1105
|
+
interface SelectContextValue {
|
|
1106
|
+
open: boolean;
|
|
1107
|
+
setOpen: (open: boolean) => void;
|
|
1108
|
+
value: string | undefined;
|
|
1109
|
+
onValueChange: (value: string) => void;
|
|
1110
|
+
disabled?: boolean;
|
|
1111
|
+
/** value -> textValue 매핑 (trigger 표시용) */
|
|
1112
|
+
labelMap: Map<string, string>;
|
|
1113
|
+
registerLabel: (value: string, label: string) => void;
|
|
1114
|
+
}
|
|
1115
|
+
interface SelectProps {
|
|
1116
|
+
value?: string;
|
|
1117
|
+
defaultValue?: string;
|
|
1118
|
+
onValueChange?: (value: string) => void;
|
|
1119
|
+
open?: boolean;
|
|
1120
|
+
defaultOpen?: boolean;
|
|
1121
|
+
onOpenChange?: (open: boolean) => void;
|
|
1122
|
+
disabled?: boolean;
|
|
1123
|
+
/** root container 에 적용할 추가 className. FormControl 의 maxWidth 가 여기에 주입된다. */
|
|
1124
|
+
className?: string;
|
|
1125
|
+
children: React$1.ReactNode;
|
|
1126
|
+
}
|
|
1127
|
+
interface SelectTriggerProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof selectTriggerVariants> {
|
|
1128
|
+
children: React$1.ReactNode;
|
|
1129
|
+
/** Floating label 텍스트. 지정 시 floating label 모드 활성화 */
|
|
1130
|
+
label?: string;
|
|
1131
|
+
/** 필수 입력 표시 (*). label과 함께 사용 */
|
|
1132
|
+
required?: boolean;
|
|
1133
|
+
}
|
|
1134
|
+
interface SelectValueProps {
|
|
1135
|
+
placeholder?: string;
|
|
1136
|
+
}
|
|
1137
|
+
interface SelectContentProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
1138
|
+
/** Popover 정렬 */
|
|
1139
|
+
align?: 'start' | 'center' | 'end';
|
|
1140
|
+
/** Popover 오프셋 (px) */
|
|
1141
|
+
sideOffset?: number;
|
|
1142
|
+
}
|
|
1143
|
+
interface SelectItemProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
|
|
1144
|
+
value: string;
|
|
1145
|
+
disabled?: boolean;
|
|
1146
|
+
/** 아이템 하단 설명 텍스트 (trigger에 표시되지 않음) */
|
|
1147
|
+
description?: string;
|
|
1148
|
+
/** trigger에 표시할 텍스트. 미지정 시 children에서 추출 */
|
|
1149
|
+
textValue?: string;
|
|
1150
|
+
/** title 과 description 사이에 표시할 메타 정보 배열 (라벨/구분자/값) */
|
|
1151
|
+
meta?: MetaItemProps[];
|
|
1152
|
+
/** title row 앞 위치에 렌더될 슬롯 */
|
|
1153
|
+
elemBefore?: React$1.ReactNode;
|
|
1154
|
+
/**
|
|
1155
|
+
* elemBefore 배치 방식.
|
|
1156
|
+
* - `'center'`(기본): SelectItemContent 바깥 선행 컬럼 — 멀티라인 전체 높이에 중앙 정렬하며 이름·meta 를 모두 우측으로 밀어냄.
|
|
1157
|
+
* - `'title'`: title 행 안에 인라인 — 이름만 우측으로 밀고 meta/description 행은 콘텐츠 좌측 정렬 유지(항목 간 meta 시작 위치 일치).
|
|
1158
|
+
*/
|
|
1159
|
+
elemBeforeAlign?: 'center' | 'title';
|
|
1160
|
+
/** title 텍스트 우측에 렌더될 슬롯 */
|
|
1161
|
+
elemAfter?: React$1.ReactNode;
|
|
1162
|
+
children: React$1.ReactNode;
|
|
1163
|
+
}
|
|
1164
|
+
interface SelectRadioItemProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
|
|
1165
|
+
value: string;
|
|
1166
|
+
disabled?: boolean;
|
|
1167
|
+
/** 아이템 하단 설명 텍스트 */
|
|
1168
|
+
description?: string;
|
|
1169
|
+
/** trigger에 표시할 텍스트 */
|
|
1170
|
+
textValue?: string;
|
|
1171
|
+
/** title 과 description 사이에 표시할 메타 정보 배열 (라벨/구분자/값) */
|
|
1172
|
+
meta?: MetaItemProps[];
|
|
1173
|
+
/** radio indicator 다음, title row 앞에 렌더될 슬롯 */
|
|
1174
|
+
elemBefore?: React$1.ReactNode;
|
|
1175
|
+
/**
|
|
1176
|
+
* elemBefore 배치 방식.
|
|
1177
|
+
* - `'center'`(기본): 선행 컬럼 — 전체 높이 중앙 정렬(이름·meta 우측 이동)
|
|
1178
|
+
* - `'title'`: title 행 안 인라인 — 이름만 밀고 meta 는 콘텐츠 좌측 유지
|
|
1179
|
+
*/
|
|
1180
|
+
elemBeforeAlign?: 'center' | 'title';
|
|
1181
|
+
/** title 텍스트 우측에 렌더될 슬롯 */
|
|
1182
|
+
elemAfter?: React$1.ReactNode;
|
|
1183
|
+
children: React$1.ReactNode;
|
|
1184
|
+
}
|
|
1185
|
+
interface SelectInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
|
|
1186
|
+
onChange?: (value: string) => void;
|
|
1187
|
+
}
|
|
1188
|
+
interface SelectGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
1189
|
+
/** 그룹 제목 (cmdk Group heading 으로 렌더) */
|
|
1190
|
+
heading?: React$1.ReactNode;
|
|
1191
|
+
children: React$1.ReactNode;
|
|
1192
|
+
}
|
|
1193
|
+
interface SelectLoadingProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
1194
|
+
children?: React$1.ReactNode;
|
|
1195
|
+
}
|
|
1196
|
+
interface SelectEmptyProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
1197
|
+
children?: React$1.ReactNode;
|
|
1198
|
+
}
|
|
1199
|
+
type SelectSeparatorProps = React$1.HTMLAttributes<HTMLDivElement>;
|
|
1200
|
+
|
|
1201
|
+
declare const selectTriggerVariants: (props?: ({
|
|
1202
|
+
appearance?: "none" | "standard" | null | undefined;
|
|
1203
|
+
isInvalid?: boolean | null | undefined;
|
|
1204
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1205
|
+
declare const SelectTrigger: React$1.ForwardRefExoticComponent<SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1206
|
+
|
|
1207
|
+
interface MultiSelectContextValue {
|
|
1208
|
+
open: boolean;
|
|
1209
|
+
setOpen: (open: boolean) => void;
|
|
1210
|
+
/** 현재 선택된 값 배열 */
|
|
1211
|
+
values: string[];
|
|
1212
|
+
/** 값을 토글 (선택/해제) */
|
|
1213
|
+
onToggleValue: (value: string) => void;
|
|
1214
|
+
/** 특정 값 제거 */
|
|
1215
|
+
onRemoveValue: (value: string) => void;
|
|
1216
|
+
/** 모든 값 제거 */
|
|
1217
|
+
onClearAll: () => void;
|
|
1218
|
+
disabled?: boolean;
|
|
1219
|
+
/** value -> display text 매핑 (trigger 태그 표시용) */
|
|
1220
|
+
labelMap: Map<string, string>;
|
|
1221
|
+
registerLabel: (value: string, label: string) => void;
|
|
1222
|
+
/** 인라인 검색어 (trigger input과 content cmdk 필터 간 공유) */
|
|
1223
|
+
searchTerm: string;
|
|
1224
|
+
setSearchTerm: (term: string) => void;
|
|
1225
|
+
}
|
|
1226
|
+
interface MultiSelectProps$1 {
|
|
1227
|
+
value?: string[];
|
|
1228
|
+
defaultValue?: string[];
|
|
1229
|
+
onValueChange?: (values: string[]) => void;
|
|
1230
|
+
open?: boolean;
|
|
1231
|
+
defaultOpen?: boolean;
|
|
1232
|
+
onOpenChange?: (open: boolean) => void;
|
|
1233
|
+
/**
|
|
1234
|
+
* 트리거 input / Content 의 검색어가 변경될 때 호출.
|
|
1235
|
+
* typing 외에도 토글/popup close 시 빈 문자열로 reset 될 때도 호출됨.
|
|
1236
|
+
*/
|
|
1237
|
+
onSearchChange?: (value: string) => void;
|
|
1238
|
+
disabled?: boolean;
|
|
1239
|
+
/** root container 에 적용할 추가 className. FormControl 의 maxWidth 가 여기에 주입된다. */
|
|
1240
|
+
className?: string;
|
|
1241
|
+
children: React$1.ReactNode;
|
|
1242
|
+
}
|
|
1243
|
+
interface MultiSelectTriggerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof selectTriggerVariants> {
|
|
1244
|
+
/** Floating label 텍스트. 지정 시 floating label 모드 활성화 */
|
|
1245
|
+
label?: string;
|
|
1246
|
+
/** 필수 입력 표시 (*). label과 함께 사용 */
|
|
1247
|
+
required?: boolean;
|
|
1248
|
+
/** 값이 없을 때 표시할 placeholder */
|
|
1249
|
+
placeholder?: string;
|
|
1250
|
+
/** 입력 영역 좌측 아이콘 */
|
|
1251
|
+
elemBeforeInput?: React$1.ReactNode;
|
|
1252
|
+
/** 입력 영역 우측 아이콘 (chevron 앞) */
|
|
1253
|
+
elemAfterInput?: React$1.ReactNode;
|
|
1254
|
+
}
|
|
1255
|
+
interface MultiSelectContentProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
1256
|
+
/** Popover 정렬 */
|
|
1257
|
+
align?: 'start' | 'center' | 'end';
|
|
1258
|
+
/** Popover 오프셋 (px) */
|
|
1259
|
+
sideOffset?: number;
|
|
1260
|
+
}
|
|
1261
|
+
interface MultiSelectItemProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
|
|
1262
|
+
value: string;
|
|
1263
|
+
disabled?: boolean;
|
|
1264
|
+
/** 아이템 하단 설명 텍스트 */
|
|
1265
|
+
description?: string;
|
|
1266
|
+
/** trigger 태그에 표시할 텍스트. 미지정 시 children에서 추출 */
|
|
1267
|
+
textValue?: string;
|
|
1268
|
+
/** title 과 description 사이에 표시할 메타 정보 배열 (라벨/구분자/값) */
|
|
1269
|
+
meta?: MetaItemProps[];
|
|
1270
|
+
/** checkbox indicator 다음, title row 앞에 렌더될 슬롯 */
|
|
1271
|
+
elemBefore?: React$1.ReactNode;
|
|
1272
|
+
/**
|
|
1273
|
+
* elemBefore 배치 방식.
|
|
1274
|
+
* - `'center'`(기본): 선행 컬럼 — 전체 높이 중앙 정렬(이름·meta 우측 이동)
|
|
1275
|
+
* - `'title'`: title 행 안 인라인 — 이름만 밀고 meta 는 콘텐츠 좌측 유지
|
|
1276
|
+
*/
|
|
1277
|
+
elemBeforeAlign?: 'center' | 'title';
|
|
1278
|
+
/** title 텍스트 우측에 렌더될 슬롯 */
|
|
1279
|
+
elemAfter?: React$1.ReactNode;
|
|
1280
|
+
children: React$1.ReactNode;
|
|
1281
|
+
}
|
|
1282
|
+
interface MultiSelectInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
|
|
1283
|
+
onChange?: (value: string) => void;
|
|
1284
|
+
}
|
|
1285
|
+
interface MultiSelectGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
1286
|
+
/** 그룹 제목 (cmdk Group heading 으로 렌더) */
|
|
1287
|
+
heading?: React$1.ReactNode;
|
|
1288
|
+
children: React$1.ReactNode;
|
|
1289
|
+
}
|
|
1290
|
+
interface MultiSelectLoadingProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
1291
|
+
children?: React$1.ReactNode;
|
|
1292
|
+
}
|
|
1293
|
+
interface MultiSelectEmptyProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
1294
|
+
children?: React$1.ReactNode;
|
|
1295
|
+
}
|
|
1296
|
+
type MultiSelectSeparatorProps = React$1.HTMLAttributes<HTMLDivElement>;
|
|
1297
|
+
|
|
1298
|
+
/**
|
|
1299
|
+
* 드롭다운에서 여러 개를 고르는 폼 입력. 선택한 항목은 칩으로 보여 준다.
|
|
1300
|
+
*
|
|
1301
|
+
* 언제 쓰나: 태그·권한·대상 목록처럼 0개 이상을 고르는 폼 필드. 구성은 Select 와 같다(MultiSelectTrigger·Content·Item).
|
|
1302
|
+
* 언제 안 쓰나: 하나만 고르는 경우(→ Select), 선택지가 적어 한눈에 보여야 하는 경우(→ Checkbox 묶음), 목록 화면 필터(→ TableFilterMultiSelect).
|
|
1303
|
+
* 대신/함께: 칩 라벨도 마운트된 아이템에서 얻으므로 미로드 값은 `useMultiSelectContext().registerLabel` 로 등록한다.
|
|
1304
|
+
*/
|
|
1305
|
+
declare function MultiSelect$1({ value: controlledValue, defaultValue, onValueChange, open: controlledOpen, defaultOpen, onOpenChange, onSearchChange, disabled, className, children, }: MultiSelectProps$1): react_jsx_runtime.JSX.Element;
|
|
1306
|
+
|
|
1307
|
+
declare const MultiSelectContent: React$1.ForwardRefExoticComponent<MultiSelectContentProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1308
|
+
|
|
1309
|
+
declare const MultiSelectEmpty: React$1.ForwardRefExoticComponent<MultiSelectEmptyProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1310
|
+
|
|
1311
|
+
declare const MultiSelectGroup: React$1.ForwardRefExoticComponent<MultiSelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1312
|
+
|
|
1313
|
+
declare const MultiSelectInput: React$1.ForwardRefExoticComponent<MultiSelectInputProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
1314
|
+
|
|
1315
|
+
declare const MultiSelectItem: React$1.ForwardRefExoticComponent<MultiSelectItemProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1316
|
+
|
|
1317
|
+
declare const MultiSelectLoading: React$1.ForwardRefExoticComponent<MultiSelectLoadingProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1318
|
+
|
|
1319
|
+
declare const MultiSelectSeparator: React$1.ForwardRefExoticComponent<MultiSelectSeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1320
|
+
|
|
1321
|
+
declare const MultiSelectTrigger: React$1.ForwardRefExoticComponent<MultiSelectTriggerProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1322
|
+
|
|
1323
|
+
declare function useMultiSelectContext(): MultiSelectContextValue;
|
|
1324
|
+
|
|
1325
|
+
/**
|
|
1326
|
+
* 드롭다운에서 하나를 고르는 폼 입력. 선택지가 정해져 있고 5개 이상일 때 쓴다.
|
|
1327
|
+
*
|
|
1328
|
+
* 언제 쓰나: 폼 안에서 `FormControl` 아래 `Select` > `SelectTrigger`(label·required) + `SelectContent` > `SelectItem`. 항목이 많으면 `SelectInput` 으로 검색, 비동기 목록은 `SelectLoading`·`SelectEmpty`.
|
|
1329
|
+
* 언제 안 쓰나: 선택지 2~4개(→ RadioGroup·RadioSection), 여러 개 선택(→ MultiSelect), 목록 화면 상단 필터(→ TableFilterSingleSelect), 켜고 끄기(→ Switch).
|
|
1330
|
+
* 대신/함께: 트리거 라벨은 `SelectItem` 에서 얻는다 — 닫혀 있어도 항목이 이름을 등록하므로 미리 정한 값도 펼치기 전에 이름으로 보인다. 목록에 아직 없는 값(비동기로 오는 항목)만 `useSelectContext().registerLabel` 로 미리 등록한다.
|
|
1331
|
+
*/
|
|
1332
|
+
declare function Select({ value: controlledValue, defaultValue, onValueChange, open: controlledOpen, defaultOpen, onOpenChange, disabled, className, children, }: SelectProps): react_jsx_runtime.JSX.Element;
|
|
1333
|
+
|
|
1334
|
+
declare const SelectContent: React$1.ForwardRefExoticComponent<SelectContentProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1335
|
+
|
|
1336
|
+
declare const SelectEmpty: React$1.ForwardRefExoticComponent<SelectEmptyProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1337
|
+
|
|
1338
|
+
declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1339
|
+
|
|
1340
|
+
declare const SelectInput: React$1.ForwardRefExoticComponent<SelectInputProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
1341
|
+
|
|
1342
|
+
declare const SelectItem: React$1.ForwardRefExoticComponent<SelectItemProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1343
|
+
|
|
1344
|
+
declare const SelectLoading: React$1.ForwardRefExoticComponent<SelectLoadingProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1345
|
+
|
|
1346
|
+
interface SelectRadioGroupProps extends React$1.ComponentPropsWithoutRef<typeof Command$1.Group> {
|
|
1347
|
+
children: React$1.ReactNode;
|
|
1348
|
+
}
|
|
1349
|
+
declare const SelectRadioGroup: React$1.ForwardRefExoticComponent<SelectRadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1350
|
+
|
|
1351
|
+
declare const SelectRadioItem: React$1.ForwardRefExoticComponent<SelectRadioItemProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1352
|
+
|
|
1353
|
+
declare const SelectSeparator: React$1.ForwardRefExoticComponent<SelectSeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1354
|
+
|
|
1355
|
+
declare function SelectValue({ placeholder }: SelectValueProps): react_jsx_runtime.JSX.Element;
|
|
1356
|
+
|
|
1357
|
+
declare function useSelectContext(): SelectContextValue;
|
|
1358
|
+
|
|
1359
|
+
declare const Separator: React$1.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1360
|
+
|
|
1361
|
+
type SidebarContextType = {
|
|
1362
|
+
isOpen: boolean;
|
|
1363
|
+
toggle: () => void;
|
|
1364
|
+
};
|
|
1365
|
+
type SidebarProviderProps = {
|
|
1366
|
+
children: React$1.ReactNode;
|
|
1367
|
+
defaultOpen?: boolean;
|
|
1368
|
+
open?: boolean;
|
|
1369
|
+
onOpenChange?: (open: boolean) => void;
|
|
1370
|
+
};
|
|
1371
|
+
declare function SidebarProvider({ children, defaultOpen, open: controlledOpen, onOpenChange, }: SidebarProviderProps): react_jsx_runtime.JSX.Element;
|
|
1372
|
+
declare function useSidebar(): SidebarContextType;
|
|
1373
|
+
declare const Sidebar: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & {
|
|
1374
|
+
top?: number;
|
|
1375
|
+
openWidth?: number;
|
|
1376
|
+
closedWidth?: number;
|
|
1377
|
+
} & React$1.RefAttributes<HTMLElement>>;
|
|
1378
|
+
declare const SidebarHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
|
|
1379
|
+
avatar?: string;
|
|
1380
|
+
avatarColor?: string;
|
|
1381
|
+
title?: string;
|
|
1382
|
+
description?: string;
|
|
1383
|
+
openLabel?: string;
|
|
1384
|
+
closeLabel?: string;
|
|
1385
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
1386
|
+
declare const SidebarToggle: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
|
|
1387
|
+
openLabel?: string;
|
|
1388
|
+
closeLabel?: string;
|
|
1389
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
1390
|
+
declare const SidebarContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
|
|
1391
|
+
declare const SidebarSection: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
|
|
1392
|
+
title?: string;
|
|
1393
|
+
collapsible?: boolean;
|
|
1394
|
+
defaultOpen?: boolean;
|
|
1395
|
+
open?: boolean;
|
|
1396
|
+
onOpenChange?: (open: boolean) => void;
|
|
1397
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
1398
|
+
declare const SidebarMenuItem: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLLIElement> & {
|
|
1399
|
+
icon?: string;
|
|
1400
|
+
label: string;
|
|
1401
|
+
isActive?: boolean;
|
|
1402
|
+
asChild?: boolean;
|
|
1403
|
+
} & React$1.RefAttributes<HTMLLIElement>>;
|
|
1404
|
+
declare const SidebarFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1405
|
+
|
|
1406
|
+
declare function TableSkeleton({ columnDefs, rowLength, rowHeight, headerHeight, selectionColumnWidth, }: {
|
|
1407
|
+
columnDefs?: ColDef[];
|
|
1408
|
+
rowLength?: number;
|
|
1409
|
+
rowHeight?: number;
|
|
1410
|
+
headerHeight?: number;
|
|
1411
|
+
selectionColumnWidth?: number;
|
|
1412
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1413
|
+
|
|
1414
|
+
declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
1415
|
+
|
|
1416
|
+
/**
|
|
1417
|
+
* 눈금/라벨 위치 지정.
|
|
1418
|
+
* - 숫자 `25` → 그 값 위치에 dot + 숫자 라벨 "25"
|
|
1419
|
+
* - `{ value, label }` → dot + 커스텀 라벨(ReactNode)
|
|
1420
|
+
* - `{ value }`(label 생략) → dot만(discrete) / 아무것도 안 그림(continuous)
|
|
1421
|
+
*/
|
|
1422
|
+
type RangeMark = number | {
|
|
1423
|
+
value: number;
|
|
1424
|
+
label?: React$1.ReactNode;
|
|
1425
|
+
};
|
|
1426
|
+
|
|
1427
|
+
interface RangeProps {
|
|
1428
|
+
min?: number;
|
|
1429
|
+
max?: number;
|
|
1430
|
+
step?: number;
|
|
1431
|
+
/** controlled 값 */
|
|
1432
|
+
value?: number;
|
|
1433
|
+
/** uncontrolled 초기값 */
|
|
1434
|
+
defaultValue?: number;
|
|
1435
|
+
onValueChange?: (value: number) => void;
|
|
1436
|
+
/** ±버튼·숫자입력 모서리 형태 (트랙/썸/눈금엔 영향 없음) */
|
|
1437
|
+
shape?: 'rounded' | 'normal' | 'angled';
|
|
1438
|
+
/** discrete: step 눈금/숫자, continuous: 양끝 라벨만 */
|
|
1439
|
+
type?: 'discrete' | 'continuous';
|
|
1440
|
+
disabled?: boolean;
|
|
1441
|
+
/** ± 스테퍼 버튼 표시 (기본 true) */
|
|
1442
|
+
hasButtonControl?: boolean;
|
|
1443
|
+
/** 숫자 입력박스 표시 (기본 true) */
|
|
1444
|
+
hasCustomInput?: boolean;
|
|
1445
|
+
/** 눈금 숫자/양끝 라벨 표시 (기본 true) */
|
|
1446
|
+
showLabels?: boolean;
|
|
1447
|
+
/** 명시적 눈금/라벨 위치. 지정 시 step 기반 기본 눈금을 대체 */
|
|
1448
|
+
marks?: RangeMark[];
|
|
1449
|
+
className?: string;
|
|
1450
|
+
/** 슬라이더 thumb 과 숫자 입력의 접근 가능한 이름 (예: '학습률') */
|
|
1451
|
+
'aria-label'?: string;
|
|
1452
|
+
/** 외부 라벨 요소의 id. 지정 시 thumb 과 숫자 입력이 그 요소로 이름을 얻는다 */
|
|
1453
|
+
'aria-labelledby'?: string;
|
|
1454
|
+
/** 숫자 입력의 name (폼 전송용) */
|
|
1455
|
+
name?: string;
|
|
1456
|
+
}
|
|
1457
|
+
/**
|
|
1458
|
+
* Figma "Range" 합성 컴포넌트 — ± 스테퍼(IconButton) + 슬라이더(RangeSlider) + 숫자 입력박스(DS TextField).
|
|
1459
|
+
* 숫자 입력 검증은 useNumberInput 훅이 담당. 단일값 전용 — 두 thumb 범위는 저수준 `RangeSlider`를 직접 쓴다.
|
|
1460
|
+
*/
|
|
1461
|
+
declare const Range: React$1.ForwardRefExoticComponent<RangeProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1462
|
+
|
|
1463
|
+
type RadixRootProps = React$1.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>;
|
|
1464
|
+
interface RangeSliderProps extends Omit<RadixRootProps, 'children'> {
|
|
1465
|
+
/** discrete: step마다 눈금/숫자, continuous: 양끝 라벨만 */
|
|
1466
|
+
type?: 'discrete' | 'continuous';
|
|
1467
|
+
/** 눈금 숫자/양끝 라벨 표시 여부 */
|
|
1468
|
+
showLabels?: boolean;
|
|
1469
|
+
/** 명시적 눈금/라벨 위치. 지정 시 step 기반 기본 눈금을 대체(discrete/continuous 공통) */
|
|
1470
|
+
marks?: RangeMark[];
|
|
1471
|
+
}
|
|
1472
|
+
/**
|
|
1473
|
+
* 저수준 슬라이더 파트(Radix 기반). Track + 채움(Range) + thumb 상태머신 + 선택적 discrete/continuous 라벨.
|
|
1474
|
+
* thumb 상태: default(primary30) → hover(primary40) → press(primary50) → focus(+ring) → disabled(secondary50).
|
|
1475
|
+
* 단일값/범위([lo,hi]) 모두 지원(value 배열 길이로 thumb 개수 결정).
|
|
1476
|
+
*/
|
|
1477
|
+
declare const RangeSlider: React$1.ForwardRefExoticComponent<RangeSliderProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
1478
|
+
|
|
1479
|
+
interface RangeBounds {
|
|
1480
|
+
min: number;
|
|
1481
|
+
max: number;
|
|
1482
|
+
step: number;
|
|
1483
|
+
}
|
|
1484
|
+
/** step의 소수 자릿수 — 부동소수 잔차(0.1+0.2 등) 보정에 사용 */
|
|
1485
|
+
declare function getDecimals(step: number): number;
|
|
1486
|
+
declare function clamp(value: number, min: number, max: number): number;
|
|
1487
|
+
/** step 격자에 스냅(min 기준 반올림). step<=0이면 스냅하지 않음(continuous) */
|
|
1488
|
+
declare function snap(value: number, min: number, step: number): number;
|
|
1489
|
+
/** 부동소수 잔차 제거 */
|
|
1490
|
+
declare function fixPrecision(value: number, step: number): number;
|
|
1491
|
+
/** clamp → snap → 정밀도 보정 → 다시 clamp(스냅이 max를 넘길 수 있어 재clamp) */
|
|
1492
|
+
declare function normalize(value: number, { min, max, step }: RangeBounds): number;
|
|
1493
|
+
interface UseRangeValueOptions extends RangeBounds {
|
|
1494
|
+
/** controlled 값 */
|
|
1495
|
+
value?: number;
|
|
1496
|
+
/** uncontrolled 초기값 */
|
|
1497
|
+
defaultValue?: number;
|
|
1498
|
+
onValueChange?: (value: number) => void;
|
|
1499
|
+
}
|
|
1500
|
+
interface UseRangeValueReturn {
|
|
1501
|
+
value: number;
|
|
1502
|
+
setValue: (next: number) => void;
|
|
1503
|
+
increment: () => void;
|
|
1504
|
+
decrement: () => void;
|
|
1505
|
+
canIncrement: boolean;
|
|
1506
|
+
canDecrement: boolean;
|
|
1507
|
+
}
|
|
1508
|
+
/**
|
|
1509
|
+
* Range 합성 컴포넌트용 단일값 상태 훅.
|
|
1510
|
+
* controlled/uncontrolled를 모두 지원하며, 커밋 시 항상 clamp/snap/정밀도 보정을 적용한다.
|
|
1511
|
+
*/
|
|
1512
|
+
declare function useRangeValue({ value, defaultValue, min, max, step, onValueChange, }: UseRangeValueOptions): UseRangeValueReturn;
|
|
1513
|
+
|
|
1514
|
+
declare const sizeVariants: {
|
|
1515
|
+
small: number;
|
|
1516
|
+
medium: number;
|
|
1517
|
+
large: number;
|
|
1518
|
+
xlarge: number;
|
|
1519
|
+
};
|
|
1520
|
+
declare const spinnerVariants: (props?: ({
|
|
1521
|
+
variant?: "current" | "primary" | "info" | "warning" | "danger" | "auto" | "primaryBold" | "secondary" | "secondaryBold" | "dangerBold" | "warningBold" | "infoBold" | "successBadgeText" | null | undefined;
|
|
1522
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1523
|
+
interface SpinnerProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof spinnerVariants> {
|
|
1524
|
+
size?: keyof typeof sizeVariants;
|
|
1525
|
+
shape?: 'spinner' | 'dot';
|
|
1526
|
+
}
|
|
1527
|
+
declare function Spinner({ size, variant, shape, ...props }: SpinnerProps): JSX.Element;
|
|
1528
|
+
|
|
1529
|
+
declare const Stack: React__default.ForwardRefExoticComponent<{
|
|
1530
|
+
children?: React__default.ReactNode | undefined;
|
|
1531
|
+
} & React__default.HTMLAttributes<HTMLDivElement> & {
|
|
1532
|
+
direction?: "column-reverse" | "column" | "row-reverse" | "row";
|
|
1533
|
+
spacing?: number | string;
|
|
1534
|
+
justifyContent?: "center" | "end" | "start" | "flex-start" | "flex-end" | "space-around" | "space-between" | "space-evenly" | "stretch" | "normal";
|
|
1535
|
+
alignItems?: "center" | "end" | "start" | "flex-end" | "flex-start" | "stretch";
|
|
1536
|
+
as?: keyof JSX.IntrinsicElements;
|
|
1537
|
+
} & React__default.RefAttributes<HTMLDivElement>>;
|
|
1538
|
+
|
|
1539
|
+
type SwitchSize = 'small' | 'large';
|
|
1540
|
+
interface SwitchProps extends React$1.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
|
|
1541
|
+
size?: SwitchSize;
|
|
1542
|
+
showIcon?: boolean;
|
|
1543
|
+
}
|
|
1544
|
+
/**
|
|
1545
|
+
* 켜고 끄는 토글. 두 상태뿐인 설정에 쓴다 — 즉시 반영이든 폼 제출값이든.
|
|
1546
|
+
*
|
|
1547
|
+
* 언제 쓰나: 알림 켜기, 공개/비공개, 규칙 사용처럼 두 상태뿐인 설정. 폼 안에서는 `SwitchSection`(박스 + 제목·설명 + Switch)으로 둔다(2026-10-14, dl-ui-v3 ToggleField 관례 — 이전 "폼 제출값은 Checkbox" 규칙은 폐기).
|
|
1548
|
+
* 언제 안 쓰나: 여러 옵션 중 복수 선택(→ Checkbox·CheckboxSectionGroup), 세 가지 이상 상태(→ RadioGroup·RadioSectionGroup·Select).
|
|
1549
|
+
* 대신/함께: 라벨은 `Label` 로 연결하고, 상태 텍스트("켜짐")를 옆에 따로 두지 않는다.
|
|
1550
|
+
*/
|
|
1551
|
+
declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1552
|
+
|
|
1553
|
+
interface SwitchSectionProps extends Omit<React$1.ComponentPropsWithoutRef<typeof Switch>, 'title'> {
|
|
1554
|
+
/** 박스 안 왼쪽의 굵은 제목 (예: "규칙 사용") */
|
|
1555
|
+
title: React$1.ReactNode;
|
|
1556
|
+
/** 제목 아래 한 줄 설명 (예: "끄면 규칙은 저장되지만 알림을 보내지 않습니다") */
|
|
1557
|
+
description?: React$1.ReactNode;
|
|
1558
|
+
/** 박스(바깥 div)의 className. Switch 자체는 `switchClassName` */
|
|
1559
|
+
className?: string;
|
|
1560
|
+
switchClassName?: string;
|
|
1561
|
+
}
|
|
1562
|
+
/**
|
|
1563
|
+
* 토글 박스 — 테두리 상자 안에 제목·설명(왼쪽)과 Switch(오른쪽). dl-ui-v3 의 ToggleField(노트북 지원, 자동 갱신 등) 관례를 TDS 로 올린 것. 테두리·패딩·글자(제목 h5·설명 base·간격 4)는 RadioSection·CheckboxSection 카드와 같다 — 한 폼에 나란히 와도 한 가족으로 보이게.
|
|
1564
|
+
*
|
|
1565
|
+
* 언제 쓰나: 켜기/끄기 하나의 설정 — 즉시 반영이든 폼 제출값이든(규칙 사용, 실패 시 알림, 노트북 지원). 폼에서는 `FormField` 의 `field.value`·`field.onChange` 를 `checked`·`onCheckedChange` 에 연결하고 `FormControl` 로 감싼다(id·aria 가 Switch 에 간다).
|
|
1566
|
+
* 언제 안 쓰나: 여러 옵션 중 복수 선택(→ Checkbox·CheckboxSectionGroup), 세 가지 이상 상태(→ RadioSectionGroup·Select), 라벨만 있는 짧은 동의(→ Checkbox + Label).
|
|
1567
|
+
* 대신/함께: 제목을 누르면 Switch 가 눌린다(label htmlFor). 바깥 FormLabel 은 필드 이름("알림"), 박스 제목은 무엇을 켜는지("실패 시 이메일 알림 받기").
|
|
1568
|
+
*/
|
|
1569
|
+
declare const SwitchSection: React$1.ForwardRefExoticComponent<SwitchSectionProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1570
|
+
|
|
1571
|
+
/**
|
|
1572
|
+
* HTML table 기반의 가벼운 표. 정렬·컬럼 조작이 없는 소량 데이터 나열에 쓴다.
|
|
1573
|
+
*
|
|
1574
|
+
* 언제 쓰나: 상세 화면의 속성 표, 수십 행 이하의 고정 목록, 셀 안에 자유로운 마크업이 필요할 때. `TableHeader`·`TableRow`·`TableCell` 로 조립한다. 숫자 열(건수·비율·크기)은 `TableHead align='right'` — 폭 140 으로 고정되고 글자 열이 남는 폭을 가진다(표는 `table-fixed`, 다른 폭은 `className='w-…'`).
|
|
1575
|
+
* 언제 안 쓰나: 서버 페이징·정렬·컬럼 숨김·가상 스크롤이 필요한 목록(→ AgGridTable), 키-값 몇 줄(→ MetaItem).
|
|
1576
|
+
* 대신/함께: 페이지네이션은 `TablePagination` 안에 `Pagination`, 빈 상태는 행 하나로 직접 그린다.
|
|
1577
|
+
*/
|
|
1578
|
+
declare const Table: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableElement> & React$1.RefAttributes<HTMLTableElement>>;
|
|
1579
|
+
declare const tableHeaderVariant: (props?: ({
|
|
1580
|
+
spacing?: "normal" | "compact" | null | undefined;
|
|
1581
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1582
|
+
interface TableHeaderProps extends React$1.HTMLAttributes<HTMLTableSectionElement>, VariantProps<typeof tableHeaderVariant> {
|
|
1583
|
+
}
|
|
1584
|
+
declare const TableHeader: React$1.ForwardRefExoticComponent<TableHeaderProps & React$1.RefAttributes<HTMLTableSectionElement>>;
|
|
1585
|
+
declare const tableBodyVariant: (props?: ({
|
|
1586
|
+
spacing?: "normal" | "compact" | null | undefined;
|
|
1587
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1588
|
+
interface TableBodyProps extends React$1.HTMLAttributes<HTMLTableSectionElement>, VariantProps<typeof tableBodyVariant> {
|
|
1589
|
+
}
|
|
1590
|
+
declare const TableBody: React$1.ForwardRefExoticComponent<TableBodyProps & React$1.RefAttributes<HTMLTableSectionElement>>;
|
|
1591
|
+
declare const TablePagination: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
|
|
1592
|
+
declare const TableRow: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableRowElement> & React$1.RefAttributes<HTMLTableRowElement>>;
|
|
1593
|
+
/** 숫자 열 폭. 표가 `table-fixed` 라 폭 없는 열은 모두 같은 폭을 받아 숫자 열이 비어 보였다(2026-10-27 홀드아웃 13 layout 지적 "wide empty area") —
|
|
1594
|
+
* 오른쪽 정렬 열은 숫자 열로 보고 이 폭으로 고정한다(AgGridTable 의 number 열 기본 폭과 같음). 다른 폭은 `className='w-…'`·`style` 이 이긴다 */
|
|
1595
|
+
declare const NUMBER_COLUMN_CLASS = "w-[140px] whitespace-nowrap";
|
|
1596
|
+
declare const tableHeadVariant: (props?: ({
|
|
1597
|
+
align?: "left" | "right" | "center" | null | undefined;
|
|
1598
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1599
|
+
interface TableHeadProps extends Omit<React$1.ThHTMLAttributes<HTMLTableCellElement>, 'align'>, VariantProps<typeof tableHeadVariant> {
|
|
1600
|
+
}
|
|
1601
|
+
/** 표 머리글 칸. `align='right'`(또는 className `text-right`)인 열은 숫자 열로 보고 폭 140 으로 고정한다 — 글자 열이 남는 폭을 가진다.
|
|
1602
|
+
* 표 폭은 머리글 행이 정하므로(`table-fixed`) 숫자 열은 `align='right'` 를 머리글에 준다 */
|
|
1603
|
+
declare const TableHead: React$1.ForwardRefExoticComponent<TableHeadProps & React$1.RefAttributes<HTMLTableCellElement>>;
|
|
1604
|
+
declare const tableCellMasterVariant: (props?: ({
|
|
1605
|
+
align?: "left" | "right" | "center" | null | undefined;
|
|
1606
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1607
|
+
interface TableCellProps extends Omit<React$1.ThHTMLAttributes<HTMLTableCellElement>, 'align'>, VariantProps<typeof tableCellMasterVariant> {
|
|
1608
|
+
desc?: string;
|
|
1609
|
+
customElement?: string | JSX.Element;
|
|
1610
|
+
}
|
|
1611
|
+
/** `className` 의 `text-right`/`text-center` 를 `align` 으로 읽는다 — 셀 안쪽이 flex 래퍼라 text-align 만으로는 글자가 안 움직이는데,
|
|
1612
|
+
* AI 가 TableHead 처럼 `text-right` 를 쓴다(2026-10-27 홀드아웃 11: 머리글은 오른쪽·값은 왼쪽, 심판 3건). `align` prop 이 있으면 prop 이 우선 */
|
|
1613
|
+
declare function alignFromClassName(align: TableCellProps['align'], className: string | undefined): TableCellProps['align'];
|
|
1614
|
+
declare const TableCell: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
|
|
1615
|
+
declare function SortIcon({ direction }: {
|
|
1616
|
+
direction: false | 'asc' | 'desc';
|
|
1617
|
+
}): JSX.Element;
|
|
1618
|
+
|
|
1619
|
+
/**
|
|
1620
|
+
* 필터 타이틀
|
|
1621
|
+
*/
|
|
1622
|
+
interface FilterTitleType {
|
|
1623
|
+
title?: string;
|
|
1624
|
+
}
|
|
1625
|
+
declare function FilterTitle({ title }: FilterTitleType): react_jsx_runtime.JSX.Element;
|
|
1626
|
+
/**
|
|
1627
|
+
* 날짜 선택 옵션
|
|
1628
|
+
*/
|
|
1629
|
+
type DateRangeSelectProps = FilterTitleType & DateRangePresetsProps & {
|
|
1630
|
+
/** 컴포넌트의 각 부분에 대한 className 오버라이드 */
|
|
1631
|
+
className?: {
|
|
1632
|
+
button?: string;
|
|
1633
|
+
PopoverContent?: string;
|
|
1634
|
+
};
|
|
1635
|
+
label?: string;
|
|
1636
|
+
disabled?: boolean;
|
|
1637
|
+
};
|
|
1638
|
+
/**
|
|
1639
|
+
* 목록 필터의 기간 선택. 프리셋(오늘·7일·30일 등)을 함께 보여 준다. 폼 입력이면 DatePickerRange 를 쓴다.
|
|
1640
|
+
*/
|
|
1641
|
+
declare function TableFilterDateRangeSelect({ label, className, disabled, ...datePresetsProps }: DateRangeSelectProps): react_jsx_runtime.JSX.Element;
|
|
1642
|
+
/**
|
|
1643
|
+
* 날짜 선택 옵션
|
|
1644
|
+
*/
|
|
1645
|
+
type DateSelectProps = FilterTitleType & DatePresetsProps & {
|
|
1646
|
+
/** 컴포넌트의 각 부분에 대한 className 오버라이드 */
|
|
1647
|
+
className?: {
|
|
1648
|
+
button?: string;
|
|
1649
|
+
PopoverContent?: string;
|
|
1650
|
+
};
|
|
1651
|
+
label?: string;
|
|
1652
|
+
disabled?: boolean;
|
|
1653
|
+
};
|
|
1654
|
+
/**
|
|
1655
|
+
* 목록 필터의 날짜 선택(하루). 기간이면 TableFilterDateRangeSelect, 폼 입력이면 DatePicker 를 쓴다.
|
|
1656
|
+
*/
|
|
1657
|
+
declare function TableFilterDateSelect({ label, className, disabled, ...datePresetsProps }: DateSelectProps): react_jsx_runtime.JSX.Element;
|
|
1658
|
+
/**
|
|
1659
|
+
* 다중 선택 옵션
|
|
1660
|
+
*/
|
|
1661
|
+
type Option = {
|
|
1662
|
+
value: string;
|
|
1663
|
+
label: string;
|
|
1664
|
+
render?: ReactNode;
|
|
1665
|
+
};
|
|
1666
|
+
/**
|
|
1667
|
+
* MultiSelect 컴포넌트의 Props
|
|
1668
|
+
*/
|
|
1669
|
+
interface MultiSelectProps extends FilterTitleType {
|
|
1670
|
+
/** 선택 드롭다운에 표시될 옵션 배열 */
|
|
1671
|
+
options: Option[];
|
|
1672
|
+
/** 선택이 변경될 때 호출되는 콜백 함수 */
|
|
1673
|
+
onChange: (selected: string[]) => void;
|
|
1674
|
+
/** 초기 선택된 값들 */
|
|
1675
|
+
defaultValue?: string[];
|
|
1676
|
+
/** 현재 선택된 값들 (제어 컴포넌트로 사용 시) */
|
|
1677
|
+
value?: string[];
|
|
1678
|
+
/** 아무것도 고르지 않았을 때의 **값** 문구. `title` 이 있으면 트리거는 항상 "{title} · {값}"(예: 상태 · 전체)으로 그려지고, 이 값의 기본은 "전체". title 이 없으면 기본 "선택" */
|
|
1679
|
+
placeholder?: string;
|
|
1680
|
+
/** 사용 가능한 옵션이 없을 때 표시되는 텍스트 */
|
|
1681
|
+
emptyText?: string;
|
|
1682
|
+
/** 목록 안 '전체 선택' 항목의 텍스트. 트리거의 전체 상태 문구는 `placeholder`(기본 "전체", title 이 있으면 "{title} · 전체") 가 맡는다 */
|
|
1683
|
+
allText?: string;
|
|
1684
|
+
/** 컴포넌트의 각 부분에 대한 className 오버라이드 */
|
|
1685
|
+
className?: {
|
|
1686
|
+
button?: string;
|
|
1687
|
+
PopoverContent?: string;
|
|
1688
|
+
Command?: string;
|
|
1689
|
+
CommandInput?: string;
|
|
1690
|
+
CommandList?: string;
|
|
1691
|
+
CommandGroup?: string;
|
|
1692
|
+
CommandItem?: string;
|
|
1693
|
+
optionRender?: string;
|
|
1694
|
+
};
|
|
1695
|
+
/** 검색 입력창의 placeholder 텍스트 */
|
|
1696
|
+
searchPlaceholder?: string;
|
|
1697
|
+
/** 검색 입력창 표시 여부 */
|
|
1698
|
+
searchable?: boolean;
|
|
1699
|
+
/** 전체 선택 해제 허용 여부 (기본값: false) */
|
|
1700
|
+
allowEmpty?: boolean;
|
|
1701
|
+
/** 옵션 로딩 상태 */
|
|
1702
|
+
loading?: boolean;
|
|
1703
|
+
/** 로딩 상태에 표시할 텍스트 */
|
|
1704
|
+
loadingText?: string;
|
|
1705
|
+
}
|
|
1706
|
+
/**
|
|
1707
|
+
* 목록 화면 상단의 필터 드롭다운(복수 선택). 표의 결과를 거르는 조건에 쓴다.
|
|
1708
|
+
*
|
|
1709
|
+
* 언제 쓰나: PageHeader 의 필터 줄에서 상태·유형처럼 값 집합이 정해진 조건. 바뀌면 소비 앱이 1페이지로 되돌린다.
|
|
1710
|
+
* 언제 안 쓰나: 폼 입력값(→ Select·MultiSelect), 자유 텍스트 검색·컬럼별 조건(→ ColumnFilter), 날짜 범위(→ TableFilterDateRangeSelect).
|
|
1711
|
+
* 대신/함께: 하나만 고르는 조건은 TableFilterSingleSelect. 여러 필터를 한 번에 비우는 "필터 초기화" 링크를 같이 둔다.
|
|
1712
|
+
*/
|
|
1713
|
+
declare function MultiSelect({ title, options, defaultValue, value, onChange, placeholder: placeholderProp, emptyText, searchPlaceholder, allText, searchable, className, allowEmpty, loading, loadingText, }: MultiSelectProps): react_jsx_runtime.JSX.Element;
|
|
1714
|
+
/**
|
|
1715
|
+
* 단일 선택 옵션
|
|
1716
|
+
*/
|
|
1717
|
+
/**
|
|
1718
|
+
* MultiSelect 컴포넌트의 Props
|
|
1719
|
+
*/
|
|
1720
|
+
interface SingleSelectProps extends FilterTitleType {
|
|
1721
|
+
/** 선택 드롭다운에 표시될 옵션 배열 */
|
|
1722
|
+
options: Option[];
|
|
1723
|
+
/** 선택이 변경될 때 호출되는 콜백 함수 */
|
|
1724
|
+
onChange: (selected: Option | null) => void;
|
|
1725
|
+
/** 초기 선택된 값 */
|
|
1726
|
+
value?: string;
|
|
1727
|
+
/** 아무것도 고르지 않았을 때의 **값** 문구. `title` 이 있으면 트리거는 항상 "{title} · {값}"(예: 상태 · 전체)으로 그려지고, 이 값의 기본은 "전체". title 이 없으면 기본 "선택" */
|
|
1728
|
+
placeholder?: string;
|
|
1729
|
+
/** 사용 가능한 옵션이 없을 때 표시되는 텍스트 */
|
|
1730
|
+
emptyText?: string;
|
|
1731
|
+
/** '선택 안함' 옵션에 표시되는 텍스트 */
|
|
1732
|
+
allText?: string;
|
|
1733
|
+
/** '선택 안함' 옵션 표시 여부 */
|
|
1734
|
+
allTextVisible?: boolean;
|
|
1735
|
+
/** 컴포넌트의 각 부분에 대한 className 오버라이드 */
|
|
1736
|
+
className?: {
|
|
1737
|
+
button?: string;
|
|
1738
|
+
PopoverContent?: string;
|
|
1739
|
+
Command?: string;
|
|
1740
|
+
CommandInput?: string;
|
|
1741
|
+
CommandList?: string;
|
|
1742
|
+
CommandGroup?: string;
|
|
1743
|
+
CommandItem?: string;
|
|
1744
|
+
};
|
|
1745
|
+
/** 검색 입력창의 placeholder 텍스트 */
|
|
1746
|
+
searchPlaceholder?: string;
|
|
1747
|
+
/** 검색 입력창 표시 여부 */
|
|
1748
|
+
searchable?: boolean;
|
|
1749
|
+
/** 선택 시 자동으로 닫힘 여부 */
|
|
1750
|
+
closeOnSelect?: boolean;
|
|
1751
|
+
/** 옵션 로딩 상태 */
|
|
1752
|
+
loading?: boolean;
|
|
1753
|
+
/** 로딩 상태에 표시할 텍스트 */
|
|
1754
|
+
loadingText?: string;
|
|
1755
|
+
}
|
|
1756
|
+
/**
|
|
1757
|
+
* 목록 필터 드롭다운(단일 선택). 언제 쓰나·안 쓰나는 TableFilterMultiSelect 와 같고, 하나만 고르는 조건(상태 등)에 쓴다. 폼 입력이면 Select.
|
|
1758
|
+
*/
|
|
1759
|
+
declare function TableFilterSingleSelect({ title, options, value, onChange, placeholder: placeholderProp, emptyText, searchPlaceholder, allText, allTextVisible, searchable, className, closeOnSelect, loading, loadingText, }: SingleSelectProps): react_jsx_runtime.JSX.Element;
|
|
1760
|
+
|
|
1761
|
+
/** @deprecated `TableFilterSingleSelect` 를 사용하세요. 다음 메이저 버전에서 제거됩니다. */
|
|
1762
|
+
declare const SingleSelect: typeof TableFilterSingleSelect;
|
|
1763
|
+
/** @deprecated `TableFilterDateSelect` 를 사용하세요. 다음 메이저 버전에서 제거됩니다. */
|
|
1764
|
+
declare const DateSelect: typeof TableFilterDateSelect;
|
|
1765
|
+
/** @deprecated `TableFilterDateRangeSelect` 를 사용하세요. 다음 메이저 버전에서 제거됩니다. */
|
|
1766
|
+
declare const DateRangeSelect: typeof TableFilterDateRangeSelect;
|
|
1767
|
+
|
|
1768
|
+
type TabsContextType = {
|
|
1769
|
+
variant?: 'underline' | 'box';
|
|
1770
|
+
size?: 'medium' | 'large';
|
|
1771
|
+
};
|
|
1772
|
+
/**
|
|
1773
|
+
* 같은 대상의 여러 뷰를 전환하는 탭. 상세 화면의 섹션 전환에 쓴다.
|
|
1774
|
+
*
|
|
1775
|
+
* 언제 쓰나: 한 리소스의 개요·설정·로그처럼 같은 대상을 다른 관점으로 보는 2~6개 뷰. `TabsList` > `TabsTrigger` 와 `TabsContent` 로 조립한다.
|
|
1776
|
+
* 언제 안 쓰나: URL 이 바뀌는 페이지 이동(→ PageHeader 의 `tabs` 또는 내비게이션), 단계가 있는 흐름(→ 스텝 UI), 선택 입력(→ RadioGroup).
|
|
1777
|
+
* 대신/함께: 페이지 상단 탭은 PageHeader 가 그리므로 둘을 겹쳐 쓰지 않는다.
|
|
1778
|
+
*/
|
|
1779
|
+
declare function Tabs({ className, variant, size, ...props }: React$1.ComponentProps<typeof TabsPrimitive.Root> & TabsContextType): react_jsx_runtime.JSX.Element;
|
|
1780
|
+
declare const tabListVariants: (props?: ({
|
|
1781
|
+
variant?: "box" | "underline" | null | undefined;
|
|
1782
|
+
size?: "medium" | "large" | null | undefined;
|
|
1783
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1784
|
+
declare function TabsList({ className, variant: variantProp, size: sizeProp, ...props }: React$1.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabListVariants>): react_jsx_runtime.JSX.Element;
|
|
1785
|
+
declare function TabsTrigger({ className, ...props }: React$1.ComponentProps<typeof TabsPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
|
|
1786
|
+
declare function TabsContent({ className, ...props }: React$1.ComponentProps<typeof TabsPrimitive.Content>): react_jsx_runtime.JSX.Element;
|
|
1787
|
+
|
|
1788
|
+
declare const tagVariants: (props?: ({
|
|
1789
|
+
variant?: "primary" | "info" | "success" | "warning" | "danger" | "primaryBold" | "secondary" | "secondaryBold" | "dangerBold" | "warningBold" | "infoBold" | "etc" | "successBold" | "etcBold" | null | undefined;
|
|
1790
|
+
shape?: "rounded" | "normal" | null | undefined;
|
|
1791
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1792
|
+
interface TagProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof tagVariants> {
|
|
1793
|
+
/** 다른 요소로 렌더링 (예: `<a>` 링크). Radix Slot 패턴 */
|
|
1794
|
+
asChild?: boolean;
|
|
1795
|
+
/** 좌측 아이콘 영역. 16x16 크기로 렌더링됨 */
|
|
1796
|
+
elemBefore?: React$1.ReactNode;
|
|
1797
|
+
/** 닫기 버튼 콜백. 전달 시 우측에 닫기 아이콘 표시 */
|
|
1798
|
+
onRemove?: () => void;
|
|
1799
|
+
}
|
|
1800
|
+
/**
|
|
1801
|
+
* 붙이고 뗄 수 있는 라벨. 키워드·분류·선택된 항목을 나타낸다.
|
|
1802
|
+
*
|
|
1803
|
+
* 언제 쓰나: 태그 목록, MultiSelect 가 보여 주는 선택 항목, 필터 조건 칩. 제거가 가능하면 `onRemove`, 링크면 `asChild`.
|
|
1804
|
+
* 언제 안 쓰나: 시스템이 정하는 상태 표시(→ Badge), 행동 버튼(→ Button).
|
|
1805
|
+
* 대신/함께: `asChild` 와 `onRemove` 를 함께 쓰면 제거 버튼이 링크 밖 형제로 렌더된다(버튼 중첩 금지).
|
|
1806
|
+
*/
|
|
1807
|
+
declare function Tag({ className, variant, shape, asChild, elemBefore, onRemove, children, ...props }: TagProps): react_jsx_runtime.JSX.Element;
|
|
1808
|
+
|
|
1809
|
+
type TextareaProps = Omit<TextareaAutosizeProps, 'children'> & {
|
|
1810
|
+
/** @default 'standard' */
|
|
1811
|
+
appearance?: 'standard' | 'none';
|
|
1812
|
+
/** Floating label 텍스트 */
|
|
1813
|
+
label?: string;
|
|
1814
|
+
/** 라벨 필수 표시 (*) */
|
|
1815
|
+
required?: boolean;
|
|
1816
|
+
/** 에러 상태 */
|
|
1817
|
+
isInvalid?: boolean;
|
|
1818
|
+
/** 컨테이너 div에 적용할 추가 className */
|
|
1819
|
+
containerClassName?: string;
|
|
1820
|
+
/** 수동 리사이즈 허용 */
|
|
1821
|
+
resize?: boolean;
|
|
1822
|
+
};
|
|
1823
|
+
declare const Textarea: React$1.ForwardRefExoticComponent<Omit<TextareaAutosizeProps, "children"> & {
|
|
1824
|
+
/** @default 'standard' */
|
|
1825
|
+
appearance?: "standard" | "none";
|
|
1826
|
+
/** Floating label 텍스트 */
|
|
1827
|
+
label?: string;
|
|
1828
|
+
/** 라벨 필수 표시 (*) */
|
|
1829
|
+
required?: boolean;
|
|
1830
|
+
/** 에러 상태 */
|
|
1831
|
+
isInvalid?: boolean;
|
|
1832
|
+
/** 컨테이너 div에 적용할 추가 className */
|
|
1833
|
+
containerClassName?: string;
|
|
1834
|
+
/** 수동 리사이즈 허용 */
|
|
1835
|
+
resize?: boolean;
|
|
1836
|
+
} & React$1.RefAttributes<HTMLTextAreaElement>>;
|
|
1837
|
+
|
|
1838
|
+
type TimeValue24 = string;
|
|
1839
|
+
type TimeValue12 = {
|
|
1840
|
+
hour: number;
|
|
1841
|
+
minute: number;
|
|
1842
|
+
period: 'AM' | 'PM';
|
|
1843
|
+
};
|
|
1844
|
+
type HourType = '24hrs' | '12hrs';
|
|
1845
|
+
interface TimePickerBaseProps {
|
|
1846
|
+
/** 플레이스홀더 텍스트 */
|
|
1847
|
+
placeholder?: string;
|
|
1848
|
+
/** 비활성 상태 */
|
|
1849
|
+
disabled?: boolean;
|
|
1850
|
+
/** 에러/유효하지 않은 상태 */
|
|
1851
|
+
isInvalid?: boolean;
|
|
1852
|
+
/** Floating label 텍스트 */
|
|
1853
|
+
label?: string;
|
|
1854
|
+
/** @default 'standard' */
|
|
1855
|
+
appearance?: 'standard' | 'none';
|
|
1856
|
+
/** 라벨 필수 표시 (*) */
|
|
1857
|
+
required?: boolean;
|
|
1858
|
+
/** 분 간격. @default 5 */
|
|
1859
|
+
minuteStep?: number;
|
|
1860
|
+
/** 클래스 오버라이드. `trigger` = 트리거 틀(기본 폭 160px, 12시간 180px — 폼 칸을 채우려면 `'w-full'`), `popoverContent` = 시·분 팝오버 */
|
|
1861
|
+
classNames?: {
|
|
1862
|
+
trigger?: string;
|
|
1863
|
+
popoverContent?: string;
|
|
1864
|
+
};
|
|
1865
|
+
}
|
|
1866
|
+
type TimePickerProps = TimePickerBaseProps & ({
|
|
1867
|
+
hourType?: '24hrs';
|
|
1868
|
+
value?: TimeValue24;
|
|
1869
|
+
onChange?: (value: TimeValue24 | undefined) => void;
|
|
1870
|
+
} | {
|
|
1871
|
+
hourType: '12hrs';
|
|
1872
|
+
value?: TimeValue12;
|
|
1873
|
+
onChange?: (value: TimeValue12 | undefined) => void;
|
|
1874
|
+
});
|
|
1875
|
+
/**
|
|
1876
|
+
* 시각(시·분)을 고르는 입력. 트리거를 누르면 시·분 목록 팝오버가 열린다. `hourType` 으로 24시간·12시간.
|
|
1877
|
+
*
|
|
1878
|
+
* 언제 쓰나: 폼의 시각 필드(예약 시작·종료 시각, 실행 시각). 날짜와 함께면 `DatePicker` 옆에 둔다.
|
|
1879
|
+
* 언제 안 쓰나: 날짜만(→ DatePicker), 기간(→ DatePickerRange), 분 단위 지속 시간(→ TextField + 단위).
|
|
1880
|
+
* 대신/함께: 기본 폭은 160px(12시간 180px)이다. 폼 칸을 채우려면 `classNames={{ trigger: 'w-full' }}`(DatePicker 는 `classNames={{ button: 'w-full' }}`) — 좁은 고정 폭이 줄의 절반을 비워 감점됐다(2026-10-28 홀드아웃 14).
|
|
1881
|
+
*/
|
|
1882
|
+
declare function TimePicker(props: TimePickerProps): react_jsx_runtime.JSX.Element;
|
|
1883
|
+
|
|
1884
|
+
type ToastVariant = 'info' | 'success' | 'error' | 'warning';
|
|
1885
|
+
interface ToastProps {
|
|
1886
|
+
id: string | number;
|
|
1887
|
+
title: string;
|
|
1888
|
+
description?: string | null;
|
|
1889
|
+
variant?: ToastVariant;
|
|
1890
|
+
toastOptions?: ExternalToast;
|
|
1891
|
+
}
|
|
1892
|
+
declare function toast({ toastOptions, variant, ...toastData }: Omit<ToastProps, 'id'>): string | number;
|
|
1893
|
+
/**
|
|
1894
|
+
* 화면 모서리에 잠깐 떴다 사라지는 알림(sonner). 앱 루트에 한 번 두고 `toast()` 로 띄운다.
|
|
1895
|
+
*
|
|
1896
|
+
* 언제 쓰나: 저장·삭제 완료, 서버 오류처럼 지나가도 되는 결과 알림. 성공은 짧게, 오류는 원인 한 줄.
|
|
1897
|
+
* 언제 안 쓰나: 화면에 남아 있어야 하는 안내·오류(→ Alert), 사용자의 확인이 필요한 것(→ AlertDialog), 폼 필드 오류(→ FormMessage).
|
|
1898
|
+
* 대신/함께: `ThemeProvider` 안에 두어야 다크 모드를 따라간다.
|
|
1899
|
+
*/
|
|
1900
|
+
declare const Toaster: React__default.ForwardRefExoticComponent<Omit<sonner.ToasterProps & React__default.RefAttributes<HTMLElement>, "ref"> & React__default.RefAttributes<HTMLElement>>;
|
|
1901
|
+
|
|
1902
|
+
type Theme = 'light' | 'dark' | 'system';
|
|
1903
|
+
type ResolvedTheme = 'light' | 'dark';
|
|
1904
|
+
interface ThemeProviderProps {
|
|
1905
|
+
children: React$1.ReactNode;
|
|
1906
|
+
defaultTheme?: Theme;
|
|
1907
|
+
storageKey?: string;
|
|
1908
|
+
}
|
|
1909
|
+
interface ThemeContextValue {
|
|
1910
|
+
theme: Theme;
|
|
1911
|
+
resolvedTheme: ResolvedTheme;
|
|
1912
|
+
setTheme: (theme: Theme) => void;
|
|
1913
|
+
}
|
|
1914
|
+
declare function ThemeProvider({ children, defaultTheme, storageKey }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
|
|
1915
|
+
declare function useTheme(): ThemeContextValue;
|
|
1916
|
+
declare function useOptionalTheme(): ThemeContextValue | undefined;
|
|
1917
|
+
|
|
1918
|
+
declare const TooltipProvider: React$1.FC<TooltipPrimitive.TooltipProviderProps>;
|
|
1919
|
+
declare const Tooltip: React$1.FC<TooltipPrimitive.TooltipProps>;
|
|
1920
|
+
declare const TooltipTrigger: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1921
|
+
declare const TooltipContent: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1922
|
+
|
|
1923
|
+
type AgGridContextType = {
|
|
1924
|
+
containerHeight: number | string;
|
|
1925
|
+
containerStyle?: CSSProperties;
|
|
1926
|
+
isEmpty: boolean;
|
|
1927
|
+
tableProps: AgGridReactProps;
|
|
1928
|
+
ref: ForwardedRef<AgGridReact>;
|
|
1929
|
+
};
|
|
1930
|
+
declare const AgGridContext: React$1.Context<AgGridContextType>;
|
|
1931
|
+
|
|
1932
|
+
/** 정렬 컬럼 상태 반환
|
|
1933
|
+
* 사용 예시
|
|
1934
|
+
* onSortChanged={(e) => {
|
|
1935
|
+
* const value = getSortedColumnState(e)
|
|
1936
|
+
* console.log(value.value) // -name
|
|
1937
|
+
* }}
|
|
1938
|
+
*
|
|
1939
|
+
* 반환 값 예시
|
|
1940
|
+
* {
|
|
1941
|
+
* value: 'name' | '-name'
|
|
1942
|
+
* }
|
|
1943
|
+
*/
|
|
1944
|
+
declare function getSortedColumnState(event: SortChangedEvent<any, any>, defaultSort?: string): {
|
|
1945
|
+
value: string;
|
|
1946
|
+
};
|
|
1947
|
+
|
|
1948
|
+
/**
|
|
1949
|
+
* Please note:
|
|
1950
|
+
*
|
|
1951
|
+
* Translations are provided as an illustration only and are
|
|
1952
|
+
* not guaranteed to be accurate or error free.
|
|
1953
|
+
*
|
|
1954
|
+
* They are designed to show developers where to store their
|
|
1955
|
+
* chosen phrase or spelling variant in the target language.
|
|
1956
|
+
*/
|
|
1957
|
+
declare const AG_GRID_LOCALE_KR: {
|
|
1958
|
+
selectAll: string;
|
|
1959
|
+
selectAllSearchResults: string;
|
|
1960
|
+
addCurrentSelectionToFilter: string;
|
|
1961
|
+
searchOoo: string;
|
|
1962
|
+
blanks: string;
|
|
1963
|
+
noMatches: string;
|
|
1964
|
+
filterOoo: string;
|
|
1965
|
+
equals: string;
|
|
1966
|
+
notEqual: string;
|
|
1967
|
+
blank: string;
|
|
1968
|
+
notBlank: string;
|
|
1969
|
+
empty: string;
|
|
1970
|
+
lessThan: string;
|
|
1971
|
+
greaterThan: string;
|
|
1972
|
+
lessThanOrEqual: string;
|
|
1973
|
+
greaterThanOrEqual: string;
|
|
1974
|
+
inRange: string;
|
|
1975
|
+
inRangeStart: string;
|
|
1976
|
+
inRangeEnd: string;
|
|
1977
|
+
contains: string;
|
|
1978
|
+
notContains: string;
|
|
1979
|
+
startsWith: string;
|
|
1980
|
+
endsWith: string;
|
|
1981
|
+
dateFormatOoo: string;
|
|
1982
|
+
before: string;
|
|
1983
|
+
after: string;
|
|
1984
|
+
andCondition: string;
|
|
1985
|
+
orCondition: string;
|
|
1986
|
+
applyFilter: string;
|
|
1987
|
+
resetFilter: string;
|
|
1988
|
+
clearFilter: string;
|
|
1989
|
+
cancelFilter: string;
|
|
1990
|
+
textFilter: string;
|
|
1991
|
+
numberFilter: string;
|
|
1992
|
+
dateFilter: string;
|
|
1993
|
+
setFilter: string;
|
|
1994
|
+
groupFilterSelect: string;
|
|
1995
|
+
advancedFilterContains: string;
|
|
1996
|
+
advancedFilterNotContains: string;
|
|
1997
|
+
advancedFilterTextEquals: string;
|
|
1998
|
+
advancedFilterTextNotEqual: string;
|
|
1999
|
+
advancedFilterStartsWith: string;
|
|
2000
|
+
advancedFilterEndsWith: string;
|
|
2001
|
+
advancedFilterBlank: string;
|
|
2002
|
+
advancedFilterNotBlank: string;
|
|
2003
|
+
advancedFilterEquals: string;
|
|
2004
|
+
advancedFilterNotEqual: string;
|
|
2005
|
+
advancedFilterGreaterThan: string;
|
|
2006
|
+
advancedFilterGreaterThanOrEqual: string;
|
|
2007
|
+
advancedFilterLessThan: string;
|
|
2008
|
+
advancedFilterLessThanOrEqual: string;
|
|
2009
|
+
advancedFilterTrue: string;
|
|
2010
|
+
advancedFilterFalse: string;
|
|
2011
|
+
advancedFilterAnd: string;
|
|
2012
|
+
advancedFilterOr: string;
|
|
2013
|
+
advancedFilterApply: string;
|
|
2014
|
+
advancedFilterBuilder: string;
|
|
2015
|
+
advancedFilterValidationMissingColumn: string;
|
|
2016
|
+
advancedFilterValidationMissingOption: string;
|
|
2017
|
+
advancedFilterValidationMissingValue: string;
|
|
2018
|
+
advancedFilterValidationInvalidColumn: string;
|
|
2019
|
+
advancedFilterValidationInvalidOption: string;
|
|
2020
|
+
advancedFilterValidationMissingQuote: string;
|
|
2021
|
+
advancedFilterValidationNotANumber: string;
|
|
2022
|
+
advancedFilterValidationInvalidDate: string;
|
|
2023
|
+
advancedFilterValidationMissingCondition: string;
|
|
2024
|
+
advancedFilterValidationJoinOperatorMismatch: string;
|
|
2025
|
+
advancedFilterValidationInvalidJoinOperator: string;
|
|
2026
|
+
advancedFilterValidationMissingEndBracket: string;
|
|
2027
|
+
advancedFilterValidationExtraEndBracket: string;
|
|
2028
|
+
advancedFilterValidationMessage: string;
|
|
2029
|
+
advancedFilterValidationMessageAtEnd: string;
|
|
2030
|
+
advancedFilterBuilderTitle: string;
|
|
2031
|
+
advancedFilterBuilderApply: string;
|
|
2032
|
+
advancedFilterBuilderCancel: string;
|
|
2033
|
+
advancedFilterBuilderAddButtonTooltip: string;
|
|
2034
|
+
advancedFilterBuilderRemoveButtonTooltip: string;
|
|
2035
|
+
advancedFilterBuilderMoveUpButtonTooltip: string;
|
|
2036
|
+
advancedFilterBuilderMoveDownButtonTooltip: string;
|
|
2037
|
+
advancedFilterBuilderAddJoin: string;
|
|
2038
|
+
advancedFilterBuilderAddCondition: string;
|
|
2039
|
+
advancedFilterBuilderSelectColumn: string;
|
|
2040
|
+
advancedFilterBuilderSelectOption: string;
|
|
2041
|
+
advancedFilterBuilderEnterValue: string;
|
|
2042
|
+
advancedFilterBuilderValidationAlreadyApplied: string;
|
|
2043
|
+
advancedFilterBuilderValidationIncomplete: string;
|
|
2044
|
+
advancedFilterBuilderValidationSelectColumn: string;
|
|
2045
|
+
advancedFilterBuilderValidationSelectOption: string;
|
|
2046
|
+
advancedFilterBuilderValidationEnterValue: string;
|
|
2047
|
+
columns: string;
|
|
2048
|
+
filters: string;
|
|
2049
|
+
pivotMode: string;
|
|
2050
|
+
groups: string;
|
|
2051
|
+
rowGroupColumnsEmptyMessage: string;
|
|
2052
|
+
values: string;
|
|
2053
|
+
valueColumnsEmptyMessage: string;
|
|
2054
|
+
pivots: string;
|
|
2055
|
+
pivotColumnsEmptyMessage: string;
|
|
2056
|
+
group: string;
|
|
2057
|
+
rowDragRow: string;
|
|
2058
|
+
rowDragRows: string;
|
|
2059
|
+
loadingOoo: string;
|
|
2060
|
+
loadingError: string;
|
|
2061
|
+
noRowsToShow: string;
|
|
2062
|
+
enabled: string;
|
|
2063
|
+
pinColumn: string;
|
|
2064
|
+
pinLeft: string;
|
|
2065
|
+
pinRight: string;
|
|
2066
|
+
noPin: string;
|
|
2067
|
+
valueAggregation: string;
|
|
2068
|
+
noAggregation: string;
|
|
2069
|
+
autosizeThisColumn: string;
|
|
2070
|
+
autosizeAllColumns: string;
|
|
2071
|
+
groupBy: string;
|
|
2072
|
+
ungroupBy: string;
|
|
2073
|
+
ungroupAll: string;
|
|
2074
|
+
addToValues: string;
|
|
2075
|
+
removeFromValues: string;
|
|
2076
|
+
addToLabels: string;
|
|
2077
|
+
removeFromLabels: string;
|
|
2078
|
+
resetColumns: string;
|
|
2079
|
+
expandAll: string;
|
|
2080
|
+
collapseAll: string;
|
|
2081
|
+
copy: string;
|
|
2082
|
+
ctrlC: string;
|
|
2083
|
+
ctrlX: string;
|
|
2084
|
+
copyWithHeaders: string;
|
|
2085
|
+
copyWithGroupHeaders: string;
|
|
2086
|
+
cut: string;
|
|
2087
|
+
paste: string;
|
|
2088
|
+
ctrlV: string;
|
|
2089
|
+
export: string;
|
|
2090
|
+
csvExport: string;
|
|
2091
|
+
excelExport: string;
|
|
2092
|
+
columnFilter: string;
|
|
2093
|
+
columnChooser: string;
|
|
2094
|
+
chooseColumns: string;
|
|
2095
|
+
sortAscending: string;
|
|
2096
|
+
sortDescending: string;
|
|
2097
|
+
sortUnSort: string;
|
|
2098
|
+
sum: string;
|
|
2099
|
+
first: string;
|
|
2100
|
+
last: string;
|
|
2101
|
+
min: string;
|
|
2102
|
+
max: string;
|
|
2103
|
+
none: string;
|
|
2104
|
+
count: string;
|
|
2105
|
+
avg: string;
|
|
2106
|
+
filteredRows: string;
|
|
2107
|
+
selectedRows: string;
|
|
2108
|
+
totalRows: string;
|
|
2109
|
+
totalAndFilteredRows: string;
|
|
2110
|
+
more: string;
|
|
2111
|
+
to: string;
|
|
2112
|
+
of: string;
|
|
2113
|
+
page: string;
|
|
2114
|
+
pageLastRowUnknown: string;
|
|
2115
|
+
nextPage: string;
|
|
2116
|
+
lastPage: string;
|
|
2117
|
+
firstPage: string;
|
|
2118
|
+
previousPage: string;
|
|
2119
|
+
pageSizeSelectorLabel: string;
|
|
2120
|
+
footerTotal: string;
|
|
2121
|
+
statusBarLastRowUnknown: string;
|
|
2122
|
+
pivotColumnGroupTotals: string;
|
|
2123
|
+
pivotChartAndPivotMode: string;
|
|
2124
|
+
pivotChart: string;
|
|
2125
|
+
chartRange: string;
|
|
2126
|
+
columnChart: string;
|
|
2127
|
+
groupedColumn: string;
|
|
2128
|
+
stackedColumn: string;
|
|
2129
|
+
normalizedColumn: string;
|
|
2130
|
+
barChart: string;
|
|
2131
|
+
groupedBar: string;
|
|
2132
|
+
stackedBar: string;
|
|
2133
|
+
normalizedBar: string;
|
|
2134
|
+
pieChart: string;
|
|
2135
|
+
pie: string;
|
|
2136
|
+
donut: string;
|
|
2137
|
+
lineChart: string;
|
|
2138
|
+
stackedLine: string;
|
|
2139
|
+
normalizedLine: string;
|
|
2140
|
+
xyChart: string;
|
|
2141
|
+
scatter: string;
|
|
2142
|
+
bubble: string;
|
|
2143
|
+
areaChart: string;
|
|
2144
|
+
area: string;
|
|
2145
|
+
stackedArea: string;
|
|
2146
|
+
normalizedArea: string;
|
|
2147
|
+
histogramChart: string;
|
|
2148
|
+
polarChart: string;
|
|
2149
|
+
radarLine: string;
|
|
2150
|
+
radarArea: string;
|
|
2151
|
+
nightingale: string;
|
|
2152
|
+
radialColumn: string;
|
|
2153
|
+
radialBar: string;
|
|
2154
|
+
statisticalChart: string;
|
|
2155
|
+
boxPlot: string;
|
|
2156
|
+
rangeBar: string;
|
|
2157
|
+
rangeArea: string;
|
|
2158
|
+
hierarchicalChart: string;
|
|
2159
|
+
treemap: string;
|
|
2160
|
+
sunburst: string;
|
|
2161
|
+
specializedChart: string;
|
|
2162
|
+
waterfall: string;
|
|
2163
|
+
heatmap: string;
|
|
2164
|
+
combinationChart: string;
|
|
2165
|
+
columnLineCombo: string;
|
|
2166
|
+
AreaColumnCombo: string;
|
|
2167
|
+
pivotChartTitle: string;
|
|
2168
|
+
rangeChartTitle: string;
|
|
2169
|
+
settings: string;
|
|
2170
|
+
data: string;
|
|
2171
|
+
format: string;
|
|
2172
|
+
categories: string;
|
|
2173
|
+
defaultCategory: string;
|
|
2174
|
+
series: string;
|
|
2175
|
+
switchCategorySeries: string;
|
|
2176
|
+
categoryValues: string;
|
|
2177
|
+
seriesLabels: string;
|
|
2178
|
+
aggregate: string;
|
|
2179
|
+
xyValues: string;
|
|
2180
|
+
paired: string;
|
|
2181
|
+
axis: string;
|
|
2182
|
+
xAxis: string;
|
|
2183
|
+
yAxis: string;
|
|
2184
|
+
polarAxis: string;
|
|
2185
|
+
radiusAxis: string;
|
|
2186
|
+
navigator: string;
|
|
2187
|
+
zoom: string;
|
|
2188
|
+
animation: string;
|
|
2189
|
+
crosshair: string;
|
|
2190
|
+
color: string;
|
|
2191
|
+
thickness: string;
|
|
2192
|
+
preferredLength: string;
|
|
2193
|
+
xType: string;
|
|
2194
|
+
axisType: string;
|
|
2195
|
+
automatic: string;
|
|
2196
|
+
category: string;
|
|
2197
|
+
number: string;
|
|
2198
|
+
time: string;
|
|
2199
|
+
timeFormat: string;
|
|
2200
|
+
autoRotate: string;
|
|
2201
|
+
labelRotation: string;
|
|
2202
|
+
circle: string;
|
|
2203
|
+
polygon: string;
|
|
2204
|
+
square: string;
|
|
2205
|
+
cross: string;
|
|
2206
|
+
diamond: string;
|
|
2207
|
+
plus: string;
|
|
2208
|
+
triangle: string;
|
|
2209
|
+
heart: string;
|
|
2210
|
+
orientation: string;
|
|
2211
|
+
fixed: string;
|
|
2212
|
+
parallel: string;
|
|
2213
|
+
perpendicular: string;
|
|
2214
|
+
radiusAxisPosition: string;
|
|
2215
|
+
ticks: string;
|
|
2216
|
+
gridLines: string;
|
|
2217
|
+
width: string;
|
|
2218
|
+
height: string;
|
|
2219
|
+
length: string;
|
|
2220
|
+
padding: string;
|
|
2221
|
+
spacing: string;
|
|
2222
|
+
chartStyle: string;
|
|
2223
|
+
title: string;
|
|
2224
|
+
chartTitles: string;
|
|
2225
|
+
chartTitle: string;
|
|
2226
|
+
chartSubtitle: string;
|
|
2227
|
+
horizontalAxisTitle: string;
|
|
2228
|
+
verticalAxisTitle: string;
|
|
2229
|
+
polarAxisTitle: string;
|
|
2230
|
+
titlePlaceholder: string;
|
|
2231
|
+
background: string;
|
|
2232
|
+
font: string;
|
|
2233
|
+
weight: string;
|
|
2234
|
+
top: string;
|
|
2235
|
+
right: string;
|
|
2236
|
+
bottom: string;
|
|
2237
|
+
left: string;
|
|
2238
|
+
labels: string;
|
|
2239
|
+
calloutLabels: string;
|
|
2240
|
+
sectorLabels: string;
|
|
2241
|
+
positionRatio: string;
|
|
2242
|
+
size: string;
|
|
2243
|
+
shape: string;
|
|
2244
|
+
minSize: string;
|
|
2245
|
+
maxSize: string;
|
|
2246
|
+
legend: string;
|
|
2247
|
+
position: string;
|
|
2248
|
+
markerSize: string;
|
|
2249
|
+
markerStroke: string;
|
|
2250
|
+
markerPadding: string;
|
|
2251
|
+
itemSpacing: string;
|
|
2252
|
+
itemPaddingX: string;
|
|
2253
|
+
itemPaddingY: string;
|
|
2254
|
+
layoutHorizontalSpacing: string;
|
|
2255
|
+
layoutVerticalSpacing: string;
|
|
2256
|
+
strokeWidth: string;
|
|
2257
|
+
offset: string;
|
|
2258
|
+
offsets: string;
|
|
2259
|
+
tooltips: string;
|
|
2260
|
+
callout: string;
|
|
2261
|
+
markers: string;
|
|
2262
|
+
shadow: string;
|
|
2263
|
+
blur: string;
|
|
2264
|
+
xOffset: string;
|
|
2265
|
+
yOffset: string;
|
|
2266
|
+
lineWidth: string;
|
|
2267
|
+
lineDash: string;
|
|
2268
|
+
lineDashOffset: string;
|
|
2269
|
+
scrollingZoom: string;
|
|
2270
|
+
scrollingStep: string;
|
|
2271
|
+
selectingZoom: string;
|
|
2272
|
+
durationMillis: string;
|
|
2273
|
+
crosshairLabel: string;
|
|
2274
|
+
crosshairSnap: string;
|
|
2275
|
+
normal: string;
|
|
2276
|
+
bold: string;
|
|
2277
|
+
italic: string;
|
|
2278
|
+
boldItalic: string;
|
|
2279
|
+
predefined: string;
|
|
2280
|
+
fillOpacity: string;
|
|
2281
|
+
strokeColor: string;
|
|
2282
|
+
strokeOpacity: string;
|
|
2283
|
+
miniChart: string;
|
|
2284
|
+
histogramBinCount: string;
|
|
2285
|
+
connectorLine: string;
|
|
2286
|
+
seriesItems: string;
|
|
2287
|
+
seriesItemType: string;
|
|
2288
|
+
seriesItemPositive: string;
|
|
2289
|
+
seriesItemNegative: string;
|
|
2290
|
+
seriesItemLabels: string;
|
|
2291
|
+
columnGroup: string;
|
|
2292
|
+
barGroup: string;
|
|
2293
|
+
pieGroup: string;
|
|
2294
|
+
lineGroup: string;
|
|
2295
|
+
scatterGroup: string;
|
|
2296
|
+
areaGroup: string;
|
|
2297
|
+
polarGroup: string;
|
|
2298
|
+
statisticalGroup: string;
|
|
2299
|
+
hierarchicalGroup: string;
|
|
2300
|
+
specializedGroup: string;
|
|
2301
|
+
combinationGroup: string;
|
|
2302
|
+
groupedColumnTooltip: string;
|
|
2303
|
+
stackedColumnTooltip: string;
|
|
2304
|
+
normalizedColumnTooltip: string;
|
|
2305
|
+
groupedBarTooltip: string;
|
|
2306
|
+
stackedBarTooltip: string;
|
|
2307
|
+
normalizedBarTooltip: string;
|
|
2308
|
+
pieTooltip: string;
|
|
2309
|
+
donutTooltip: string;
|
|
2310
|
+
lineTooltip: string;
|
|
2311
|
+
stackedLineTooltip: string;
|
|
2312
|
+
normalizedLineTooltip: string;
|
|
2313
|
+
groupedAreaTooltip: string;
|
|
2314
|
+
stackedAreaTooltip: string;
|
|
2315
|
+
normalizedAreaTooltip: string;
|
|
2316
|
+
scatterTooltip: string;
|
|
2317
|
+
bubbleTooltip: string;
|
|
2318
|
+
histogramTooltip: string;
|
|
2319
|
+
radialColumnTooltip: string;
|
|
2320
|
+
radialBarTooltip: string;
|
|
2321
|
+
radarLineTooltip: string;
|
|
2322
|
+
radarAreaTooltip: string;
|
|
2323
|
+
nightingaleTooltip: string;
|
|
2324
|
+
rangeBarTooltip: string;
|
|
2325
|
+
rangeAreaTooltip: string;
|
|
2326
|
+
boxPlotTooltip: string;
|
|
2327
|
+
treemapTooltip: string;
|
|
2328
|
+
sunburstTooltip: string;
|
|
2329
|
+
waterfallTooltip: string;
|
|
2330
|
+
heatmapTooltip: string;
|
|
2331
|
+
columnLineComboTooltip: string;
|
|
2332
|
+
areaColumnComboTooltip: string;
|
|
2333
|
+
customComboTooltip: string;
|
|
2334
|
+
innerRadius: string;
|
|
2335
|
+
startAngle: string;
|
|
2336
|
+
endAngle: string;
|
|
2337
|
+
reverseDirection: string;
|
|
2338
|
+
groupPadding: string;
|
|
2339
|
+
seriesPadding: string;
|
|
2340
|
+
tile: string;
|
|
2341
|
+
whisker: string;
|
|
2342
|
+
cap: string;
|
|
2343
|
+
capLengthRatio: string;
|
|
2344
|
+
labelPlacement: string;
|
|
2345
|
+
inside: string;
|
|
2346
|
+
outside: string;
|
|
2347
|
+
noDataToChart: string;
|
|
2348
|
+
pivotChartRequiresPivotMode: string;
|
|
2349
|
+
chartSettingsToolbarTooltip: string;
|
|
2350
|
+
chartLinkToolbarTooltip: string;
|
|
2351
|
+
chartUnlinkToolbarTooltip: string;
|
|
2352
|
+
chartDownloadToolbarTooltip: string;
|
|
2353
|
+
chartMenuToolbarTooltip: string;
|
|
2354
|
+
chartEdit: string;
|
|
2355
|
+
chartAdvancedSettings: string;
|
|
2356
|
+
chartLink: string;
|
|
2357
|
+
chartUnlink: string;
|
|
2358
|
+
chartDownload: string;
|
|
2359
|
+
histogramFrequency: string;
|
|
2360
|
+
seriesChartType: string;
|
|
2361
|
+
seriesType: string;
|
|
2362
|
+
secondaryAxis: string;
|
|
2363
|
+
seriesAdd: string;
|
|
2364
|
+
categoryAdd: string;
|
|
2365
|
+
bar: string;
|
|
2366
|
+
column: string;
|
|
2367
|
+
histogram: string;
|
|
2368
|
+
advancedSettings: string;
|
|
2369
|
+
direction: string;
|
|
2370
|
+
horizontal: string;
|
|
2371
|
+
vertical: string;
|
|
2372
|
+
seriesGroupType: string;
|
|
2373
|
+
groupedSeriesGroupType: string;
|
|
2374
|
+
stackedSeriesGroupType: string;
|
|
2375
|
+
normalizedSeriesGroupType: string;
|
|
2376
|
+
legendEnabled: string;
|
|
2377
|
+
invalidColor: string;
|
|
2378
|
+
groupedColumnFull: string;
|
|
2379
|
+
stackedColumnFull: string;
|
|
2380
|
+
normalizedColumnFull: string;
|
|
2381
|
+
groupedBarFull: string;
|
|
2382
|
+
stackedBarFull: string;
|
|
2383
|
+
normalizedBarFull: string;
|
|
2384
|
+
stackedAreaFull: string;
|
|
2385
|
+
normalizedAreaFull: string;
|
|
2386
|
+
customCombo: string;
|
|
2387
|
+
funnel: string;
|
|
2388
|
+
coneFunnel: string;
|
|
2389
|
+
pyramid: string;
|
|
2390
|
+
funnelGroup: string;
|
|
2391
|
+
funnelTooltip: string;
|
|
2392
|
+
coneFunnelTooltip: string;
|
|
2393
|
+
pyramidTooltip: string;
|
|
2394
|
+
dropOff: string;
|
|
2395
|
+
stageLabels: string;
|
|
2396
|
+
reverse: string;
|
|
2397
|
+
ariaAdvancedFilterBuilderItem: string;
|
|
2398
|
+
ariaAdvancedFilterBuilderItemValidation: string;
|
|
2399
|
+
ariaAdvancedFilterBuilderList: string;
|
|
2400
|
+
ariaAdvancedFilterBuilderFilterItem: string;
|
|
2401
|
+
ariaAdvancedFilterBuilderGroupItem: string;
|
|
2402
|
+
ariaAdvancedFilterBuilderColumn: string;
|
|
2403
|
+
ariaAdvancedFilterBuilderOption: string;
|
|
2404
|
+
ariaAdvancedFilterBuilderValueP: string;
|
|
2405
|
+
ariaAdvancedFilterBuilderJoinOperator: string;
|
|
2406
|
+
ariaAdvancedFilterInput: string;
|
|
2407
|
+
ariaChecked: string;
|
|
2408
|
+
ariaColumn: string;
|
|
2409
|
+
ariaColumnGroup: string;
|
|
2410
|
+
ariaColumnFiltered: string;
|
|
2411
|
+
ariaColumnSelectAll: string;
|
|
2412
|
+
ariaDateFilterInput: string;
|
|
2413
|
+
ariaDefaultListName: string;
|
|
2414
|
+
ariaFilterColumnsInput: string;
|
|
2415
|
+
ariaFilterFromValue: string;
|
|
2416
|
+
ariaFilterInput: string;
|
|
2417
|
+
ariaFilterList: string;
|
|
2418
|
+
ariaFilterToValue: string;
|
|
2419
|
+
ariaFilterValue: string;
|
|
2420
|
+
ariaFilterMenuOpen: string;
|
|
2421
|
+
ariaFilteringOperator: string;
|
|
2422
|
+
ariaHidden: string;
|
|
2423
|
+
ariaIndeterminate: string;
|
|
2424
|
+
ariaInputEditor: string;
|
|
2425
|
+
ariaMenuColumn: string;
|
|
2426
|
+
ariaFilterColumn: string;
|
|
2427
|
+
ariaRowDeselect: string;
|
|
2428
|
+
ariaHeaderSelection: string;
|
|
2429
|
+
ariaSelectAllCells: string;
|
|
2430
|
+
ariaRowSelectAll: string;
|
|
2431
|
+
ariaRowToggleSelection: string;
|
|
2432
|
+
ariaRowSelect: string;
|
|
2433
|
+
ariaRowSelectionDisabled: string;
|
|
2434
|
+
ariaSearch: string;
|
|
2435
|
+
ariaSortableColumn: string;
|
|
2436
|
+
ariaToggleVisibility: string;
|
|
2437
|
+
ariaToggleCellValue: string;
|
|
2438
|
+
ariaUnchecked: string;
|
|
2439
|
+
ariaVisible: string;
|
|
2440
|
+
ariaSearchFilterValues: string;
|
|
2441
|
+
ariaPageSizeSelectorLabel: string;
|
|
2442
|
+
ariaChartMenuClose: string;
|
|
2443
|
+
ariaChartSelected: string;
|
|
2444
|
+
ariaSkeletonCellLoadingFailed: string;
|
|
2445
|
+
ariaSkeletonCellLoading: string;
|
|
2446
|
+
ariaRowGroupDropZonePanelLabel: string;
|
|
2447
|
+
ariaValuesDropZonePanelLabel: string;
|
|
2448
|
+
ariaPivotDropZonePanelLabel: string;
|
|
2449
|
+
ariaDropZoneColumnComponentDescription: string;
|
|
2450
|
+
ariaDropZoneColumnValueItemDescription: string;
|
|
2451
|
+
ariaDropZoneColumnGroupItemDescription: string;
|
|
2452
|
+
ariaDropZoneColumnComponentAggFuncSeparator: string;
|
|
2453
|
+
ariaDropZoneColumnComponentSortAscending: string;
|
|
2454
|
+
ariaDropZoneColumnComponentSortDescending: string;
|
|
2455
|
+
ariaLabelDialog: string;
|
|
2456
|
+
ariaLabelColumnMenu: string;
|
|
2457
|
+
ariaLabelColumnFilter: string;
|
|
2458
|
+
ariaLabelCellEditor: string;
|
|
2459
|
+
ariaLabelSelectField: string;
|
|
2460
|
+
ariaLabelLoadingContextMenu: string;
|
|
2461
|
+
ariaLabelRichSelectField: string;
|
|
2462
|
+
ariaLabelRichSelectToggleSelection: string;
|
|
2463
|
+
ariaLabelRichSelectDeselectAllItems: string;
|
|
2464
|
+
ariaLabelRichSelectDeleteSelection: string;
|
|
2465
|
+
ariaLabelTooltip: string;
|
|
2466
|
+
ariaLabelContextMenu: string;
|
|
2467
|
+
ariaLabelSubMenu: string;
|
|
2468
|
+
ariaLabelAggregationFunction: string;
|
|
2469
|
+
ariaLabelAdvancedFilterAutocomplete: string;
|
|
2470
|
+
ariaLabelAdvancedFilterBuilderAddField: string;
|
|
2471
|
+
ariaLabelAdvancedFilterBuilderColumnSelectField: string;
|
|
2472
|
+
ariaLabelAdvancedFilterBuilderOptionSelectField: string;
|
|
2473
|
+
ariaLabelAdvancedFilterBuilderJoinSelectField: string;
|
|
2474
|
+
ariaColumnPanelList: string;
|
|
2475
|
+
ariaFilterPanelList: string;
|
|
2476
|
+
thousandSeparator: string;
|
|
2477
|
+
decimalSeparator: string;
|
|
2478
|
+
true: string;
|
|
2479
|
+
false: string;
|
|
2480
|
+
invalidDate: string;
|
|
2481
|
+
invalidNumber: string;
|
|
2482
|
+
january: string;
|
|
2483
|
+
february: string;
|
|
2484
|
+
march: string;
|
|
2485
|
+
april: string;
|
|
2486
|
+
may: string;
|
|
2487
|
+
june: string;
|
|
2488
|
+
july: string;
|
|
2489
|
+
august: string;
|
|
2490
|
+
september: string;
|
|
2491
|
+
october: string;
|
|
2492
|
+
november: string;
|
|
2493
|
+
december: string;
|
|
2494
|
+
timeFormatSlashesDDMMYYYY: string;
|
|
2495
|
+
timeFormatSlashesMMDDYYYY: string;
|
|
2496
|
+
timeFormatSlashesDDMMYY: string;
|
|
2497
|
+
timeFormatSlashesMMDDYY: string;
|
|
2498
|
+
timeFormatDotsDDMYY: string;
|
|
2499
|
+
timeFormatDotsMDDYY: string;
|
|
2500
|
+
timeFormatDashesYYYYMMDD: string;
|
|
2501
|
+
timeFormatSpacesDDMMMMYYYY: string;
|
|
2502
|
+
timeFormatHHMMSS: string;
|
|
2503
|
+
timeFormatHHMMSSAmPm: string;
|
|
2504
|
+
};
|
|
2505
|
+
|
|
2506
|
+
interface UseFloatingLabelOptions {
|
|
2507
|
+
/** Floating label 텍스트. 지정 시 floating label 모드 활성화 */
|
|
2508
|
+
label?: string;
|
|
2509
|
+
/** 값이 있는지 여부 */
|
|
2510
|
+
hasValue: boolean;
|
|
2511
|
+
/** 드롭다운 열림 여부 (Select 전용) */
|
|
2512
|
+
isOpen?: boolean;
|
|
2513
|
+
/** focus 여부 */
|
|
2514
|
+
isFocused?: boolean;
|
|
2515
|
+
/** 에러 상태 */
|
|
2516
|
+
isInvalid?: boolean;
|
|
2517
|
+
/** 비활성 상태 */
|
|
2518
|
+
isDisabled?: boolean;
|
|
2519
|
+
/** 'standard' | 'none' */
|
|
2520
|
+
appearance?: string;
|
|
2521
|
+
}
|
|
2522
|
+
interface UseFloatingLabelReturn {
|
|
2523
|
+
/** label이 활성화되었는지 */
|
|
2524
|
+
hasLabel: boolean;
|
|
2525
|
+
/** label이 위로 올라간 상태인지 */
|
|
2526
|
+
isFloating: boolean;
|
|
2527
|
+
/** 초기 마운트 이후인지 (transition 활성화 용도) */
|
|
2528
|
+
isMounted: boolean;
|
|
2529
|
+
/** label에 적용할 색상 클래스 */
|
|
2530
|
+
labelColorClass: string;
|
|
2531
|
+
/** notched outline border에 적용할 색상 클래스 */
|
|
2532
|
+
borderColorClass: string;
|
|
2533
|
+
/** notched outline border 두께가 두꺼운 상태인지 (focus/invalid/open → 2px) */
|
|
2534
|
+
isThickBorder: boolean;
|
|
2535
|
+
/** label 고유 ID (aria-labelledby용) */
|
|
2536
|
+
labelId: string;
|
|
2537
|
+
}
|
|
2538
|
+
declare function useFloatingLabel(options: UseFloatingLabelOptions): UseFloatingLabelReturn;
|
|
2539
|
+
|
|
2540
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
2541
|
+
|
|
2542
|
+
/**
|
|
2543
|
+
* 사용자가 입력한 텍스트를 표시용으로 정규화한다.
|
|
2544
|
+
* - 연속 공백은 보존(이 함수는 공백을 건드리지 않음 — `whitespace-pre*` 클래스가 담당)
|
|
2545
|
+
* - 줄바꿈 문자(`\n`, `\r`)는 단일 공백으로 대체하여 단어 경계를 보존하면서 줄바꿈을 제거.
|
|
2546
|
+
* HTML 의 inline whitespace 처리(`<p>foo↵bar</p>` 가 `"foo bar"` 로 렌더)와 동일한 의미.
|
|
2547
|
+
* 예: `"구\n름"` → `"구 름"`. 식별자 컬럼은 app 측 `normalizeWhitespace` 가 \s+ 를
|
|
2548
|
+
* 다시 단일 공백으로 축소하므로 이중 공백 걱정 없음.
|
|
2549
|
+
*
|
|
2550
|
+
* string / string 을 포함한 배열에만 적용되며, React 엘리먼트는 그대로 통과한다.
|
|
2551
|
+
*/
|
|
2552
|
+
declare function sanitizeUserText(node: React$1.ReactNode): React$1.ReactNode;
|
|
2553
|
+
|
|
2554
|
+
export { AG_GRID_LOCALE_KR, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AgGridContext, type AgGridContextType, Alert, AlertActions, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, BadgeProps, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardThumbnail, CardTitle, Checkbox, type CheckboxProps, CheckboxSection, CheckboxSectionGroup, type CheckboxSectionGroupProps, type CheckboxSectionProps, type ColumnDefinition, ColumnFilter, type ColumnFilterContextType, ColumnFilterInput, type ColumnFilterInputProps, ColumnFilterPopover, type ColumnFilterPopoverProps, type ColumnFilterProps, ColumnFilterTag, type ColumnFilterTagProps, type ColumnType, ColumnVisibilityFilter, type ColumnVisibilityFilterProps, type ColumnVisibilityOption, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DEFAULT_PARAMETER_TABLE_COLUMNS, DatePicker, type DatePickerProps, DatePickerRange, type DatePickerRangeProps, DatePresets, type DatePresetsProps, DateRangePresets, type DateRangePresetsProps, DateRangeSelect, DateSelect, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type EditingFilter, EmptyBoxIllustration, type EventLevel, EventList, type EventListItem, type EventListProps, type FilterCondition, Form, FormControl, FormDescription, type FormDescriptionProps, FormField, FormFooter, FormHeader, FormItem, FormLabel, FormMessage, FormSection, FormSectionLevelContext, FormValidMessage, type HourType, IconButton, type IconButtonProps, IconSelect, type IconSelectProps, Label, LucideIcon, type LucideIconProps, MetaGroup, type MetaGroupProps, MetaItem, type MetaItemProps, MetaList, type MetaListProps, MetaRow, type MetaRowProps, MultiSelect$1 as MultiSelect, MultiSelectContent, type MultiSelectContentProps, MultiSelectEmpty, type MultiSelectEmptyProps, MultiSelectGroup, type MultiSelectGroupProps, MultiSelectInput, type MultiSelectInputProps, MultiSelectItem, type MultiSelectItemProps, MultiSelectLoading, type MultiSelectLoadingProps, type MultiSelectProps$1 as MultiSelectProps, MultiSelectSeparator, type MultiSelectSeparatorProps, MultiSelectTrigger, type MultiSelectTriggerProps, NUMBER_COLUMN_CLASS, type NumberOperator, OPERATORS_BY_TYPE, OPERATOR_LABELS, type Operator, type OperatorOverridesByColumn, type OperatorOverridesByType, type Option, PageHeaderRefreshButton, type PageHeaderRefreshButtonProps, Pagination, PaginationContent, PaginationFirst, PaginationItem, PaginationLast, PaginationLink, PaginationNext, PaginationPrevious, type PaginationPropsType, PaginationWrapper, Panel, type PanelProps, ParameterTable, type ParameterTableCellErrors, type ParameterTableColumn, type ParameterTableProps, type ParameterTableRow, type ParameterTableSpacing, Popover, PopoverAnchor, PopoverContent, type PopoverPosition, PopoverTrigger, type PopoverType, Progress, type ProgressProps, Radio, RadioGroup, RadioGroupItem, RadioSection, RadioSectionGroup, type RadioSectionGroupProps, type RadioSectionProps, Range, type RangeBounds, type RangeMark, type RangeProps, RangeSlider, type RangeSliderProps, type ResolvedTheme, Select, SelectContent, type SelectContentProps, SelectEmpty, type SelectEmptyProps, SelectGroup, type SelectGroupProps, SelectInput, type SelectInputProps, SelectItem, type SelectItemProps, SelectLoading, type SelectLoadingProps, type SelectProps, SelectRadioGroup, SelectRadioItem, type SelectRadioItemProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, Separator, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenuItem, SidebarProvider, SidebarSection, SidebarToggle, SingleSelect, Skeleton, SortIcon, Spinner, type SpinnerProps, Stack, type StringOperator, Switch, SwitchSection, type SwitchSectionProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFilterDateRangeSelect, TableFilterDateSelect, MultiSelect as TableFilterMultiSelect, TableFilterSingleSelect, FilterTitle as TableFilterTitle, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, TablePagination, TableRow, TableSkeleton, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TextField, type TextFieldProps, Textarea, type TextareaProps, type Theme, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, TimePicker, type TimePickerProps, type TimeValue12, type TimeValue24, Toaster, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupMultipleProps, type ToggleGroupProps, type ToggleGroupSingleProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseFloatingLabelOptions, type UseFloatingLabelReturn, type UseRangeValueOptions, type UseRangeValueReturn, type ValueSuggestion, alignFromClassName, clamp, cn, fixPrecision, getDecimals, getPaginationRange, getSortedColumnState, normalize, sanitizeUserText, snap, tagVariants, toast, useColumnFilter, useFloatingLabel, useFormControlContext, useFormField, useMultiSelectContext, useOptionalTheme, useRangeValue, useSelectContext, useSidebar, useTheme };
|