@stn-uiux/pub-ui-react 0.1.57 → 0.1.59
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/README.md +2 -2
- package/dist/index.d.ts +811 -187
- package/dist/index.js +2448 -1669
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as react from 'react';
|
|
3
3
|
import react__default, { ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, HTMLAttributes, CSSProperties, ComponentPropsWithoutRef, ThHTMLAttributes, TdHTMLAttributes, FormHTMLAttributes, MouseEvent, SVGAttributes, ElementType } from 'react';
|
|
4
|
+
import { StnInputWidthValue } from '@stn-uiux/pub-ui/data/stnInputWidth';
|
|
4
5
|
export { resolveSystemIconSrcFromName, systemIconSrc } from '@stn-uiux/pub-ui/data/stnSystemIcons';
|
|
5
6
|
export { STN_PAGINATION_EXAMPLE, STN_PAGINATION_FIGMA, STN_PAGINATION_INTRO, STN_PAGINATION_REACT } from '@stn-uiux/pub-ui/data/stnPagination';
|
|
6
7
|
import { StnToastKind } from '@stn-uiux/pub-ui/data/stnToast';
|
|
7
8
|
export { STN_TOAST_ICON_SLUG } from '@stn-uiux/pub-ui/data/stnToast';
|
|
9
|
+
import { StnStatusDotState, StnStatusFlowStep } from '@stn-uiux/pub-ui/data/stnStatus';
|
|
8
10
|
import { StnCardVariant, StnCardRadius, StnCardPadding } from '@stn-uiux/pub-ui/data/stnCard';
|
|
9
11
|
import { StnChipGrade, StnChipBorderAccent } from '@stn-uiux/pub-ui/data/stnChip';
|
|
10
12
|
import { StnDropdownOption, StnDropdownSize, StnDropdownVariant, StnDropdownModifier, StnDropdownHelperTextPosition, StnDropdownDirection } from '@stn-uiux/pub-ui/data/stnDropdown';
|
|
11
13
|
export { STN_DROPDOWN_HTML_COUNTS, STN_DROPDOWN_INTRO, STN_DROPDOWN_INVENTORY, STN_DROPDOWN_MENU_INTRO, STN_DROPDOWN_MENU_USAGE, STN_DROPDOWN_SIZE_ROWS, STN_DROPDOWN_USAGE, StnDropdownHelperTextPosition, StnDropdownModifier, StnDropdownOption, StnDropdownSize, StnDropdownVariant } from '@stn-uiux/pub-ui/data/stnDropdown';
|
|
12
|
-
import { StnInputWidthValue } from '@stn-uiux/pub-ui/data/stnInputWidth';
|
|
13
14
|
import { StnTextFieldSize } from '@stn-uiux/pub-ui/data/stnTextField';
|
|
14
15
|
export { STN_TEXT_FIELD_FIGMA, STN_TEXT_FIELD_HTML, STN_TEXT_FIELD_INTRO, STN_TEXT_FIELD_SIZE_ROWS, STN_TEXT_FIELD_STATES, STN_TEXT_FIELD_USAGE, StnTextFieldSize } from '@stn-uiux/pub-ui/data/stnTextField';
|
|
15
16
|
import { StnDateRangeFieldSize } from '@stn-uiux/pub-ui/data/stnDateRangeField';
|
|
@@ -25,8 +26,8 @@ import { StnDateRange } from '@stn-uiux/pub-ui/data/stnDatePicker';
|
|
|
25
26
|
export { STN_DATE_PICKER_INTRO, STN_DATE_PICKER_KO_NAME, STN_DATE_PICKER_NAME, STN_DATE_PICKER_PANEL_USAGE, STN_DATE_PICKER_PART_ROWS, STN_DATE_PICKER_SPEC, STN_DATE_PICKER_USAGE, STN_DATE_PICKER_WEEKDAYS, StnDateRange } from '@stn-uiux/pub-ui/data/stnDatePicker';
|
|
26
27
|
import { StnWidgetShell, StnWidgetAppearance, StnWidgetBackgroundMode, StnWidgetGradeRowGrade } from '@stn-uiux/pub-ui/data/stnWidget';
|
|
27
28
|
export { STN_ALERT_CENTER_DASHBOARD_USAGE, STN_ALERT_CENTER_DASHBOARD_WIDGETS, STN_WIDGET_FIGMA, STN_WIDGET_FIGMA_DARK, STN_WIDGET_FIGMA_DARK_URL, STN_WIDGET_FIGMA_URL, STN_WIDGET_INTRO, STN_WIDGET_KINDS, STN_WIDGET_SHELL_ROWS, STN_WIDGET_USAGE, StnWidgetAppearance, StnWidgetBackgroundMode, StnWidgetContentFamily, StnWidgetGradeRowGrade, StnWidgetKind, StnWidgetShell, getStnWidgetKind, isStnWidgetKindSlug, resolveStnWidgetBackground, stnWidgetSampleUrl } from '@stn-uiux/pub-ui/data/stnWidget';
|
|
28
|
-
import { StnAlertCenterAlertItem, StnAlertCenterWorkItem, StnAlertCenterTab, StnAlertCenterSize } from '@stn-uiux/pub-ui/data/stnAlertCenter';
|
|
29
|
-
export { STN_ALERT_CENTER_DEMO_ALERTS, STN_ALERT_CENTER_DEMO_DEPLOY, STN_ALERT_CENTER_DEMO_WORK, STN_ALERT_CENTER_INTRO, STN_ALERT_CENTER_TABS, STN_ALERT_CENTER_TAB_IDS, STN_ALERT_CENTER_USAGE, STN_GNB_ALERT_INTEGRATION_USAGE, StnAlertCenterAlertItem, StnAlertCenterTab, StnAlertCenterWorkItem } from '@stn-uiux/pub-ui/data/stnAlertCenter';
|
|
29
|
+
import { StnAlertCenterAlertItem, StnAlertCenterTextOverflow, StnAlertCenterWorkItem, StnAlertCenterTab, StnAlertCenterSize } from '@stn-uiux/pub-ui/data/stnAlertCenter';
|
|
30
|
+
export { STN_ALERT_CENTER_DEMO_ALERTS, STN_ALERT_CENTER_DEMO_DEPLOY, STN_ALERT_CENTER_DEMO_WORK, STN_ALERT_CENTER_INTRO, STN_ALERT_CENTER_TABS, STN_ALERT_CENTER_TAB_IDS, STN_ALERT_CENTER_USAGE, STN_ALERT_CENTER_USAGE_HTML, STN_GNB_ALERT_INTEGRATION_USAGE, StnAlertCenterAlertItem, StnAlertCenterSize, StnAlertCenterTab, StnAlertCenterTextOverflow, StnAlertCenterWorkItem } from '@stn-uiux/pub-ui/data/stnAlertCenter';
|
|
30
31
|
import { StnBreadcrumbIconId } from '@stn-uiux/pub-ui/data/stnBreadcrumb';
|
|
31
32
|
import { StnLnbSide } from '@stn-uiux/pub-ui/data/stnLayout';
|
|
32
33
|
export { STN_ALERT_CENTER_PAGE_SCAFFOLD_USAGE, STN_LAYER_SHELL_USAGE, STN_LAYOUT_ALERT_CENTER_USAGE, STN_LAYOUT_CONTENT_ROWS, STN_LAYOUT_INTRO, STN_LAYOUT_LAYER_PAGE_TREE, STN_LAYOUT_LIST_VIEW_INTRO, STN_LAYOUT_LIST_VIEW_USAGE, STN_LAYOUT_MAP_DASHBOARD_INTRO, STN_LAYOUT_MAP_DASHBOARD_USAGE, STN_LAYOUT_PLAYGROUND_TABS, STN_LAYOUT_RECIPES, STN_LAYOUT_REGION_ROWS, STN_LAYOUT_SCREEN_RECIPES, STN_LAYOUT_SHELL_USAGE, STN_LAYOUT_SLOT_USAGE, STN_LAYOUT_WHEN_TO_USE, STN_PAGE_SCAFFOLD_COMPOUND_USAGE, STN_PAGE_SCAFFOLD_INTRO, STN_PAGE_SCAFFOLD_KINDS, StnLayoutScreenKind, StnLnbSide, StnPageScaffoldKind, applyLnbSideToModifiers } from '@stn-uiux/pub-ui/data/stnLayout';
|
|
@@ -39,12 +40,13 @@ declare function cn(...parts: Array<string | false | null | undefined>): string;
|
|
|
39
40
|
|
|
40
41
|
type StnPaginationItem = number | 'ellipsis';
|
|
41
42
|
/**
|
|
42
|
-
*
|
|
43
|
-
*
|
|
44
|
-
*
|
|
45
|
-
*
|
|
43
|
+
* MUI 및 표준 디자인 시스템과 호환되는 페이지네이션 범위 빌더
|
|
44
|
+
* @param page 현재 페이지 (1-based)
|
|
45
|
+
* @param count 총 페이지 수
|
|
46
|
+
* @param siblingCount 현재 페이지 좌우로 노출할 페이지 수 (기본: 1)
|
|
47
|
+
* @param boundaryCount 시작과 끝에 항상 노출할 페이지 수 (기본: 1)
|
|
46
48
|
*/
|
|
47
|
-
declare function buildPaginationItems(page: number,
|
|
49
|
+
declare function buildPaginationItems(page: number, count: number, siblingCount?: number, boundaryCount?: number): StnPaginationItem[];
|
|
48
50
|
|
|
49
51
|
type StnTheme = 'light' | 'dark';
|
|
50
52
|
type StnContextValue = {
|
|
@@ -91,6 +93,8 @@ type StnButtonProps = StnWithoutStyle<Omit<ButtonHTMLAttributes<HTMLButtonElemen
|
|
|
91
93
|
iconPosition?: StnButtonIconPosition;
|
|
92
94
|
/** 커스텀 아이콘 또는 아이콘 이름 ('line/pencil-minus' 또는 ReactNode) */
|
|
93
95
|
icon?: ReactNode;
|
|
96
|
+
/** 표준 너비 프리셋 ('w80' ~ 'w200' 또는 80 ~ 200) 및 full (min-width 기반) */
|
|
97
|
+
width?: StnInputWidthValue;
|
|
94
98
|
/** width 100% — `.stn-btn.full` */
|
|
95
99
|
fullWidth?: boolean;
|
|
96
100
|
className?: string;
|
|
@@ -110,6 +114,8 @@ declare const StnButton: react.ForwardRefExoticComponent<StnWithoutStyle<Omit<Bu
|
|
|
110
114
|
iconPosition?: StnButtonIconPosition;
|
|
111
115
|
/** 커스텀 아이콘 또는 아이콘 이름 ('line/pencil-minus' 또는 ReactNode) */
|
|
112
116
|
icon?: ReactNode;
|
|
117
|
+
/** 표준 너비 프리셋 ('w80' ~ 'w200' 또는 80 ~ 200) 및 full (min-width 기반) */
|
|
118
|
+
width?: StnInputWidthValue;
|
|
113
119
|
/** width 100% — `.stn-btn.full` */
|
|
114
120
|
fullWidth?: boolean;
|
|
115
121
|
className?: string;
|
|
@@ -308,41 +314,105 @@ type StnIconBoxProps = {
|
|
|
308
314
|
*/
|
|
309
315
|
declare function StnIconBox({ icon, size, color, iconSize, active, className, style, children, }: StnIconBoxProps): react_jsx_runtime.JSX.Element;
|
|
310
316
|
|
|
317
|
+
type StnPaginationSize = 'sm' | 'md' | 'lg';
|
|
318
|
+
type StnPaginationVariant = 'text' | 'outlined';
|
|
319
|
+
type StnPaginationColor = 'standard' | 'primary' | 'secondary';
|
|
311
320
|
type StnPaginationProps = StnWithoutStyle<Omit<ComponentPropsWithoutRef<'nav'>, 'className' | 'children'>> & {
|
|
312
|
-
/** 1-based
|
|
313
|
-
page
|
|
314
|
-
/**
|
|
321
|
+
/** 1-based 현재 페이지 (제어형) */
|
|
322
|
+
page?: number;
|
|
323
|
+
/** 비제어형 초기 페이지 (기본: 1) */
|
|
324
|
+
defaultPage?: number;
|
|
325
|
+
/** 총 페이지 수 */
|
|
315
326
|
count: number;
|
|
327
|
+
/** 페이지 변경 콜백 */
|
|
316
328
|
onPageChange?: (page: number) => void;
|
|
317
|
-
/**
|
|
329
|
+
/** MUI 호환 onChange 별칭 */
|
|
330
|
+
onChange?: (event: unknown, page: number) => void;
|
|
331
|
+
/** 현재 페이지 양옆으로 표시할 페이지 개수 (기본: 1) */
|
|
318
332
|
siblingCount?: number;
|
|
333
|
+
/** 시작과 끝에 항상 표시할 페이지 개수 (기본: 1) */
|
|
334
|
+
boundaryCount?: number;
|
|
335
|
+
/** 맨 처음 이동 (|<) 버튼 표시 여부 */
|
|
336
|
+
showFirstButton?: boolean;
|
|
337
|
+
/** 맨 끝 이동 (>|) 버튼 표시 여부 */
|
|
338
|
+
showLastButton?: boolean;
|
|
339
|
+
/** 이전 (<) 버튼 숨김 여부 */
|
|
340
|
+
hidePrevButton?: boolean;
|
|
341
|
+
/** 다음 (>) 버튼 숨김 여부 */
|
|
342
|
+
hideNextButton?: boolean;
|
|
343
|
+
/** 콤팩트 반응형 모드 (좁은 화면용: siblingCount=0으로 현재 페이지만 간결하게 표시) */
|
|
344
|
+
compact?: boolean;
|
|
345
|
+
/** 크기 스케일 (STN 표준 규격: sm 28px · md 32px · lg 36px) */
|
|
346
|
+
size?: StnPaginationSize;
|
|
347
|
+
/** 스타일 형태 (text 기본 · outlined 테두리형) */
|
|
348
|
+
variant?: StnPaginationVariant;
|
|
349
|
+
/** 활성 상태 강조 색상 (standard 기본 · primary · secondary) */
|
|
350
|
+
color?: StnPaginationColor;
|
|
351
|
+
/** 전체 비활성화 */
|
|
352
|
+
disabled?: boolean;
|
|
319
353
|
className?: string;
|
|
320
354
|
};
|
|
321
355
|
/**
|
|
322
|
-
*
|
|
356
|
+
* STN Design System Pagination (`StnPagination`)
|
|
357
|
+
* MUI Pagination 및 Infomap 표준 스펙을 완전 지원하는 페이지네이션 컴포넌트
|
|
323
358
|
*/
|
|
324
359
|
declare const StnPagination: react.ForwardRefExoticComponent<StnWithoutStyle<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "children" | "className">> & {
|
|
325
|
-
/** 1-based
|
|
326
|
-
page
|
|
327
|
-
/**
|
|
360
|
+
/** 1-based 현재 페이지 (제어형) */
|
|
361
|
+
page?: number;
|
|
362
|
+
/** 비제어형 초기 페이지 (기본: 1) */
|
|
363
|
+
defaultPage?: number;
|
|
364
|
+
/** 총 페이지 수 */
|
|
328
365
|
count: number;
|
|
366
|
+
/** 페이지 변경 콜백 */
|
|
329
367
|
onPageChange?: (page: number) => void;
|
|
330
|
-
/**
|
|
368
|
+
/** MUI 호환 onChange 별칭 */
|
|
369
|
+
onChange?: (event: unknown, page: number) => void;
|
|
370
|
+
/** 현재 페이지 양옆으로 표시할 페이지 개수 (기본: 1) */
|
|
331
371
|
siblingCount?: number;
|
|
372
|
+
/** 시작과 끝에 항상 표시할 페이지 개수 (기본: 1) */
|
|
373
|
+
boundaryCount?: number;
|
|
374
|
+
/** 맨 처음 이동 (|<) 버튼 표시 여부 */
|
|
375
|
+
showFirstButton?: boolean;
|
|
376
|
+
/** 맨 끝 이동 (>|) 버튼 표시 여부 */
|
|
377
|
+
showLastButton?: boolean;
|
|
378
|
+
/** 이전 (<) 버튼 숨김 여부 */
|
|
379
|
+
hidePrevButton?: boolean;
|
|
380
|
+
/** 다음 (>) 버튼 숨김 여부 */
|
|
381
|
+
hideNextButton?: boolean;
|
|
382
|
+
/** 콤팩트 반응형 모드 (좁은 화면용: siblingCount=0으로 현재 페이지만 간결하게 표시) */
|
|
383
|
+
compact?: boolean;
|
|
384
|
+
/** 크기 스케일 (STN 표준 규격: sm 28px · md 32px · lg 36px) */
|
|
385
|
+
size?: StnPaginationSize;
|
|
386
|
+
/** 스타일 형태 (text 기본 · outlined 테두리형) */
|
|
387
|
+
variant?: StnPaginationVariant;
|
|
388
|
+
/** 활성 상태 강조 색상 (standard 기본 · primary · secondary) */
|
|
389
|
+
color?: StnPaginationColor;
|
|
390
|
+
/** 전체 비활성화 */
|
|
391
|
+
disabled?: boolean;
|
|
332
392
|
className?: string;
|
|
333
393
|
} & react.RefAttributes<HTMLElement>>;
|
|
334
394
|
|
|
335
|
-
/**
|
|
336
|
-
|
|
337
|
-
|
|
395
|
+
/**
|
|
396
|
+
* STN 표준 모달 다이얼로그 크기 규격 (소문자 2글자 표준 스케일 + full)
|
|
397
|
+
*/
|
|
398
|
+
type StnModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
399
|
+
type StnModalProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'children' | 'title'> & {
|
|
338
400
|
open: boolean;
|
|
339
401
|
onClose: () => void;
|
|
340
402
|
title: ReactNode;
|
|
341
|
-
|
|
403
|
+
/** 부제목 또는 상세 설명 */
|
|
404
|
+
subtitle?: ReactNode;
|
|
405
|
+
/** 헤더 우측/인라인 확장 슬롯 (Breadcrumb, Badge, Step Indicator 등) */
|
|
406
|
+
headerExtra?: ReactNode;
|
|
407
|
+
size?: StnModalSize;
|
|
342
408
|
children: ReactNode;
|
|
343
409
|
/** Footer actions — maps to `.stn-pop__actions` */
|
|
344
410
|
actions?: ReactNode;
|
|
411
|
+
/** 푸터 액션 버튼 정렬 (기본값: 'right') */
|
|
412
|
+
actionAlign?: 'right' | 'center' | 'between';
|
|
345
413
|
className?: string;
|
|
414
|
+
/** 바디 컨테이너 커스텀 클래스 */
|
|
415
|
+
bodyClassName?: string;
|
|
346
416
|
/** dim + modal portal (default true) — `StnLayer.Dim` / `StnLayer.Modal` 스택 */
|
|
347
417
|
portal?: boolean;
|
|
348
418
|
/** close when dim is clicked (default true) */
|
|
@@ -350,15 +420,52 @@ type StnPopupProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'childre
|
|
|
350
420
|
/** Dim(스크림) 배경 여부 (기본 true). false 시 어두운 배경 딤 없이 모달만 노출 */
|
|
351
421
|
dim?: boolean;
|
|
352
422
|
};
|
|
423
|
+
/**
|
|
424
|
+
* STN 표준 모달 다이얼로그 컴포넌트 (`StnModal`)
|
|
425
|
+
*/
|
|
426
|
+
declare const StnModal: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "className" | "title"> & {
|
|
427
|
+
open: boolean;
|
|
428
|
+
onClose: () => void;
|
|
429
|
+
title: ReactNode;
|
|
430
|
+
/** 부제목 또는 상세 설명 */
|
|
431
|
+
subtitle?: ReactNode;
|
|
432
|
+
/** 헤더 우측/인라인 확장 슬롯 (Breadcrumb, Badge, Step Indicator 등) */
|
|
433
|
+
headerExtra?: ReactNode;
|
|
434
|
+
size?: StnModalSize;
|
|
435
|
+
children: ReactNode;
|
|
436
|
+
/** Footer actions — maps to `.stn-pop__actions` */
|
|
437
|
+
actions?: ReactNode;
|
|
438
|
+
/** 푸터 액션 버튼 정렬 (기본값: 'right') */
|
|
439
|
+
actionAlign?: "right" | "center" | "between";
|
|
440
|
+
className?: string;
|
|
441
|
+
/** 바디 컨테이너 커스텀 클래스 */
|
|
442
|
+
bodyClassName?: string;
|
|
443
|
+
/** dim + modal portal (default true) — `StnLayer.Dim` / `StnLayer.Modal` 스택 */
|
|
444
|
+
portal?: boolean;
|
|
445
|
+
/** close when dim is clicked (default true) */
|
|
446
|
+
closeOnScrimClick?: boolean;
|
|
447
|
+
/** Dim(스크림) 배경 여부 (기본 true). false 시 어두운 배경 딤 없이 모달만 노출 */
|
|
448
|
+
dim?: boolean;
|
|
449
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
450
|
+
type StnPopupSize = StnModalSize;
|
|
451
|
+
type StnPopupProps = StnModalProps;
|
|
353
452
|
declare const StnPopup: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "className" | "title"> & {
|
|
354
453
|
open: boolean;
|
|
355
454
|
onClose: () => void;
|
|
356
455
|
title: ReactNode;
|
|
357
|
-
|
|
456
|
+
/** 부제목 또는 상세 설명 */
|
|
457
|
+
subtitle?: ReactNode;
|
|
458
|
+
/** 헤더 우측/인라인 확장 슬롯 (Breadcrumb, Badge, Step Indicator 등) */
|
|
459
|
+
headerExtra?: ReactNode;
|
|
460
|
+
size?: StnModalSize;
|
|
358
461
|
children: ReactNode;
|
|
359
462
|
/** Footer actions — maps to `.stn-pop__actions` */
|
|
360
463
|
actions?: ReactNode;
|
|
464
|
+
/** 푸터 액션 버튼 정렬 (기본값: 'right') */
|
|
465
|
+
actionAlign?: "right" | "center" | "between";
|
|
361
466
|
className?: string;
|
|
467
|
+
/** 바디 컨테이너 커스텀 클래스 */
|
|
468
|
+
bodyClassName?: string;
|
|
362
469
|
/** dim + modal portal (default true) — `StnLayer.Dim` / `StnLayer.Modal` 스택 */
|
|
363
470
|
portal?: boolean;
|
|
364
471
|
/** close when dim is clicked (default true) */
|
|
@@ -557,6 +664,225 @@ declare const StnCheckbox: react.ForwardRefExoticComponent<StnWithoutStyle<Omit<
|
|
|
557
664
|
className?: string;
|
|
558
665
|
} & react.RefAttributes<HTMLInputElement>>;
|
|
559
666
|
|
|
667
|
+
type StnSeverityLevel = 'critical' | 'major' | 'minor' | 'warning';
|
|
668
|
+
type StnSeverityVariant = 'contained' | 'outlined' | 'none' | 'filter' | 'glow';
|
|
669
|
+
type StnSeveritySize = 'sm' | 'md' | 'lg';
|
|
670
|
+
interface StnSeverityBadgeProps extends react__default.ButtonHTMLAttributes<HTMLButtonElement | HTMLSpanElement> {
|
|
671
|
+
/** 심각도: critical, major, minor, warning */
|
|
672
|
+
severity: StnSeverityLevel;
|
|
673
|
+
/** 표시 모드: contained (기본 채움형), outlined (외곽선형), none (아이콘+글자만), filter (필터 토글 버튼), glow (발광 효과) */
|
|
674
|
+
variant?: StnSeverityVariant;
|
|
675
|
+
/** 뱃지 크기: 'sm' (18px), 'md' (20px - 기본값), 'lg' (24px) */
|
|
676
|
+
size?: StnSeveritySize;
|
|
677
|
+
/** 라운드(알약/원형) 모서리 적용 여부 (기본값: false, 4px) */
|
|
678
|
+
round?: boolean;
|
|
679
|
+
/** 아이콘 표시 여부 (기본값: true) */
|
|
680
|
+
showIcon?: boolean;
|
|
681
|
+
/** 아이콘 전용 모드 (텍스트 없이 정사각/원형 심각도 아이콘만 표시) */
|
|
682
|
+
iconOnly?: boolean;
|
|
683
|
+
/** 블러 / 네온 글로우 발광 효과 적용 여부 (variant="glow"와 동일, 기본값: false) */
|
|
684
|
+
glow?: boolean;
|
|
685
|
+
/** glow의 별칭 prop (blur 발광 효과 제어) */
|
|
686
|
+
blur?: boolean;
|
|
687
|
+
/** 텍스트 라벨 (미지정 시 기본 라벨 표시) */
|
|
688
|
+
label?: react__default.ReactNode;
|
|
689
|
+
/** 필터 모드일 때 활성화(선택) 상태 */
|
|
690
|
+
active?: boolean;
|
|
691
|
+
/** 클릭 이벤트 핸들러 */
|
|
692
|
+
onClick?: react__default.MouseEventHandler<HTMLElement>;
|
|
693
|
+
/** 추가 클래스 */
|
|
694
|
+
className?: string;
|
|
695
|
+
children?: react__default.ReactNode;
|
|
696
|
+
}
|
|
697
|
+
/**
|
|
698
|
+
* StnSeverityBadge
|
|
699
|
+
* 알람 심각도(Critical, Major, Minor, Warning)를 명확하게 표시하거나
|
|
700
|
+
* 대시보드에서 다중 필터 토글 용도로 사용하는 컴포넌트입니다.
|
|
701
|
+
*
|
|
702
|
+
* @deprecated 통합 상태 컴포넌트인 `<StnStatus.Severity />` 사용을 강력히 권장합니다.
|
|
703
|
+
*/
|
|
704
|
+
declare const StnSeverityBadge: react__default.ForwardRefExoticComponent<StnSeverityBadgeProps & react__default.RefAttributes<HTMLElement>>;
|
|
705
|
+
interface StnSeverityFilterProps {
|
|
706
|
+
/** 현재 선택된 심각도 레벨 배열 */
|
|
707
|
+
value?: StnSeverityLevel[];
|
|
708
|
+
/** 선택 변경 콜백 */
|
|
709
|
+
onChange?: (nextValue: StnSeverityLevel[]) => void;
|
|
710
|
+
/** 비활성화할 심각도 목록 */
|
|
711
|
+
disabledSeverities?: StnSeverityLevel[];
|
|
712
|
+
/** 아이콘 표시 여부 (기본: true) */
|
|
713
|
+
showIcon?: boolean;
|
|
714
|
+
/** 추가 클래스 */
|
|
715
|
+
className?: string;
|
|
716
|
+
}
|
|
717
|
+
/**
|
|
718
|
+
* StnSeverityFilter
|
|
719
|
+
* 대시보드 및 실시간 장애 목록 상단에서 사용되는 4단계 심각도 필터 그룹 컴포넌트입니다.
|
|
720
|
+
*
|
|
721
|
+
* @deprecated 통합 상태 컴포넌트인 `<StnStatus.SeverityFilter />` 사용을 강력히 권장합니다.
|
|
722
|
+
*/
|
|
723
|
+
declare const StnSeverityFilter: react__default.FC<StnSeverityFilterProps>;
|
|
724
|
+
|
|
725
|
+
type StnStatusDotPosition = 'left' | 'right' | 'none';
|
|
726
|
+
type StnStatusDotSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
727
|
+
type StnStatusDotGap = 'none' | 'xs' | 'sm' | 'md' | 'lg';
|
|
728
|
+
type StnStatusDotProps = HTMLAttributes<HTMLDivElement> & {
|
|
729
|
+
state?: StnStatusDotState;
|
|
730
|
+
label?: ReactNode;
|
|
731
|
+
count?: number | string;
|
|
732
|
+
pulse?: boolean;
|
|
733
|
+
bordered?: boolean;
|
|
734
|
+
/** dot 위치: 'left'(기본) | 'right' | 'none'(점 없이 글자만 표시) */
|
|
735
|
+
dotPosition?: StnStatusDotPosition;
|
|
736
|
+
/** STN 표준 크기: 'xs' | 'sm' | 'md'(기본) | 'lg' | 'xl' */
|
|
737
|
+
size?: StnStatusDotSize;
|
|
738
|
+
/** 여백 간격: 'none' | 'xs' | 'sm' | 'md' | 'lg' */
|
|
739
|
+
gap?: StnStatusDotGap;
|
|
740
|
+
className?: string;
|
|
741
|
+
};
|
|
742
|
+
declare const StnStatusDot: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
|
|
743
|
+
state?: StnStatusDotState;
|
|
744
|
+
label?: ReactNode;
|
|
745
|
+
count?: number | string;
|
|
746
|
+
pulse?: boolean;
|
|
747
|
+
bordered?: boolean;
|
|
748
|
+
/** dot 위치: 'left'(기본) | 'right' | 'none'(점 없이 글자만 표시) */
|
|
749
|
+
dotPosition?: StnStatusDotPosition;
|
|
750
|
+
/** STN 표준 크기: 'xs' | 'sm' | 'md'(기본) | 'lg' | 'xl' */
|
|
751
|
+
size?: StnStatusDotSize;
|
|
752
|
+
/** 여백 간격: 'none' | 'xs' | 'sm' | 'md' | 'lg' */
|
|
753
|
+
gap?: StnStatusDotGap;
|
|
754
|
+
className?: string;
|
|
755
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
756
|
+
type StnStatusDotGroupItem = {
|
|
757
|
+
id: string;
|
|
758
|
+
state?: StnStatusDotState;
|
|
759
|
+
label?: ReactNode;
|
|
760
|
+
count?: number | string;
|
|
761
|
+
};
|
|
762
|
+
type StnStatusDotGroupProps = HTMLAttributes<HTMLDivElement> & {
|
|
763
|
+
items: StnStatusDotGroupItem[];
|
|
764
|
+
bordered?: boolean;
|
|
765
|
+
className?: string;
|
|
766
|
+
};
|
|
767
|
+
declare const StnStatusDotGroup: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
|
|
768
|
+
items: StnStatusDotGroupItem[];
|
|
769
|
+
bordered?: boolean;
|
|
770
|
+
className?: string;
|
|
771
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
772
|
+
type StnStatusSwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'type'> & {
|
|
773
|
+
checked?: boolean;
|
|
774
|
+
defaultChecked?: boolean;
|
|
775
|
+
onChange?: (checked: boolean) => void;
|
|
776
|
+
labelOn?: string;
|
|
777
|
+
labelOff?: string;
|
|
778
|
+
icon?: string;
|
|
779
|
+
/**
|
|
780
|
+
* 표준 너비 프리셋 ('w80' ~ 'w200' 또는 80 ~ 200) 및 'full'
|
|
781
|
+
* 버튼/토글류 특성상 min-width 기반으로 작용하여 짧은 텍스트는 고정 너비를 유지하고, 긴 텍스트는 자연스럽게 늘어남(Hug)
|
|
782
|
+
* @default 'w80'
|
|
783
|
+
*/
|
|
784
|
+
width?: StnInputWidthValue;
|
|
785
|
+
/** 전체 폭 100% (`full`) */
|
|
786
|
+
fullWidth?: boolean;
|
|
787
|
+
className?: string;
|
|
788
|
+
};
|
|
789
|
+
declare const StnStatusSwitch: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onChange"> & {
|
|
790
|
+
checked?: boolean;
|
|
791
|
+
defaultChecked?: boolean;
|
|
792
|
+
onChange?: (checked: boolean) => void;
|
|
793
|
+
labelOn?: string;
|
|
794
|
+
labelOff?: string;
|
|
795
|
+
icon?: string;
|
|
796
|
+
/**
|
|
797
|
+
* 표준 너비 프리셋 ('w80' ~ 'w200' 또는 80 ~ 200) 및 'full'
|
|
798
|
+
* 버튼/토글류 특성상 min-width 기반으로 작용하여 짧은 텍스트는 고정 너비를 유지하고, 긴 텍스트는 자연스럽게 늘어남(Hug)
|
|
799
|
+
* @default 'w80'
|
|
800
|
+
*/
|
|
801
|
+
width?: StnInputWidthValue;
|
|
802
|
+
/** 전체 폭 100% (`full`) */
|
|
803
|
+
fullWidth?: boolean;
|
|
804
|
+
className?: string;
|
|
805
|
+
} & react.RefAttributes<HTMLButtonElement>>;
|
|
806
|
+
type StnStatusFlowSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
807
|
+
type StnStatusFlowProps = HTMLAttributes<HTMLDivElement> & {
|
|
808
|
+
steps: StnStatusFlowStep[];
|
|
809
|
+
current?: string;
|
|
810
|
+
/** 테두리 유무 — 기본값 true, false 시 플랫/테두리 없음 */
|
|
811
|
+
bordered?: boolean;
|
|
812
|
+
/** STN 표준 크기 — xs · sm · md(기본) · lg · xl */
|
|
813
|
+
size?: StnStatusFlowSize;
|
|
814
|
+
className?: string;
|
|
815
|
+
};
|
|
816
|
+
declare const StnStatusFlow: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
|
|
817
|
+
steps: StnStatusFlowStep[];
|
|
818
|
+
current?: string;
|
|
819
|
+
/** 테두리 유무 — 기본값 true, false 시 플랫/테두리 없음 */
|
|
820
|
+
bordered?: boolean;
|
|
821
|
+
/** STN 표준 크기 — xs · sm · md(기본) · lg · xl */
|
|
822
|
+
size?: StnStatusFlowSize;
|
|
823
|
+
className?: string;
|
|
824
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
825
|
+
type StnStatusProps = ({
|
|
826
|
+
type?: 'dot';
|
|
827
|
+
} & StnStatusDotProps) | ({
|
|
828
|
+
type: 'dot-group';
|
|
829
|
+
} & StnStatusDotGroupProps) | ({
|
|
830
|
+
type: 'switch';
|
|
831
|
+
} & StnStatusSwitchProps) | ({
|
|
832
|
+
type: 'severity';
|
|
833
|
+
} & Omit<StnSeverityBadgeProps, 'type'>) | ({
|
|
834
|
+
type: 'flow';
|
|
835
|
+
} & StnStatusFlowProps);
|
|
836
|
+
declare function StnStatus(props: StnStatusProps): react_jsx_runtime.JSX.Element;
|
|
837
|
+
declare namespace StnStatus {
|
|
838
|
+
var Dot: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
|
|
839
|
+
state?: StnStatusDotState;
|
|
840
|
+
label?: ReactNode;
|
|
841
|
+
count?: number | string;
|
|
842
|
+
pulse?: boolean;
|
|
843
|
+
bordered?: boolean;
|
|
844
|
+
/** dot 위치: 'left'(기본) | 'right' | 'none'(점 없이 글자만 표시) */
|
|
845
|
+
dotPosition?: StnStatusDotPosition;
|
|
846
|
+
/** STN 표준 크기: 'xs' | 'sm' | 'md'(기본) | 'lg' | 'xl' */
|
|
847
|
+
size?: StnStatusDotSize;
|
|
848
|
+
/** 여백 간격: 'none' | 'xs' | 'sm' | 'md' | 'lg' */
|
|
849
|
+
gap?: StnStatusDotGap;
|
|
850
|
+
className?: string;
|
|
851
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
852
|
+
var DotGroup: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
|
|
853
|
+
items: StnStatusDotGroupItem[];
|
|
854
|
+
bordered?: boolean;
|
|
855
|
+
className?: string;
|
|
856
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
857
|
+
var Severity: react.ForwardRefExoticComponent<StnSeverityBadgeProps & react.RefAttributes<HTMLElement>>;
|
|
858
|
+
var Switch: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onChange"> & {
|
|
859
|
+
checked?: boolean;
|
|
860
|
+
defaultChecked?: boolean;
|
|
861
|
+
onChange?: (checked: boolean) => void;
|
|
862
|
+
labelOn?: string;
|
|
863
|
+
labelOff?: string;
|
|
864
|
+
icon?: string;
|
|
865
|
+
/**
|
|
866
|
+
* 표준 너비 프리셋 ('w80' ~ 'w200' 또는 80 ~ 200) 및 'full'
|
|
867
|
+
* 버튼/토글류 특성상 min-width 기반으로 작용하여 짧은 텍스트는 고정 너비를 유지하고, 긴 텍스트는 자연스럽게 늘어남(Hug)
|
|
868
|
+
* @default 'w80'
|
|
869
|
+
*/
|
|
870
|
+
width?: StnInputWidthValue;
|
|
871
|
+
/** 전체 폭 100% (`full`) */
|
|
872
|
+
fullWidth?: boolean;
|
|
873
|
+
className?: string;
|
|
874
|
+
} & react.RefAttributes<HTMLButtonElement>>;
|
|
875
|
+
var Flow: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
|
|
876
|
+
steps: StnStatusFlowStep[];
|
|
877
|
+
current?: string;
|
|
878
|
+
/** 테두리 유무 — 기본값 true, false 시 플랫/테두리 없음 */
|
|
879
|
+
bordered?: boolean;
|
|
880
|
+
/** STN 표준 크기 — xs · sm · md(기본) · lg · xl */
|
|
881
|
+
size?: StnStatusFlowSize;
|
|
882
|
+
className?: string;
|
|
883
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
884
|
+
}
|
|
885
|
+
|
|
560
886
|
/** footerRight 액션 슬롯 권장 상한 (문서·Figma 101782) */
|
|
561
887
|
declare const STN_TABLE_FOOTER_MAX_ACTIONS = 4;
|
|
562
888
|
type StnTableProps = {
|
|
@@ -717,6 +1043,9 @@ type StnTableCompound = typeof StnTableBase & {
|
|
|
717
1043
|
TdCheck: typeof StnTableTdCheck;
|
|
718
1044
|
Sort: typeof StnTableSort;
|
|
719
1045
|
RowActions: typeof StnTableRowActions;
|
|
1046
|
+
Status: typeof StnStatusDot;
|
|
1047
|
+
Switch: typeof StnStatusSwitch;
|
|
1048
|
+
Flow: typeof StnStatusFlow;
|
|
720
1049
|
};
|
|
721
1050
|
/**
|
|
722
1051
|
* Pub list table shell — Infomap Figma thead/tbody (node 40000042:209510).
|
|
@@ -725,13 +1054,21 @@ type StnTableCompound = typeof StnTableBase & {
|
|
|
725
1054
|
declare const StnTable: StnTableCompound;
|
|
726
1055
|
|
|
727
1056
|
type StnTreeNodeKind = 'root' | 'folder' | 'server';
|
|
728
|
-
/** Tree 데이터 노드 — `StnTree`의 `nodes`
|
|
729
|
-
type
|
|
1057
|
+
/** Tree 순수 데이터 노드 객체 — `StnTree`의 `nodes` prop에 전달하는 데이터 항목 */
|
|
1058
|
+
type StnTreeItemData = {
|
|
730
1059
|
id: string;
|
|
731
|
-
label:
|
|
1060
|
+
label: ReactNode;
|
|
732
1061
|
/** default `folder` · leaf는 `server` · 최상위 루트는 `root` */
|
|
733
1062
|
kind?: StnTreeNodeKind;
|
|
734
|
-
|
|
1063
|
+
/** 텍스트 굵게 강조 표시 여부 (`--stn-font-weight-bold`) */
|
|
1064
|
+
bold?: boolean;
|
|
1065
|
+
/** 가시성 상태 (눈 토글 시 사용) — 기본값 `true` (표시), `false` (숨김/미사용) */
|
|
1066
|
+
visible?: boolean;
|
|
1067
|
+
/** 노드 우측에 표시할 카운트 숫자/문자열 뱃지 (선택 사항) */
|
|
1068
|
+
count?: number | string;
|
|
1069
|
+
/** 노드 좌측 커스텀 아이콘 (StnIcon name 문자열 또는 ReactNode) */
|
|
1070
|
+
icon?: ReactNode;
|
|
1071
|
+
children?: StnTreeItemData[];
|
|
735
1072
|
};
|
|
736
1073
|
type StnTreeGuideCell = {
|
|
737
1074
|
type: 'blank';
|
|
@@ -746,13 +1083,17 @@ type StnTreeGuideCell = {
|
|
|
746
1083
|
};
|
|
747
1084
|
type StnTreeFlatRow = {
|
|
748
1085
|
id: string;
|
|
749
|
-
label:
|
|
1086
|
+
label: ReactNode;
|
|
750
1087
|
kind: StnTreeNodeKind;
|
|
1088
|
+
bold?: boolean;
|
|
751
1089
|
depth: number;
|
|
752
1090
|
cells: StnTreeGuideCell[];
|
|
753
1091
|
hasChildren: boolean;
|
|
754
1092
|
expanded: boolean;
|
|
755
1093
|
isLast: boolean;
|
|
1094
|
+
visible: boolean;
|
|
1095
|
+
count?: number | string;
|
|
1096
|
+
icon?: ReactNode;
|
|
756
1097
|
};
|
|
757
1098
|
/** 단일 Tree Node용 가이드/토글 셀 — depth · kind 기준으로 생성 */
|
|
758
1099
|
declare function buildStnTreeNodeCells(options: {
|
|
@@ -764,14 +1105,16 @@ declare function buildStnTreeNodeCells(options: {
|
|
|
764
1105
|
/** length = max(0, depth - 1) · true면 해당 조상 이후 vertical 숨김 */
|
|
765
1106
|
ancestorIsLast?: boolean[];
|
|
766
1107
|
}): StnTreeGuideCell[];
|
|
767
|
-
declare function flattenStnTree(nodes:
|
|
768
|
-
declare function collectExpandableIds(nodes:
|
|
1108
|
+
declare function flattenStnTree(nodes: StnTreeItemData[], expandedIds: Iterable<string>): StnTreeFlatRow[];
|
|
1109
|
+
declare function collectExpandableIds(nodes: StnTreeItemData[]): string[];
|
|
769
1110
|
|
|
770
1111
|
type StnTreeNodeDocState = 'default' | 'hover' | 'pressed' | 'selected';
|
|
771
1112
|
type StnTreeNodeProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onSelect' | 'onToggle'> & {
|
|
772
|
-
label:
|
|
1113
|
+
label: ReactNode;
|
|
773
1114
|
/** default `folder` */
|
|
774
1115
|
kind?: StnTreeNodeKind;
|
|
1116
|
+
/** 텍스트 굵게 강조 표시 여부 (`--stn-font-weight-bold`) */
|
|
1117
|
+
bold?: boolean;
|
|
775
1118
|
/** 0–3 · `data-depth` · 가이드 들여쓰기 */
|
|
776
1119
|
depth?: number;
|
|
777
1120
|
expanded?: boolean;
|
|
@@ -784,6 +1127,28 @@ type StnTreeNodeProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onSel
|
|
|
784
1127
|
ancestorIsLast?: boolean[];
|
|
785
1128
|
/** 셀을 직접 넘기면 depth/kind 기반 생성을 건너뜁니다 */
|
|
786
1129
|
cells?: StnTreeGuideCell[];
|
|
1130
|
+
/**
|
|
1131
|
+
* 노드 앞 아이콘(폴더·서버) 표시 여부. 기본 `true`.
|
|
1132
|
+
* `false`로 설정하면 아이콘 셀이 렌더링되지 않습니다.
|
|
1133
|
+
*/
|
|
1134
|
+
showIcon?: boolean;
|
|
1135
|
+
/** 노드 앞 커스텀 아이콘 (StnIcon 문자열 이름 또는 ReactNode) */
|
|
1136
|
+
icon?: ReactNode;
|
|
1137
|
+
/** 노드 우측에 표시할 카운트 숫자/문자열 뱃지 */
|
|
1138
|
+
count?: number | string;
|
|
1139
|
+
/**
|
|
1140
|
+
* 가시성 상태 (눈 토글 시 사용) — 기본값 `true`.
|
|
1141
|
+
* `false`인 경우 해당 행이 반투명(dimmed) 처리되며 감긴 눈 아이콘이 표시됩니다.
|
|
1142
|
+
*/
|
|
1143
|
+
visible?: boolean;
|
|
1144
|
+
/**
|
|
1145
|
+
* 우측 끝 가시성(눈) 토글 버튼 표시 여부. 기본 `false`.
|
|
1146
|
+
*/
|
|
1147
|
+
showVisibilityToggle?: boolean;
|
|
1148
|
+
/**
|
|
1149
|
+
* 가시성(눈) 버튼 클릭 시 호출되는 콜백.
|
|
1150
|
+
*/
|
|
1151
|
+
onVisibilityChange?: (visible: boolean) => void;
|
|
787
1152
|
/**
|
|
788
1153
|
* Docs Playground — hover/pressed/selected 비주얼 고정.
|
|
789
1154
|
* 제품 코드에서는 쓰지 마세요.
|
|
@@ -794,9 +1159,11 @@ type StnTreeNodeProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onSel
|
|
|
794
1159
|
};
|
|
795
1160
|
/** Infomap FOLDER STRUCTURE 행 — Figma 40000042:210359 */
|
|
796
1161
|
declare const StnTreeNode: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "onSelect" | "onToggle"> & {
|
|
797
|
-
label:
|
|
1162
|
+
label: ReactNode;
|
|
798
1163
|
/** default `folder` */
|
|
799
1164
|
kind?: StnTreeNodeKind;
|
|
1165
|
+
/** 텍스트 굵게 강조 표시 여부 (`--stn-font-weight-bold`) */
|
|
1166
|
+
bold?: boolean;
|
|
800
1167
|
/** 0–3 · `data-depth` · 가이드 들여쓰기 */
|
|
801
1168
|
depth?: number;
|
|
802
1169
|
expanded?: boolean;
|
|
@@ -809,6 +1176,28 @@ declare const StnTreeNode: react.ForwardRefExoticComponent<Omit<HTMLAttributes<H
|
|
|
809
1176
|
ancestorIsLast?: boolean[];
|
|
810
1177
|
/** 셀을 직접 넘기면 depth/kind 기반 생성을 건너뜁니다 */
|
|
811
1178
|
cells?: StnTreeGuideCell[];
|
|
1179
|
+
/**
|
|
1180
|
+
* 노드 앞 아이콘(폴더·서버) 표시 여부. 기본 `true`.
|
|
1181
|
+
* `false`로 설정하면 아이콘 셀이 렌더링되지 않습니다.
|
|
1182
|
+
*/
|
|
1183
|
+
showIcon?: boolean;
|
|
1184
|
+
/** 노드 앞 커스텀 아이콘 (StnIcon 문자열 이름 또는 ReactNode) */
|
|
1185
|
+
icon?: ReactNode;
|
|
1186
|
+
/** 노드 우측에 표시할 카운트 숫자/문자열 뱃지 */
|
|
1187
|
+
count?: number | string;
|
|
1188
|
+
/**
|
|
1189
|
+
* 가시성 상태 (눈 토글 시 사용) — 기본값 `true`.
|
|
1190
|
+
* `false`인 경우 해당 행이 반투명(dimmed) 처리되며 감긴 눈 아이콘이 표시됩니다.
|
|
1191
|
+
*/
|
|
1192
|
+
visible?: boolean;
|
|
1193
|
+
/**
|
|
1194
|
+
* 우측 끝 가시성(눈) 토글 버튼 표시 여부. 기본 `false`.
|
|
1195
|
+
*/
|
|
1196
|
+
showVisibilityToggle?: boolean;
|
|
1197
|
+
/**
|
|
1198
|
+
* 가시성(눈) 버튼 클릭 시 호출되는 콜백.
|
|
1199
|
+
*/
|
|
1200
|
+
onVisibilityChange?: (visible: boolean) => void;
|
|
812
1201
|
/**
|
|
813
1202
|
* Docs Playground — hover/pressed/selected 비주얼 고정.
|
|
814
1203
|
* 제품 코드에서는 쓰지 마세요.
|
|
@@ -817,47 +1206,56 @@ declare const StnTreeNode: react.ForwardRefExoticComponent<Omit<HTMLAttributes<H
|
|
|
817
1206
|
onSelect?: () => void;
|
|
818
1207
|
onToggle?: () => void;
|
|
819
1208
|
} & react.RefAttributes<HTMLDivElement>>;
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
/**
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
1209
|
+
declare const StnTreeItem: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "onSelect" | "onToggle"> & {
|
|
1210
|
+
label: ReactNode;
|
|
1211
|
+
/** default `folder` */
|
|
1212
|
+
kind?: StnTreeNodeKind;
|
|
1213
|
+
/** 텍스트 굵게 강조 표시 여부 (`--stn-font-weight-bold`) */
|
|
1214
|
+
bold?: boolean;
|
|
1215
|
+
/** 0–3 · `data-depth` · 가이드 들여쓰기 */
|
|
1216
|
+
depth?: number;
|
|
1217
|
+
expanded?: boolean;
|
|
1218
|
+
selected?: boolean;
|
|
1219
|
+
/** folder/root에 자식이 있으면 chevron · server는 connector */
|
|
1220
|
+
hasChildren?: boolean;
|
|
1221
|
+
/** server connector end vs mid */
|
|
1222
|
+
isLast?: boolean;
|
|
1223
|
+
/** depth>1 가이드 · length = depth-1 */
|
|
1224
|
+
ancestorIsLast?: boolean[];
|
|
1225
|
+
/** 셀을 직접 넘기면 depth/kind 기반 생성을 건너뜁니다 */
|
|
1226
|
+
cells?: StnTreeGuideCell[];
|
|
832
1227
|
/**
|
|
833
|
-
*
|
|
834
|
-
*
|
|
1228
|
+
* 노드 앞 아이콘(폴더·서버) 표시 여부. 기본 `true`.
|
|
1229
|
+
* `false`로 설정하면 아이콘 셀이 렌더링되지 않습니다.
|
|
835
1230
|
*/
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
/** Infomap folder structure tree — `StnTreeNode` 조립 · Figma 40000042:210359 */
|
|
842
|
-
declare const StnTree: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "onSelect"> & {
|
|
843
|
-
nodes: StnTreeItem[];
|
|
844
|
-
/** 섹션 제목 — Figma `FOLDER STRUCTURE` */
|
|
845
|
-
heading?: string;
|
|
846
|
-
defaultExpandedIds?: string[];
|
|
847
|
-
expandedIds?: string[];
|
|
848
|
-
onExpandedChange?: (ids: string[]) => void;
|
|
849
|
-
selectedId?: string | null;
|
|
850
|
-
defaultSelectedId?: string | null;
|
|
851
|
-
onSelect?: (id: string) => void;
|
|
1231
|
+
showIcon?: boolean;
|
|
1232
|
+
/** 노드 앞 커스텀 아이콘 (StnIcon 문자열 이름 또는 ReactNode) */
|
|
1233
|
+
icon?: ReactNode;
|
|
1234
|
+
/** 노드 우측에 표시할 카운트 숫자/문자열 뱃지 */
|
|
1235
|
+
count?: number | string;
|
|
852
1236
|
/**
|
|
853
|
-
*
|
|
1237
|
+
* 가시성 상태 (눈 토글 시 사용) — 기본값 `true`.
|
|
1238
|
+
* `false`인 경우 해당 행이 반투명(dimmed) 처리되며 감긴 눈 아이콘이 표시됩니다.
|
|
1239
|
+
*/
|
|
1240
|
+
visible?: boolean;
|
|
1241
|
+
/**
|
|
1242
|
+
* 우측 끝 가시성(눈) 토글 버튼 표시 여부. 기본 `false`.
|
|
1243
|
+
*/
|
|
1244
|
+
showVisibilityToggle?: boolean;
|
|
1245
|
+
/**
|
|
1246
|
+
* 가시성(눈) 버튼 클릭 시 호출되는 콜백.
|
|
1247
|
+
*/
|
|
1248
|
+
onVisibilityChange?: (visible: boolean) => void;
|
|
1249
|
+
/**
|
|
1250
|
+
* Docs Playground — hover/pressed/selected 비주얼 고정.
|
|
854
1251
|
* 제품 코드에서는 쓰지 마세요.
|
|
855
1252
|
*/
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
};
|
|
1253
|
+
docState?: StnTreeNodeDocState;
|
|
1254
|
+
onSelect?: () => void;
|
|
1255
|
+
onToggle?: () => void;
|
|
860
1256
|
} & react.RefAttributes<HTMLDivElement>>;
|
|
1257
|
+
type StnTreeItemProps = StnTreeNodeProps;
|
|
1258
|
+
type StnTreeItemDocState = StnTreeNodeDocState;
|
|
861
1259
|
|
|
862
1260
|
type StnScrollOrientation = 'vertical' | 'horizontal' | 'both';
|
|
863
1261
|
type StnScrollSize = 'thin' | 'default' | 'thick';
|
|
@@ -918,6 +1316,178 @@ declare const StnScroll: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivE
|
|
|
918
1316
|
className?: string;
|
|
919
1317
|
} & react.RefAttributes<HTMLDivElement>>;
|
|
920
1318
|
|
|
1319
|
+
type StnTreeDocRowState = StnTreeNodeDocState;
|
|
1320
|
+
/** 행 높이 크기 토큰 — xs(20px) · sm(24px, 기본) · md(32px) · lg(40px) · xl(48px) */
|
|
1321
|
+
type StnTreeSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
1322
|
+
/**
|
|
1323
|
+
* 너비 프리셋 토큰 — Tree 권장 표준 스케일: w160(160px) ~ w240(240px) · full(100%, 기본)
|
|
1324
|
+
* (들여쓰기 24px×depth + 아이콘 20px 감안 실무 스케일)
|
|
1325
|
+
*/
|
|
1326
|
+
type StnTreeWidth = 'w80' | 'w100' | 'w120' | 'w140' | 'w160' | 'w180' | 'w200' | 'w220' | 'w240' | 'full';
|
|
1327
|
+
/** 행 선택/호버 테두리 곡률 — none(0px) · sm(4px, 기본) · md(8px) · full(9999px pill) */
|
|
1328
|
+
type StnTreeRadius = 'none' | 'sm' | 'md' | 'full';
|
|
1329
|
+
type StnTreeProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onSelect'> & {
|
|
1330
|
+
nodes: StnTreeItemData[];
|
|
1331
|
+
/** 섹션 제목 — 생략 시 제목 영역이 렌더링되지 않습니다. */
|
|
1332
|
+
heading?: string;
|
|
1333
|
+
/**
|
|
1334
|
+
* 초기 로드 시 모든 폴더를 펼쳐 둘지 여부. 기본값 `false` (기본 상태는 접힘).
|
|
1335
|
+
* `true` 설정 시 모든 하위 폴더가 자동으로 펼쳐집니다.
|
|
1336
|
+
*/
|
|
1337
|
+
defaultExpandAll?: boolean;
|
|
1338
|
+
defaultExpandedIds?: string[];
|
|
1339
|
+
expandedIds?: string[];
|
|
1340
|
+
onExpandedChange?: (ids: string[]) => void;
|
|
1341
|
+
selectedId?: string | null;
|
|
1342
|
+
defaultSelectedId?: string | null;
|
|
1343
|
+
onSelect?: (id: string) => void;
|
|
1344
|
+
/**
|
|
1345
|
+
* 행 높이 크기 — `xs` 20px / `sm` 24px(기본) / `md` 32px / `lg` 40px / `xl` 48px.
|
|
1346
|
+
* `.xs`, `.sm`, `.md`, `.lg`, `.xl` 표준 크기 클래스로 적용됩니다.
|
|
1347
|
+
*/
|
|
1348
|
+
size?: StnTreeSize;
|
|
1349
|
+
/**
|
|
1350
|
+
* 너비 프리셋 — `w160`, `w180`, `w200`, `w220`, `w240`, `full`(기본 100%).
|
|
1351
|
+
*/
|
|
1352
|
+
width?: StnTreeWidth;
|
|
1353
|
+
/**
|
|
1354
|
+
* 행 테두리 곡률 — `none` 0px / `sm` 4px(기본) / `md` 8px / `full` pill.
|
|
1355
|
+
*/
|
|
1356
|
+
radius?: StnTreeRadius;
|
|
1357
|
+
/**
|
|
1358
|
+
* 계층 가이드라인(Connector, Vertical 라인) 표시 여부. 기본 `true`.
|
|
1359
|
+
* `false`로 설정하면 가이드선이 숨겨지고 인덴트만 유지됩니다 (`.no-guides`).
|
|
1360
|
+
*/
|
|
1361
|
+
guides?: boolean;
|
|
1362
|
+
/**
|
|
1363
|
+
* 노드 앞 아이콘(폴더·서버) 전체 표시 여부. 기본 `true`.
|
|
1364
|
+
* `false`로 설정하면 모든 행에서 아이콘이 숨겨집니다.
|
|
1365
|
+
*/
|
|
1366
|
+
showIcons?: boolean;
|
|
1367
|
+
/**
|
|
1368
|
+
* 우측 끝 가시성(눈) 토글 버튼 표시 여부. 기본 `false`.
|
|
1369
|
+
*/
|
|
1370
|
+
showVisibilityToggle?: boolean;
|
|
1371
|
+
/**
|
|
1372
|
+
* 특정 노드의 눈 아이콘 클릭 시 호출되는 콜백.
|
|
1373
|
+
*/
|
|
1374
|
+
onVisibilityChange?: (id: string, visible: boolean) => void;
|
|
1375
|
+
/**
|
|
1376
|
+
* 가시성 숨김(눈 감김) 처리된 노드 ID 목록 (제어 상태).
|
|
1377
|
+
*/
|
|
1378
|
+
hiddenIds?: string[];
|
|
1379
|
+
/**
|
|
1380
|
+
* 초기 가시성 숨김(눈 감김) 처리된 노드 ID 목록 (비제어 상태).
|
|
1381
|
+
*/
|
|
1382
|
+
defaultHiddenIds?: string[];
|
|
1383
|
+
/**
|
|
1384
|
+
* Docs Playground — 특정 행에 hover/pressed/selected 비주얼을 고정합니다.
|
|
1385
|
+
* 제품 코드에서는 쓰지 마세요.
|
|
1386
|
+
*/
|
|
1387
|
+
docRowState?: {
|
|
1388
|
+
id: string;
|
|
1389
|
+
state: StnTreeDocRowState;
|
|
1390
|
+
};
|
|
1391
|
+
/**
|
|
1392
|
+
* 최대 높이(px 또는 CSS 문자열).
|
|
1393
|
+
* 지정 시 헤더는 고정되고 하위 노드 목록(`stn-tree__rows`)이 `StnScroll`로 감싸져 내부 스크롤됩니다.
|
|
1394
|
+
*/
|
|
1395
|
+
maxHeight?: number | string;
|
|
1396
|
+
/**
|
|
1397
|
+
* `maxHeight` 지정 시 적용할 StnScroll variant ('default' | 'arrows'). 기본 'default'.
|
|
1398
|
+
*/
|
|
1399
|
+
scrollVariant?: StnScrollVariant;
|
|
1400
|
+
/**
|
|
1401
|
+
* `maxHeight` 지정 시 적용할 StnScroll 두께 ('thin' | 'default' | 'thick'). 기본 'thin'.
|
|
1402
|
+
*/
|
|
1403
|
+
scrollSize?: StnScrollSize;
|
|
1404
|
+
/**
|
|
1405
|
+
* `maxHeight` 지정 시 적용할 StnScroll 색상 ('default' | 'primary' | 'secondary' | 'muted' | 'fade'). 기본 'fade'.
|
|
1406
|
+
*/
|
|
1407
|
+
scrollColor?: StnScrollColor;
|
|
1408
|
+
};
|
|
1409
|
+
/** Infomap folder structure tree — `StnTreeNode` 조립 · Figma 40000042:210359 */
|
|
1410
|
+
declare const StnTree: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "onSelect"> & {
|
|
1411
|
+
nodes: StnTreeItemData[];
|
|
1412
|
+
/** 섹션 제목 — 생략 시 제목 영역이 렌더링되지 않습니다. */
|
|
1413
|
+
heading?: string;
|
|
1414
|
+
/**
|
|
1415
|
+
* 초기 로드 시 모든 폴더를 펼쳐 둘지 여부. 기본값 `false` (기본 상태는 접힘).
|
|
1416
|
+
* `true` 설정 시 모든 하위 폴더가 자동으로 펼쳐집니다.
|
|
1417
|
+
*/
|
|
1418
|
+
defaultExpandAll?: boolean;
|
|
1419
|
+
defaultExpandedIds?: string[];
|
|
1420
|
+
expandedIds?: string[];
|
|
1421
|
+
onExpandedChange?: (ids: string[]) => void;
|
|
1422
|
+
selectedId?: string | null;
|
|
1423
|
+
defaultSelectedId?: string | null;
|
|
1424
|
+
onSelect?: (id: string) => void;
|
|
1425
|
+
/**
|
|
1426
|
+
* 행 높이 크기 — `xs` 20px / `sm` 24px(기본) / `md` 32px / `lg` 40px / `xl` 48px.
|
|
1427
|
+
* `.xs`, `.sm`, `.md`, `.lg`, `.xl` 표준 크기 클래스로 적용됩니다.
|
|
1428
|
+
*/
|
|
1429
|
+
size?: StnTreeSize;
|
|
1430
|
+
/**
|
|
1431
|
+
* 너비 프리셋 — `w160`, `w180`, `w200`, `w220`, `w240`, `full`(기본 100%).
|
|
1432
|
+
*/
|
|
1433
|
+
width?: StnTreeWidth;
|
|
1434
|
+
/**
|
|
1435
|
+
* 행 테두리 곡률 — `none` 0px / `sm` 4px(기본) / `md` 8px / `full` pill.
|
|
1436
|
+
*/
|
|
1437
|
+
radius?: StnTreeRadius;
|
|
1438
|
+
/**
|
|
1439
|
+
* 계층 가이드라인(Connector, Vertical 라인) 표시 여부. 기본 `true`.
|
|
1440
|
+
* `false`로 설정하면 가이드선이 숨겨지고 인덴트만 유지됩니다 (`.no-guides`).
|
|
1441
|
+
*/
|
|
1442
|
+
guides?: boolean;
|
|
1443
|
+
/**
|
|
1444
|
+
* 노드 앞 아이콘(폴더·서버) 전체 표시 여부. 기본 `true`.
|
|
1445
|
+
* `false`로 설정하면 모든 행에서 아이콘이 숨겨집니다.
|
|
1446
|
+
*/
|
|
1447
|
+
showIcons?: boolean;
|
|
1448
|
+
/**
|
|
1449
|
+
* 우측 끝 가시성(눈) 토글 버튼 표시 여부. 기본 `false`.
|
|
1450
|
+
*/
|
|
1451
|
+
showVisibilityToggle?: boolean;
|
|
1452
|
+
/**
|
|
1453
|
+
* 특정 노드의 눈 아이콘 클릭 시 호출되는 콜백.
|
|
1454
|
+
*/
|
|
1455
|
+
onVisibilityChange?: (id: string, visible: boolean) => void;
|
|
1456
|
+
/**
|
|
1457
|
+
* 가시성 숨김(눈 감김) 처리된 노드 ID 목록 (제어 상태).
|
|
1458
|
+
*/
|
|
1459
|
+
hiddenIds?: string[];
|
|
1460
|
+
/**
|
|
1461
|
+
* 초기 가시성 숨김(눈 감김) 처리된 노드 ID 목록 (비제어 상태).
|
|
1462
|
+
*/
|
|
1463
|
+
defaultHiddenIds?: string[];
|
|
1464
|
+
/**
|
|
1465
|
+
* Docs Playground — 특정 행에 hover/pressed/selected 비주얼을 고정합니다.
|
|
1466
|
+
* 제품 코드에서는 쓰지 마세요.
|
|
1467
|
+
*/
|
|
1468
|
+
docRowState?: {
|
|
1469
|
+
id: string;
|
|
1470
|
+
state: StnTreeDocRowState;
|
|
1471
|
+
};
|
|
1472
|
+
/**
|
|
1473
|
+
* 최대 높이(px 또는 CSS 문자열).
|
|
1474
|
+
* 지정 시 헤더는 고정되고 하위 노드 목록(`stn-tree__rows`)이 `StnScroll`로 감싸져 내부 스크롤됩니다.
|
|
1475
|
+
*/
|
|
1476
|
+
maxHeight?: number | string;
|
|
1477
|
+
/**
|
|
1478
|
+
* `maxHeight` 지정 시 적용할 StnScroll variant ('default' | 'arrows'). 기본 'default'.
|
|
1479
|
+
*/
|
|
1480
|
+
scrollVariant?: StnScrollVariant;
|
|
1481
|
+
/**
|
|
1482
|
+
* `maxHeight` 지정 시 적용할 StnScroll 두께 ('thin' | 'default' | 'thick'). 기본 'thin'.
|
|
1483
|
+
*/
|
|
1484
|
+
scrollSize?: StnScrollSize;
|
|
1485
|
+
/**
|
|
1486
|
+
* `maxHeight` 지정 시 적용할 StnScroll 색상 ('default' | 'primary' | 'secondary' | 'muted' | 'fade'). 기본 'fade'.
|
|
1487
|
+
*/
|
|
1488
|
+
scrollColor?: StnScrollColor;
|
|
1489
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
1490
|
+
|
|
921
1491
|
type StnCardProps = StnWithoutStyle<HTMLAttributes<HTMLDivElement>> & {
|
|
922
1492
|
children?: ReactNode;
|
|
923
1493
|
/** 카드 스타일 형태 ('flat': 은은한 레이어 배경, 'outlined': 외곽 테두리, 'elevated': 그림자) @default 'flat' */
|
|
@@ -959,8 +1529,14 @@ declare const StnCard: StnCardComponent;
|
|
|
959
1529
|
type StnSectionSideProps = Omit<HTMLAttributes<HTMLElement>, 'className' | 'children'> & {
|
|
960
1530
|
children?: ReactNode;
|
|
961
1531
|
className?: string;
|
|
1532
|
+
/** 상단 고정 헤더 영역 (검색창, 탭, 타이틀 등) */
|
|
1533
|
+
header?: ReactNode;
|
|
1534
|
+
/** 하단 고정 푸터 영역 (스위치, 액션 등) */
|
|
1535
|
+
footer?: ReactNode;
|
|
962
1536
|
/** true면 LNB 열 높이에 맞춰 패널을 세로로 채움 (list view + search) */
|
|
963
1537
|
fill?: boolean;
|
|
1538
|
+
/** true면 패널 너비를 100%로 가득 채움 (상단/모바일 배치 시) */
|
|
1539
|
+
fullWidth?: boolean;
|
|
964
1540
|
/** StnScroll props (orientation 고정 vertical) */
|
|
965
1541
|
scrollProps?: Omit<StnScrollProps, 'orientation' | 'children'>;
|
|
966
1542
|
};
|
|
@@ -971,8 +1547,14 @@ type StnSectionSideProps = Omit<HTMLAttributes<HTMLElement>, 'className' | 'chil
|
|
|
971
1547
|
declare const StnSectionSide: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "children" | "className"> & {
|
|
972
1548
|
children?: ReactNode;
|
|
973
1549
|
className?: string;
|
|
1550
|
+
/** 상단 고정 헤더 영역 (검색창, 탭, 타이틀 등) */
|
|
1551
|
+
header?: ReactNode;
|
|
1552
|
+
/** 하단 고정 푸터 영역 (스위치, 액션 등) */
|
|
1553
|
+
footer?: ReactNode;
|
|
974
1554
|
/** true면 LNB 열 높이에 맞춰 패널을 세로로 채움 (list view + search) */
|
|
975
1555
|
fill?: boolean;
|
|
1556
|
+
/** true면 패널 너비를 100%로 가득 채움 (상단/모바일 배치 시) */
|
|
1557
|
+
fullWidth?: boolean;
|
|
976
1558
|
/** StnScroll props (orientation 고정 vertical) */
|
|
977
1559
|
scrollProps?: Omit<StnScrollProps, "orientation" | "children">;
|
|
978
1560
|
} & react.RefAttributes<HTMLElement>>;
|
|
@@ -1295,100 +1877,6 @@ type StnChipProps = StnWithoutStyle<Omit<HTMLAttributes<HTMLSpanElement>, 'class
|
|
|
1295
1877
|
};
|
|
1296
1878
|
declare function StnChip(props: StnChipProps): react_jsx_runtime.JSX.Element;
|
|
1297
1879
|
|
|
1298
|
-
type StnSeverityLevel = 'critical' | 'major' | 'minor' | 'warning';
|
|
1299
|
-
type StnSeverityVariant = 'badge' | 'filter' | 'glow' | 'solid';
|
|
1300
|
-
type StnSeveritySize = 'sm' | 'md' | 'lg';
|
|
1301
|
-
interface StnSeverityBadgeProps extends react__default.ButtonHTMLAttributes<HTMLButtonElement | HTMLSpanElement> {
|
|
1302
|
-
/** 심각도: critical, major, minor, warning */
|
|
1303
|
-
severity: StnSeverityLevel;
|
|
1304
|
-
/** 표시 모드: badge (기본 깔끔한 솔리드), glow (네온 블러/글로우 발광), filter (필터 토글 버튼) */
|
|
1305
|
-
variant?: StnSeverityVariant;
|
|
1306
|
-
/** 뱃지 크기: 'sm' (18px), 'md' (20px - 기본값), 'lg' (24px) */
|
|
1307
|
-
size?: StnSeveritySize;
|
|
1308
|
-
/** 라운드(알약/원형) 모서리 적용 여부 (기본값: false, 4px) */
|
|
1309
|
-
round?: boolean;
|
|
1310
|
-
/** 아이콘 표시 여부 (기본값: true) */
|
|
1311
|
-
showIcon?: boolean;
|
|
1312
|
-
/** 아이콘 전용 모드 (텍스트 없이 정사각/원형 심각도 아이콘만 표시) */
|
|
1313
|
-
iconOnly?: boolean;
|
|
1314
|
-
/** 블러 / 네온 글로우 발광 효과 적용 여부 (variant="glow"와 동일, 기본값: false) */
|
|
1315
|
-
glow?: boolean;
|
|
1316
|
-
/** glow의 별칭 prop (blur 발광 효과 제어) */
|
|
1317
|
-
blur?: boolean;
|
|
1318
|
-
/** 텍스트 라벨 (미지정 시 기본 라벨 표시) */
|
|
1319
|
-
label?: react__default.ReactNode;
|
|
1320
|
-
/** 필터 모드일 때 활성화(선택) 상태 */
|
|
1321
|
-
active?: boolean;
|
|
1322
|
-
/** 클릭 이벤트 핸들러 */
|
|
1323
|
-
onClick?: react__default.MouseEventHandler<HTMLElement>;
|
|
1324
|
-
/** 추가 클래스 */
|
|
1325
|
-
className?: string;
|
|
1326
|
-
children?: react__default.ReactNode;
|
|
1327
|
-
}
|
|
1328
|
-
/**
|
|
1329
|
-
* StnSeverityBadge
|
|
1330
|
-
* 알람 심각도(Critical, Major, Minor, Warning)를 명확하게 표시하거나
|
|
1331
|
-
* 대시보드에서 다중 필터 토글 용도로 사용하는 독립 컴포넌트입니다.
|
|
1332
|
-
*/
|
|
1333
|
-
declare const StnSeverityBadge: react__default.ForwardRefExoticComponent<StnSeverityBadgeProps & react__default.RefAttributes<HTMLElement>>;
|
|
1334
|
-
interface StnSeverityFilterProps {
|
|
1335
|
-
/** 현재 선택된 심각도 레벨 배열 */
|
|
1336
|
-
value?: StnSeverityLevel[];
|
|
1337
|
-
/** 선택 변경 콜백 */
|
|
1338
|
-
onChange?: (nextValue: StnSeverityLevel[]) => void;
|
|
1339
|
-
/** 비활성화할 심각도 목록 */
|
|
1340
|
-
disabledSeverities?: StnSeverityLevel[];
|
|
1341
|
-
/** 아이콘 표시 여부 (기본: true) */
|
|
1342
|
-
showIcon?: boolean;
|
|
1343
|
-
/** 추가 클래스 */
|
|
1344
|
-
className?: string;
|
|
1345
|
-
}
|
|
1346
|
-
/**
|
|
1347
|
-
* StnSeverityFilter
|
|
1348
|
-
* 대시보드 및 실시간 장애 목록 상단에서 사용되는 4단계 심각도 필터 그룹 컴포넌트입니다.
|
|
1349
|
-
*/
|
|
1350
|
-
declare const StnSeverityFilter: react__default.FC<StnSeverityFilterProps>;
|
|
1351
|
-
|
|
1352
|
-
type StnSystemChipTone = 'cr' | 'mj' | 'mn' | 'wr' | 'CR' | 'MJ' | 'MN' | 'WR' | 'info' | 'success' | 'purple' | 'neutral' | 'critical' | 'major' | 'minor' | 'warning' | 'teal' | 'error' | 'warn' | string;
|
|
1353
|
-
type StnSystemChipItem = {
|
|
1354
|
-
id: string;
|
|
1355
|
-
/** 점(dot) 색상 톤: 2글자 표준(cr, mj, mn, wr) 또는 info, success, purple 등 */
|
|
1356
|
-
tone?: StnSystemChipTone;
|
|
1357
|
-
/** 점(dot) 커스텀 색상 값 (CSS 컬러 또는 var(--...)) */
|
|
1358
|
-
dotColor?: string;
|
|
1359
|
-
/** 수치 카운트 또는 텍스트 */
|
|
1360
|
-
count?: number | string;
|
|
1361
|
-
value?: number | string;
|
|
1362
|
-
/** 텍스트 라벨 (선택) */
|
|
1363
|
-
label?: string;
|
|
1364
|
-
};
|
|
1365
|
-
type StnSystemChipProps = HTMLAttributes<HTMLDivElement> & {
|
|
1366
|
-
/** 1개, 2개, 3개, 4개 등 원하는 숫자만큼의 아이템 배열 */
|
|
1367
|
-
items: StnSystemChipItem[];
|
|
1368
|
-
/** 텍스트 라벨 표시 여부 */
|
|
1369
|
-
showLabel?: boolean;
|
|
1370
|
-
/** 테두리(외곽선 및 구분선) 표시 여부 (기본값: true) */
|
|
1371
|
-
border?: boolean;
|
|
1372
|
-
/** 테두리 표시 여부 alias (기본값: true) */
|
|
1373
|
-
bordered?: boolean;
|
|
1374
|
-
/** 텍스트 위치: 'right' (기본: 점이 왼쪽, 텍스트가 오른쪽) | 'left' (텍스트가 왼쪽, 점이 오른쪽) */
|
|
1375
|
-
textPosition?: 'left' | 'right';
|
|
1376
|
-
/**
|
|
1377
|
-
* 핵심 1개만 노출 · 호버/포커스 시 전체 펼침.
|
|
1378
|
-
* - 생략(`auto`): `stn-header` ≤1200px 에서 CSS 자동 적용
|
|
1379
|
-
* - `true`: 항상 compact
|
|
1380
|
-
* - `false`: 항상 전체 노출
|
|
1381
|
-
*/
|
|
1382
|
-
compact?: boolean;
|
|
1383
|
-
className?: string;
|
|
1384
|
-
};
|
|
1385
|
-
/**
|
|
1386
|
-
* System Chip (헤더 시스템 상태 요약 바)
|
|
1387
|
-
* [ 🔴 0 | 🟠 12 | 🟡 2 | 🔵 3 ] 형태.
|
|
1388
|
-
* compact 모드에서는 핵심 1개만 보이고 호버 시 전체가 펼쳐집니다.
|
|
1389
|
-
*/
|
|
1390
|
-
declare function StnSystemChip({ items, showLabel, border, bordered, textPosition, compact, className, ...rest }: StnSystemChipProps): react_jsx_runtime.JSX.Element;
|
|
1391
|
-
|
|
1392
1880
|
type StnToggleButtonSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
1393
1881
|
type StnToggleButtonColor = 'primary' | 'secondary' | 'success' | 'critical' | 'major' | 'minor' | 'warning' | 'neutral' | (string & {});
|
|
1394
1882
|
type StnToggleButtonGradient = 'none' | 'main' | 'primary' | 'secondary' | 'critical' | 'major' | 'minor' | 'warning';
|
|
@@ -1402,7 +1890,7 @@ type StnToggleButtonProps = StnWithoutStyle<Omit<ButtonHTMLAttributes<HTMLButton
|
|
|
1402
1890
|
defaultPressed?: boolean;
|
|
1403
1891
|
/** 토글 상태 변경 콜백 (true: ON, false: OFF) */
|
|
1404
1892
|
onChange?: (pressed: boolean) => void;
|
|
1405
|
-
/** 크기 ('sm': 24px, 'md': 32px 기본, 'lg':
|
|
1893
|
+
/** 크기 ('sm': 24px, 'md': 32px 기본, 'lg': 40px, 'xl': 56px) — 8px 그리드 표준 통일 스케일 @default 'md' */
|
|
1406
1894
|
size?: StnToggleButtonSize;
|
|
1407
1895
|
/** 활성(ON) 상태 시맨틱 솔리드 색상 @default 'primary' */
|
|
1408
1896
|
color?: StnToggleButtonColor;
|
|
@@ -1435,7 +1923,7 @@ declare const StnToggleButton: react.ForwardRefExoticComponent<StnWithoutStyle<O
|
|
|
1435
1923
|
defaultPressed?: boolean;
|
|
1436
1924
|
/** 토글 상태 변경 콜백 (true: ON, false: OFF) */
|
|
1437
1925
|
onChange?: (pressed: boolean) => void;
|
|
1438
|
-
/** 크기 ('sm': 24px, 'md': 32px 기본, 'lg':
|
|
1926
|
+
/** 크기 ('sm': 24px, 'md': 32px 기본, 'lg': 40px, 'xl': 56px) — 8px 그리드 표준 통일 스케일 @default 'md' */
|
|
1439
1927
|
size?: StnToggleButtonSize;
|
|
1440
1928
|
/** 활성(ON) 상태 시맨틱 솔리드 색상 @default 'primary' */
|
|
1441
1929
|
color?: StnToggleButtonColor;
|
|
@@ -1601,7 +2089,11 @@ type StnSegmentedShared = StnWithoutStyle<{
|
|
|
1601
2089
|
orientation?: StnSegmentedOrientation;
|
|
1602
2090
|
/** 수직 세로 배치 여부 @default false */
|
|
1603
2091
|
vertical?: boolean;
|
|
1604
|
-
/** 전체 너비 확장 여부 @default false */
|
|
2092
|
+
/** 전체 너비 100% 확장 여부 (STN 4대 표준 규격 Width full) @default false */
|
|
2093
|
+
fullWidth?: boolean;
|
|
2094
|
+
/** 너비 프리셋 (예: 'full') */
|
|
2095
|
+
width?: 'full' | string;
|
|
2096
|
+
/** 전체 너비 확장 여부 (fullWidth 별칭) @default false */
|
|
1605
2097
|
block?: boolean;
|
|
1606
2098
|
/** 전체 비활성화 */
|
|
1607
2099
|
disabled?: boolean;
|
|
@@ -1650,6 +2142,16 @@ type StnDropdownProps = {
|
|
|
1650
2142
|
readOnly?: boolean;
|
|
1651
2143
|
/** 선택되지 않았을 때 표시할 안내 문구 */
|
|
1652
2144
|
placeholder?: string;
|
|
2145
|
+
/** 라벨 텍스트 또는 노드 */
|
|
2146
|
+
label?: ReactNode;
|
|
2147
|
+
/** 라벨 앞에 표시할 아이콘 (slug 또는 ReactNode) */
|
|
2148
|
+
labelIcon?: ReactNode;
|
|
2149
|
+
/** 아이콘 — labelIcon 또는 드롭다운 앞 아이콘 */
|
|
2150
|
+
icon?: ReactNode;
|
|
2151
|
+
/** 라벨 위치 ('left' | 'right' | 'top') - 기본 'left' */
|
|
2152
|
+
labelPosition?: 'left' | 'right' | 'top';
|
|
2153
|
+
/** 필수 입력 여부 (`*` 표시) */
|
|
2154
|
+
required?: boolean;
|
|
1653
2155
|
/** 필드 보조 텍스트 (도움말/에러 안내) */
|
|
1654
2156
|
helperText?: ReactNode;
|
|
1655
2157
|
/** 보조 텍스트 위치 (top | bottom | left | right, 기본값 bottom) */
|
|
@@ -1672,7 +2174,7 @@ type StnDropdownProps = {
|
|
|
1672
2174
|
/**
|
|
1673
2175
|
* StnDropdown — 디자인 시스템 표준 커스텀 드롭다운 (`div.selected` + `ul.select_option`).
|
|
1674
2176
|
*/
|
|
1675
|
-
declare function StnDropdown({ options, size, variant, direction, modifier, value: valueProp, defaultValue, onChange, disabled, error, readOnly, placeholder, helperText, helperTextPosition, prominent, fullWidth, width, className, id: idProp, 'aria-label': ariaLabel, ...divRest }: StnDropdownProps): react_jsx_runtime.JSX.Element;
|
|
2177
|
+
declare function StnDropdown({ options, size, variant, direction, modifier, value: valueProp, defaultValue, onChange, disabled, error, readOnly, placeholder, label, labelIcon, icon, labelPosition, required, helperText, helperTextPosition, prominent, fullWidth, width, className, id: idProp, 'aria-label': ariaLabel, ...divRest }: StnDropdownProps): react_jsx_runtime.JSX.Element;
|
|
1676
2178
|
|
|
1677
2179
|
type StnDropdownMenuProps = Omit<StnDropdownProps, 'size' | 'modifier'>;
|
|
1678
2180
|
/**
|
|
@@ -1682,7 +2184,7 @@ type StnDropdownMenuProps = Omit<StnDropdownProps, 'size' | 'modifier'>;
|
|
|
1682
2184
|
*/
|
|
1683
2185
|
declare function StnDropdownMenu({ className, ...rest }: StnDropdownMenuProps): react_jsx_runtime.JSX.Element;
|
|
1684
2186
|
|
|
1685
|
-
type StnTextFieldVariant = 'outlined' | 'filled' | 'standard';
|
|
2187
|
+
type StnTextFieldVariant = 'outlined' | 'filled' | 'standard' | 'transparent';
|
|
1686
2188
|
/** 색 — 기본 primary. 토큰: --stn-feedback-* */
|
|
1687
2189
|
type StnTextFieldColor = 'primary' | 'success' | 'error' | 'warning' | 'info' | 'secondary';
|
|
1688
2190
|
/** 아이콘 위치 — left | right */
|
|
@@ -1698,23 +2200,21 @@ type StnTextFieldProps = StnWithoutStyle<Omit<InputHTMLAttributes<HTMLInputEleme
|
|
|
1698
2200
|
color?: StnTextFieldColor;
|
|
1699
2201
|
/** 오류 테두리 — `aria-invalid`도 함께 설정 */
|
|
1700
2202
|
invalid?: boolean;
|
|
1701
|
-
/** width 100% — `
|
|
2203
|
+
/** width 100% — `full` */
|
|
1702
2204
|
fullWidth?: boolean;
|
|
1703
2205
|
/** 프리셋 80·100·140·180·200 · `100%`/`full` · 그 외 px/string */
|
|
1704
2206
|
width?: StnInputWidthValue;
|
|
1705
2207
|
/** 라벨 텍스트 또는 노드 */
|
|
1706
2208
|
label?: ReactNode;
|
|
2209
|
+
/** 라벨 앞에 표시할 아이콘 (slug 또는 ReactNode) */
|
|
2210
|
+
labelIcon?: ReactNode;
|
|
1707
2211
|
/** 라벨 위치 ('left' | 'right' | 'top') - 기본 'left' */
|
|
1708
2212
|
labelPosition?: StnTextFieldLabelPosition;
|
|
1709
2213
|
/** 필수 입력 여부 (`*` 표시) */
|
|
1710
2214
|
required?: boolean;
|
|
1711
|
-
/**
|
|
1712
|
-
prefix?: ReactNode;
|
|
1713
|
-
/** 오른쪽 아이콘 — slug 또는 ReactNode */
|
|
1714
|
-
suffix?: ReactNode;
|
|
1715
|
-
/** 아이콘 — slug 또는 ReactNode. 위치는 iconPosition */
|
|
2215
|
+
/** 아이콘 — Iconography slug (`line/user`) 또는 ReactNode. 위치는 iconPosition으로 지정 */
|
|
1716
2216
|
icon?: ReactNode;
|
|
1717
|
-
/** 아이콘 위치
|
|
2217
|
+
/** 아이콘 위치 ('left' | 'right') @default 'left' */
|
|
1718
2218
|
iconPosition?: StnTextFieldIconPosition;
|
|
1719
2219
|
/** 필드 하단 왼쪽 캡션 */
|
|
1720
2220
|
helperText?: ReactNode;
|
|
@@ -1728,63 +2228,172 @@ declare const StnTextField: react.ForwardRefExoticComponent<StnWithoutStyle<Omit
|
|
|
1728
2228
|
color?: StnTextFieldColor;
|
|
1729
2229
|
/** 오류 테두리 — `aria-invalid`도 함께 설정 */
|
|
1730
2230
|
invalid?: boolean;
|
|
1731
|
-
/** width 100% — `
|
|
2231
|
+
/** width 100% — `full` */
|
|
1732
2232
|
fullWidth?: boolean;
|
|
1733
2233
|
/** 프리셋 80·100·140·180·200 · `100%`/`full` · 그 외 px/string */
|
|
1734
2234
|
width?: StnInputWidthValue;
|
|
1735
2235
|
/** 라벨 텍스트 또는 노드 */
|
|
1736
2236
|
label?: ReactNode;
|
|
2237
|
+
/** 라벨 앞에 표시할 아이콘 (slug 또는 ReactNode) */
|
|
2238
|
+
labelIcon?: ReactNode;
|
|
1737
2239
|
/** 라벨 위치 ('left' | 'right' | 'top') - 기본 'left' */
|
|
1738
2240
|
labelPosition?: StnTextFieldLabelPosition;
|
|
1739
2241
|
/** 필수 입력 여부 (`*` 표시) */
|
|
1740
2242
|
required?: boolean;
|
|
1741
|
-
/**
|
|
1742
|
-
prefix?: ReactNode;
|
|
1743
|
-
/** 오른쪽 아이콘 — slug 또는 ReactNode */
|
|
1744
|
-
suffix?: ReactNode;
|
|
1745
|
-
/** 아이콘 — slug 또는 ReactNode. 위치는 iconPosition */
|
|
2243
|
+
/** 아이콘 — Iconography slug (`line/user`) 또는 ReactNode. 위치는 iconPosition으로 지정 */
|
|
1746
2244
|
icon?: ReactNode;
|
|
1747
|
-
/** 아이콘 위치
|
|
2245
|
+
/** 아이콘 위치 ('left' | 'right') @default 'left' */
|
|
1748
2246
|
iconPosition?: StnTextFieldIconPosition;
|
|
1749
2247
|
/** 필드 하단 왼쪽 캡션 */
|
|
1750
2248
|
helperText?: ReactNode;
|
|
1751
2249
|
className?: string;
|
|
1752
2250
|
} & react.RefAttributes<HTMLInputElement>>;
|
|
1753
2251
|
|
|
2252
|
+
/** 외형 스타일 변형: outline (기본) | transparent (테두리·배경 없음 — 래퍼 내부 조합용) */
|
|
2253
|
+
type StnDateRangeFieldVariant = 'outline' | 'transparent';
|
|
1754
2254
|
type StnDateRangeFieldProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'value'> & {
|
|
1755
2255
|
size?: StnDateRangeFieldSize | 's' | 'm' | 'l' | 'sm' | 'md' | 'lg';
|
|
2256
|
+
/** 외형 스타일 변형: outline (기본) | transparent (테두리·배경 없음) */
|
|
2257
|
+
variant?: StnDateRangeFieldVariant;
|
|
1756
2258
|
start?: Date | string | null;
|
|
1757
2259
|
end?: Date | string | null;
|
|
1758
2260
|
/** 표시 포맷 — 기본 `YYYY-MM-DD HH:mm:ss` */
|
|
1759
2261
|
format?: (date: Date) => string;
|
|
1760
2262
|
startPlaceholder?: string;
|
|
1761
2263
|
endPlaceholder?: string;
|
|
2264
|
+
/** 라벨 텍스트 또는 노드 */
|
|
2265
|
+
label?: ReactNode;
|
|
2266
|
+
/** 라벨 앞에 표시할 아이콘 (slug 또는 ReactNode) */
|
|
2267
|
+
labelIcon?: ReactNode;
|
|
2268
|
+
/** 아이콘 — labelIcon의 alias */
|
|
2269
|
+
icon?: ReactNode;
|
|
2270
|
+
/** 라벨 위치 ('left' | 'right' | 'top') - 기본 'left' */
|
|
2271
|
+
labelPosition?: 'left' | 'right' | 'top';
|
|
2272
|
+
/** 필수 입력 여부 (`*` 표시) */
|
|
2273
|
+
required?: boolean;
|
|
2274
|
+
/** 필드 하단 보조 텍스트 */
|
|
2275
|
+
helperText?: ReactNode;
|
|
1762
2276
|
invalid?: boolean;
|
|
1763
2277
|
fullWidth?: boolean;
|
|
1764
|
-
|
|
2278
|
+
/** 프리셋 80·100·140·180·200 · `100%`/`full` · 그 외 px/string */
|
|
2279
|
+
width?: StnInputWidthValue;
|
|
1765
2280
|
className?: string;
|
|
1766
2281
|
};
|
|
1767
2282
|
declare const StnDateRangeField: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "value"> & {
|
|
1768
2283
|
size?: StnDateRangeFieldSize | "s" | "m" | "l" | "sm" | "md" | "lg";
|
|
2284
|
+
/** 외형 스타일 변형: outline (기본) | transparent (테두리·배경 없음) */
|
|
2285
|
+
variant?: StnDateRangeFieldVariant;
|
|
1769
2286
|
start?: Date | string | null;
|
|
1770
2287
|
end?: Date | string | null;
|
|
1771
2288
|
/** 표시 포맷 — 기본 `YYYY-MM-DD HH:mm:ss` */
|
|
1772
2289
|
format?: (date: Date) => string;
|
|
1773
2290
|
startPlaceholder?: string;
|
|
1774
2291
|
endPlaceholder?: string;
|
|
2292
|
+
/** 라벨 텍스트 또는 노드 */
|
|
2293
|
+
label?: ReactNode;
|
|
2294
|
+
/** 라벨 앞에 표시할 아이콘 (slug 또는 ReactNode) */
|
|
2295
|
+
labelIcon?: ReactNode;
|
|
2296
|
+
/** 아이콘 — labelIcon의 alias */
|
|
2297
|
+
icon?: ReactNode;
|
|
2298
|
+
/** 라벨 위치 ('left' | 'right' | 'top') - 기본 'left' */
|
|
2299
|
+
labelPosition?: "left" | "right" | "top";
|
|
2300
|
+
/** 필수 입력 여부 (`*` 표시) */
|
|
2301
|
+
required?: boolean;
|
|
2302
|
+
/** 필드 하단 보조 텍스트 */
|
|
2303
|
+
helperText?: ReactNode;
|
|
1775
2304
|
invalid?: boolean;
|
|
1776
2305
|
fullWidth?: boolean;
|
|
1777
|
-
|
|
2306
|
+
/** 프리셋 80·100·140·180·200 · `100%`/`full` · 그 외 px/string */
|
|
2307
|
+
width?: StnInputWidthValue;
|
|
1778
2308
|
className?: string;
|
|
1779
2309
|
} & react.RefAttributes<HTMLButtonElement>>;
|
|
1780
2310
|
|
|
2311
|
+
/** 높이 규격: sm 32px · md 40px(기본) · lg 56px */
|
|
2312
|
+
type StnLabelPrefixSize = 'sm' | 'md' | 'lg';
|
|
2313
|
+
/** 외형 변형: outline(기본) · filled · standard · transparent */
|
|
2314
|
+
type StnLabelPrefixVariant = 'outline' | 'filled' | 'standard' | 'transparent';
|
|
2315
|
+
/** 레이블 위치: prefix(왼쪽, 기본) · suffix(오른쪽) */
|
|
2316
|
+
type StnLabelPrefixPosition = 'prefix' | 'suffix';
|
|
2317
|
+
/** 보더 반경 오버라이드 */
|
|
2318
|
+
type StnLabelPrefixRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl';
|
|
2319
|
+
type StnLabelPrefixProps = {
|
|
2320
|
+
/** 레이블 영역에 표시할 텍스트 또는 노드 */
|
|
2321
|
+
label: ReactNode;
|
|
2322
|
+
/** 레이블 앞에 표시할 아이콘 (ReactNode) */
|
|
2323
|
+
labelIcon?: ReactNode;
|
|
2324
|
+
/** 레이블 앞에 표시할 체크박스 활성화 여부 */
|
|
2325
|
+
checkbox?: boolean;
|
|
2326
|
+
/** 체크박스 체크 여부 (controlled) */
|
|
2327
|
+
checked?: boolean;
|
|
2328
|
+
/** 체크박스 기본 체크 여부 (uncontrolled) */
|
|
2329
|
+
defaultChecked?: boolean;
|
|
2330
|
+
/** 체크박스 변경 이벤트 핸들러 */
|
|
2331
|
+
onCheckboxChange?: (checked: boolean) => void;
|
|
2332
|
+
/** 체크박스 비활성화 여부 */
|
|
2333
|
+
checkboxDisabled?: boolean;
|
|
2334
|
+
/** 체크박스 크기 ('sm': 14px, 'md': 18px, 'lg': 22px). 기본값은 size에 따름 */
|
|
2335
|
+
checkboxSize?: StnCheckboxSize;
|
|
2336
|
+
/** 체크 해제 시 내부 자식 컨트롤을 비활성화(disabled)할지 여부 @default false */
|
|
2337
|
+
disableControlWhenUnchecked?: boolean;
|
|
2338
|
+
/** 커스텀 체크박스 노드 슬롯 (직접 <StnCheckbox /> 등을 주입) */
|
|
2339
|
+
checkboxSlot?: ReactNode;
|
|
2340
|
+
/** 레이블 위치: prefix(왼쪽, 기본) · suffix(오른쪽) */
|
|
2341
|
+
labelPosition?: StnLabelPrefixPosition;
|
|
2342
|
+
/** 필수 입력 여부 (`*` 표시) */
|
|
2343
|
+
required?: boolean;
|
|
2344
|
+
/** 높이 규격: sm(32px) · md(40px, 기본) · lg(56px) */
|
|
2345
|
+
size?: StnLabelPrefixSize;
|
|
2346
|
+
/** 외형 변형: outline(기본) · filled · standard · transparent */
|
|
2347
|
+
variant?: StnLabelPrefixVariant;
|
|
2348
|
+
/** 색상 상태: primary · secondary · success · error · info */
|
|
2349
|
+
color?: 'primary' | 'secondary' | 'success' | 'error' | 'info';
|
|
2350
|
+
/** 에러/유효성 실패 여부 */
|
|
2351
|
+
error?: boolean;
|
|
2352
|
+
/** 에러/유효성 실패 여부 (error의 alias) */
|
|
2353
|
+
invalid?: boolean;
|
|
2354
|
+
/** 보더 반경 오버라이드 (기본값은 size에 따름) */
|
|
2355
|
+
radius?: StnLabelPrefixRadius;
|
|
2356
|
+
/** 너비 100% */
|
|
2357
|
+
fullWidth?: boolean;
|
|
2358
|
+
/** 너비 프리셋: 80·100·120·140·160·180·200·'full' */
|
|
2359
|
+
width?: StnInputWidthValue;
|
|
2360
|
+
/** 하단 안내/에러 설명 문구 */
|
|
2361
|
+
helperText?: ReactNode;
|
|
2362
|
+
/** 비활성화 여부 */
|
|
2363
|
+
disabled?: boolean;
|
|
2364
|
+
/** 내부 컴포넌트 (StnDropdown·StnTextField·StnDateRangeField 등 — variant="transparent" 권장) */
|
|
2365
|
+
children: ReactNode;
|
|
2366
|
+
className?: string;
|
|
2367
|
+
} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className'>;
|
|
2368
|
+
/**
|
|
2369
|
+
* StnLabelPrefix — 아이콘+레이블이 내장된 입력 래퍼 컴포넌트.
|
|
2370
|
+
*
|
|
2371
|
+
* 내부에 `StnDropdown`, `StnTextField`, `StnDateRangeField` 등을
|
|
2372
|
+
* `variant="transparent"`로 배치하여 사용합니다.
|
|
2373
|
+
*
|
|
2374
|
+
* @example
|
|
2375
|
+
* ```tsx
|
|
2376
|
+
* <StnLabelPrefix
|
|
2377
|
+
* label="보고서 종류"
|
|
2378
|
+
* labelIcon={<StnIcon name="line/file-report" size={16} />}
|
|
2379
|
+
* required
|
|
2380
|
+
* error={hasError}
|
|
2381
|
+
* helperText={hasError ? "필수 선택 항목입니다." : "조회할 보고서를 선택하세요."}
|
|
2382
|
+
* size="md"
|
|
2383
|
+
* >
|
|
2384
|
+
* <StnDropdown variant="transparent" options={options} value={val} onChange={setVal} fullWidth />
|
|
2385
|
+
* </StnLabelPrefix>
|
|
2386
|
+
* ```
|
|
2387
|
+
*/
|
|
2388
|
+
declare function StnLabelPrefix({ label, labelIcon, checkbox, checked, defaultChecked, onCheckboxChange, checkboxDisabled, checkboxSize, disableControlWhenUnchecked, checkboxSlot, labelPosition, required, size, variant, color, error, invalid, radius, fullWidth, width, helperText, disabled, children, className, id: idProp, ...rest }: StnLabelPrefixProps): react_jsx_runtime.JSX.Element;
|
|
2389
|
+
|
|
1781
2390
|
type StnSearchRequirementBarProps = HTMLAttributes<HTMLDivElement> & {
|
|
1782
2391
|
children?: ReactNode;
|
|
1783
2392
|
className?: string;
|
|
1784
2393
|
/**
|
|
1785
2394
|
* 여백 밀도
|
|
1786
|
-
* - default: padding
|
|
1787
|
-
* - compact: padding
|
|
2395
|
+
* - default: padding 16px, gap 16px
|
|
2396
|
+
* - compact: padding 12px, gap 12px
|
|
1788
2397
|
*/
|
|
1789
2398
|
density?: 'default' | 'compact';
|
|
1790
2399
|
};
|
|
@@ -1814,7 +2423,7 @@ type StnSearchRequirementBarFieldProps = HTMLAttributes<HTMLDivElement> & {
|
|
|
1814
2423
|
};
|
|
1815
2424
|
declare function StnSearchRequirementBarField({ label, children, className, labelClassName, controlClassName, ...rest }: StnSearchRequirementBarFieldProps): react_jsx_runtime.JSX.Element;
|
|
1816
2425
|
type StnSearchRequirementBarSearchButtonProps = StnButtonProps;
|
|
1817
|
-
declare function StnSearchRequirementBarSearchButton({ children, size, icon, className, ...rest }: StnSearchRequirementBarSearchButtonProps): react_jsx_runtime.JSX.Element;
|
|
2426
|
+
declare function StnSearchRequirementBarSearchButton({ children, size, variant, icon, className, ...rest }: StnSearchRequirementBarSearchButtonProps): react_jsx_runtime.JSX.Element;
|
|
1818
2427
|
type StnSearchRequirementBarExportProps = Omit<StnButtonProps, 'children' | 'icon'> & {
|
|
1819
2428
|
/** 기본 `line/file-analytics` (엑셀/다운로드) */
|
|
1820
2429
|
name?: string;
|
|
@@ -1921,7 +2530,7 @@ type StnDateRangePickerFieldProps = Omit<StnDateRangeFieldProps, 'start' | 'end'
|
|
|
1921
2530
|
pickerClassName?: string;
|
|
1922
2531
|
pickerStyle?: CSSProperties;
|
|
1923
2532
|
};
|
|
1924
|
-
declare function StnDateRangePickerField({ value: valueProp, defaultValue, onChange, showTime, format, className, pickerClassName, pickerStyle, disabled, ...fieldProps }: StnDateRangePickerFieldProps): react_jsx_runtime.JSX.Element;
|
|
2533
|
+
declare function StnDateRangePickerField({ value: valueProp, defaultValue, onChange, showTime, format: formatProp, className, pickerClassName, pickerStyle, disabled, ...fieldProps }: StnDateRangePickerFieldProps): react_jsx_runtime.JSX.Element;
|
|
1925
2534
|
|
|
1926
2535
|
type StnTopologyNodeStatus = 'normal' | 'minor' | 'major' | 'critical' | 'warning';
|
|
1927
2536
|
type StnTopologyNodeShape = 'circle' | 'hexagon' | 'diamond' | 'square';
|
|
@@ -2310,6 +2919,12 @@ type StnAlertCenterPanelProps = {
|
|
|
2310
2919
|
defaultTab?: StnAlertCenterTab;
|
|
2311
2920
|
/** 패널 너비 크기 스케일 ('sm': 580px, 'md': 700px 기본, 'lg': 820px) @default 'md' */
|
|
2312
2921
|
size?: StnAlertCenterSize;
|
|
2922
|
+
/** 긴 텍스트 오버플로우 기본 처리 ('wrap': 줄바꿈, 'ellipsis': 말줄임표, 'marquee': 전광판 흘러가기) @default 'wrap' */
|
|
2923
|
+
textOverflow?: StnAlertCenterTextOverflow;
|
|
2924
|
+
/** 제목(Title) 텍스트 오버플로우 개별 지정 (미지정 시 textOverflow 사용) */
|
|
2925
|
+
titleOverflow?: StnAlertCenterTextOverflow;
|
|
2926
|
+
/** 설명(Description) 텍스트 오버플로우 개별 지정 (미지정 시 textOverflow 사용) */
|
|
2927
|
+
descOverflow?: StnAlertCenterTextOverflow;
|
|
2313
2928
|
tabIds?: Partial<Record<StnAlertCenterTab, string>>;
|
|
2314
2929
|
tabName?: string;
|
|
2315
2930
|
onClose?: () => void;
|
|
@@ -2319,7 +2934,16 @@ type StnAlertCenterPanelProps = {
|
|
|
2319
2934
|
closeLabel?: string;
|
|
2320
2935
|
className?: string;
|
|
2321
2936
|
};
|
|
2322
|
-
|
|
2937
|
+
type StnAlertCardProps = {
|
|
2938
|
+
item: StnAlertCenterAlertItem;
|
|
2939
|
+
titleOverflow?: StnAlertCenterTextOverflow;
|
|
2940
|
+
descOverflow?: StnAlertCenterTextOverflow;
|
|
2941
|
+
onClick?: () => void;
|
|
2942
|
+
className?: string;
|
|
2943
|
+
};
|
|
2944
|
+
/** StnAlertCard — StnCard 기반의 단독 알림 카드 컴포넌트 */
|
|
2945
|
+
declare function StnAlertCard({ item, titleOverflow, descOverflow, onClick, className, }: StnAlertCardProps): react_jsx_runtime.JSX.Element;
|
|
2946
|
+
declare function StnAlertCenterPanel({ title, alerts, workItems, deployItems, defaultTab, size, textOverflow, titleOverflow, descOverflow, tabIds, tabName: _tabName, onClose, onMarkAllAsRead, onManageSettings, onItemClick, closeLabel, className, }: StnAlertCenterPanelProps): react_jsx_runtime.JSX.Element;
|
|
2323
2947
|
|
|
2324
2948
|
type StnAlertCenterDocPreviewProps = StnAlertCenterPanelProps & {
|
|
2325
2949
|
theme?: StnTheme;
|
|
@@ -3682,4 +4306,4 @@ interface StnEventBannerProps extends Omit<react__default.HTMLAttributes<HTMLDiv
|
|
|
3682
4306
|
/** 위험도별 이벤트 배너. placement와 severity로 배치·스타일을 고릅니다. */
|
|
3683
4307
|
declare const StnEventBanner: react__default.ForwardRefExoticComponent<StnEventBannerProps & react__default.RefAttributes<HTMLDivElement>>;
|
|
3684
4308
|
|
|
3685
|
-
export { AlertCenterDashboard, type AlertCenterDashboardProps, AlertCenterPageScaffold, type AlertCenterPageScaffoldProps, DashboardPageScaffold, type DashboardPageScaffoldProps, type DashboardType, ListPageScaffold, type ListPageScaffoldProps, LoginPageScaffold, type LoginPageScaffoldProps, PubChartSample, type PubDisabilityStatusItem, PubDisabilityStatusList, type PubTop5BarRow, PubTop5EquipmentBars, type PubTrafficTop5BarRow, PubTrafficTop5Bars, STN_TABLE_FOOTER_MAX_ACTIONS, STN_TOPOLOGY_NODE_ICONS, STN_TOPOLOGY_NODE_SHAPES, STN_TOPOLOGY_NODE_SIZE, STN_TOPOLOGY_NODE_SIZES, STN_TOPOLOGY_NODE_STATUSES, STN_TOPOLOGY_STATUS_COLORS, SideNavContext, type SideNavContextValue, StnAlertCenterDocPreview, type StnAlertCenterDocPreviewProps, StnAlertCenterPanel, type StnAlertCenterPanelProps, StnBadge, type StnBadgeAnchorOrigin, type StnBadgeColor, type StnBadgeProps, type StnBadgeVariant, StnBreadcrumb, type StnBreadcrumbItem, type StnBreadcrumbMenuItem, type StnBreadcrumbProps, type StnBreadcrumbSize, type StnBreadcrumbVariant, StnButton, type StnButtonColor, type StnButtonIconPosition, type StnButtonProps, type StnButtonShape, type StnButtonSize, type StnButtonVariant, StnCard, StnCardBody, type StnCardBodyProps, StnCardFooter, type StnCardFooterProps, StnCardHeader, type StnCardHeaderProps, type StnCardProps, StnCheckbox, type StnCheckboxColor, type StnCheckboxLabelPlacement, type StnCheckboxProps, type StnCheckboxSize, StnChip, type StnChipColor, type StnChipIconPosition, type StnChipLabelPosition, type StnChipProps, type StnChipShape, type StnChipSize, type StnChipVariant, StnCircularProgress, type StnCircularProgressGradient, type StnCircularProgressLabelPosition, type StnCircularProgressProps, type StnCircularProgressSize, type StnCircularProgressTone, type StnCircularProgressTrack, StnContainer, type StnContainerMaxWidth, type StnContainerProps, StnContext, type StnContextValue, StnDashboard, type StnDashboardProps, type StnDashboardRegionProps, type StnDashboardWidgetPosition, StnDateRangeField, type StnDateRangeFieldProps, StnDateRangePicker, StnDateRangePickerField, type StnDateRangePickerFieldProps, type StnDateRangePickerProps, StnDropdown, StnDropdownMenu, type StnDropdownMenuProps, type StnDropdownProps, StnEventBanner, type StnEventBannerGap, type StnEventBannerPlacement, type StnEventBannerProps, type StnEventBannerSeverity, StnFloatingToolbar, type StnFloatingToolbarPlacement, StnFloatingToolbarPreset, type StnFloatingToolbarPresetProps, type StnFloatingToolbarProps, StnGrid, type StnGridBreakpoint, type StnGridDirection, type StnGridProps, type StnGridResponsive, type StnGridSize, type StnGridSpacing, StnHeader, StnHeaderContextTitle, StnHeaderPageTitle, type StnHeaderPageTitleProps, type StnHeaderProps, type StnHeaderRegionProps, StnHeaderSubTitle, StnHeaderTitle, type StnHeaderTitleClockProps, StnHeaderTitleDate, type StnHeaderTitleDateOptions, type StnHeaderTitleDualProps, StnHeaderTitleFramePreview, StnHeaderTitleMainText, type StnHeaderTitleProps, type StnHeaderTitleSize, StnHeaderTitleSubText, StnHeaderTitleTime, type StnHeaderTitleTimeOptions, type StnHeaderTitleTitleProps, type StnHeaderTitleVariant, StnHeaderTitleWeekday, StnHeaderToolbar, type StnHeaderToolbarProps, StnIcon, StnIconBox, type StnIconBoxColor, type StnIconBoxProps, type StnIconBoxSize, type StnIconProps, StnLayer, StnLayer0Background, type StnLayer0BackgroundColor, type StnLayer0BackgroundProps, StnLayerBackground, StnLayerContent, StnLayerDim, StnLayerModal, type StnLayerProps, type StnLayerRoleProps, StnLayerShell, type StnLayerShellProps, StnListViewLayout, StnListViewLayoutBody, type StnListViewLayoutBodyProps, StnListViewLayoutContent, StnListViewLayoutHeader, StnListViewLayoutPagination, type StnListViewLayoutProps, StnListViewLayoutSearch, StnListViewLayoutSidebar, StnListViewLayoutTable, StnLoadingSkeleton, StnLoadingSkeletonBlock, type StnLoadingSkeletonBlockProps, StnLoadingSkeletonCircle, type StnLoadingSkeletonCircleProps, StnLoadingSkeletonLine, type StnLoadingSkeletonLineProps, StnLoadingSkeletonProfile, type StnLoadingSkeletonProfileProps, type StnLoadingSkeletonProps, type StnLoadingSkeletonRootProps, StnLoadingSkeletonTable, type StnLoadingSkeletonTableProps, type StnLoadingSkeletonVariant, StnLoadingSkeletonWidget, type StnLoadingSkeletonWidgetProps, StnLoginBrandStack, type StnLoginBrandStackProps, StnLoginCard, type StnLoginCardBrandPosition, StnLoginCardGlowWrapper, type StnLoginCardGlowWrapperProps, type StnLoginCardProps, type StnLoginCardVariant, StnLoginFormFields, type StnLoginFormFieldsProps, StnLoginFormLinks, type StnLoginFormLinksProps, StnLoginFormStack, type StnLoginFormStackProps, StnLoginPlaceholder, type StnLoginPlaceholderProps, StnLoginTextField, type StnLoginTextFieldProps, StnLogo, type StnLogoProps, type StnLogoSize, type StnLogoTheme, type StnLogoVariant, StnMapCanvas, type StnMapCanvasProps, StnMapToolbar, type StnMapToolbarProps, StnPageScaffold, StnPageScaffoldLayer, type StnPageScaffoldLayerProps, StnPageScaffoldMapCanvas, type StnPageScaffoldMapCanvasProps, StnPageScaffoldMapPlaceholder, type StnPageScaffoldMapPlaceholderProps, StnPageScaffoldRegion, type StnPageScaffoldRegionProps, StnPageScaffoldRoot, type StnPageScaffoldRootProps, StnPagination, type StnPaginationItem, type StnPaginationProps, StnPopup, type StnPopupProps, type StnPopupSize, StnProgressBar, type StnProgressBarGradient, type StnProgressBarLabelAlign, type StnProgressBarLabelPosition, type StnProgressBarProps, type StnProgressBarSize, type StnProgressBarTone, type StnProgressBarTrack, StnProvider, type StnProviderProps, StnRadio, type StnRadioColor, StnRadioGroup, type StnRadioGroupLayout, type StnRadioGroupOption, type StnRadioGroupOrientation, type StnRadioGroupProps, type StnRadioLabelPlacement, type StnRadioProps, type StnRadioSize, StnScroll, type StnScrollColor, type StnScrollOrientation, type StnScrollProps, type StnScrollSize, type StnScrollVariant, StnSearchRequirementBar, StnSearchRequirementBarDemo, type StnSearchRequirementBarDemoProps, type StnSearchRequirementBarDividerProps, type StnSearchRequirementBarExportProps, type StnSearchRequirementBarFieldProps, type StnSearchRequirementBarFieldsProps, type StnSearchRequirementBarProps, type StnSearchRequirementBarSearchButtonProps, StnSectionSide, StnSectionSidePreset, type StnSectionSidePresetProps, type StnSectionSideProps, StnSegmented, type StnSegmentedMultipleProps, type StnSegmentedOption, type StnSegmentedProps, type StnSegmentedSingleProps, StnSeverityBadge, type StnSeverityBadgeProps, StnSeverityFilter, type StnSeverityFilterProps, type StnSeverityLevel, type StnSeverityVariant, type StnSideNavDropdownVariant, StnSideNavFooter, type StnSideNavFooterProps, StnSideNavGroup, type StnSideNavGroupProps, StnSideNavHeader, type StnSideNavHeaderProps, StnSideNavItem, type StnSideNavItemProps, type StnSideNavItemVariant, StnSideNavLogo, type StnSideNavLogoProps, StnSideNavMenu, type StnSideNavMenuProps, StnSideNavMobileTrigger, type StnSideNavMobileTriggerProps, StnSideNavSpacer, type StnSideNavSpacerProps, StnSideNavSub, StnSideNavSubItem, type StnSideNavSubItemProps, StnSideNavSubNav, type StnSideNavSubNavProps, type StnSideNavSubNavVariant, type StnSideNavSubProps, StnSideNavToggle, type StnSideNavToggleProps, StnSideNavWatermark, type StnSideNavWatermarkProps, StnSideNavigation, type StnSideNavigationProps, type StnSideNavigationVariant, StnSlider, type StnSliderColor, type StnSliderGradient, type StnSliderLabelAlign, type StnSliderLabelPosition, type StnSliderProps, type StnSliderSize, StnStack, type StnStackBreakpoint, type StnStackDirection, type StnStackProps, type StnStackResponsive, type StnStackScrollable, type StnStackWrap, StnSwitch, type StnSwitchColor, type StnSwitchGradient, type StnSwitchLabelPosition, type StnSwitchProps, type StnSwitchSize, StnSystemChip, type StnSystemChipItem, type StnSystemChipProps, type StnSystemChipTone, StnTable, type StnTableAlign, StnTableBody, type StnTableBodyProps, StnTableGrid, type StnTableGridProps, StnTableHead, type StnTableHeadProps, type StnTableProps, StnTableRow, type StnTableRowProps, StnTableSort, type StnTableSortProps, StnTableTd, StnTableTdCheck, type StnTableTdCheckProps, type StnTableTdProps, StnTableTh, StnTableThCheck, type StnTableThCheckProps, type StnTableThProps, StnTextField, type StnTextFieldColor, type StnTextFieldIconPosition, type StnTextFieldLabelPosition, type StnTextFieldProps, type StnTextFieldVariant, type StnTheme, StnToastCloseButton, StnToastIcon, type StnToastIconProps, StnToggleButton, type StnToggleButtonColor, type StnToggleButtonIconPosition, type StnToggleButtonProps, type StnToggleButtonSize, type StnToolbarOrientation, StnTooltip, type StnTooltipPlacement, type StnTooltipProps, type StnTooltipSize, type StnTooltipTone, type StnTooltipVariant, type StnTopologyCore, StnTopologyGraph, type StnTopologyGraphLink, type StnTopologyGraphNode, type StnTopologyGraphProps, type StnTopologyNode, type StnTopologyNodeContent, type StnTopologyNodeIcon, StnTopologyNodeMark, type StnTopologyNodeMarkProps, StnTopologyNodePreview, type StnTopologyNodePreviewProps, type StnTopologyNodeShape, type StnTopologyNodeSize, type StnTopologyNodeStatus, StnTopologyRing, type StnTopologyRingProps, StnTree, type StnTreeDocRowState, type StnTreeItem, StnTreeNode, type StnTreeNodeDocState, type StnTreeNodeKind, type StnTreeNodeProps, type StnTreeProps, StnWidget, StnWidgetActions, type StnWidgetBackground, StnWidgetBody, StnWidgetChartSlot, type StnWidgetChartSlotProps, StnWidgetEmpty, StnWidgetFooter, StnWidgetGradeRow, StnWidgetGradeRowList, type StnWidgetGradeRowProps, StnWidgetHeader, StnWidgetInsetIcon, type StnWidgetInsetIconProps, StnWidgetLoading, type StnWidgetPadding, StnWidgetPlaceholder, type StnWidgetProps, StnWidgetStatCard, type StnWidgetStatCardProps, StnWidgetStatGroup, type StnWidgetStatus, type StnWidgetStatusGrade, StnWidgetStatusItem, type StnWidgetStatusItemProps, StnWidgetStatusList, StnWidgetTitle, buildPaginationItems, buildStnTreeNodeCells, cn, collectExpandableIds, flattenStnTree, formatStnHeaderTitleDate, formatStnHeaderTitleTime, formatStnHeaderTitleWeekday, formatTopologyCount, useSideNav, useStn, useStnOptional };
|
|
4309
|
+
export { AlertCenterDashboard, type AlertCenterDashboardProps, AlertCenterPageScaffold, type AlertCenterPageScaffoldProps, DashboardPageScaffold, type DashboardPageScaffoldProps, type DashboardType, ListPageScaffold, type ListPageScaffoldProps, LoginPageScaffold, type LoginPageScaffoldProps, PubChartSample, type PubDisabilityStatusItem, PubDisabilityStatusList, type PubTop5BarRow, PubTop5EquipmentBars, type PubTrafficTop5BarRow, PubTrafficTop5Bars, STN_TABLE_FOOTER_MAX_ACTIONS, STN_TOPOLOGY_NODE_ICONS, STN_TOPOLOGY_NODE_SHAPES, STN_TOPOLOGY_NODE_SIZE, STN_TOPOLOGY_NODE_SIZES, STN_TOPOLOGY_NODE_STATUSES, STN_TOPOLOGY_STATUS_COLORS, SideNavContext, type SideNavContextValue, StnAlertCard, type StnAlertCardProps, StnAlertCenterDocPreview, type StnAlertCenterDocPreviewProps, StnAlertCenterPanel, type StnAlertCenterPanelProps, StnBadge, type StnBadgeAnchorOrigin, type StnBadgeColor, type StnBadgeProps, type StnBadgeVariant, StnBreadcrumb, type StnBreadcrumbItem, type StnBreadcrumbMenuItem, type StnBreadcrumbProps, type StnBreadcrumbSize, type StnBreadcrumbVariant, StnButton, type StnButtonColor, type StnButtonIconPosition, type StnButtonProps, type StnButtonShape, type StnButtonSize, type StnButtonVariant, StnCard, StnCardBody, type StnCardBodyProps, StnCardFooter, type StnCardFooterProps, StnCardHeader, type StnCardHeaderProps, type StnCardProps, StnCheckbox, type StnCheckboxColor, type StnCheckboxLabelPlacement, type StnCheckboxProps, type StnCheckboxSize, StnChip, type StnChipColor, type StnChipIconPosition, type StnChipLabelPosition, type StnChipProps, type StnChipShape, type StnChipSize, type StnChipVariant, StnCircularProgress, type StnCircularProgressGradient, type StnCircularProgressLabelPosition, type StnCircularProgressProps, type StnCircularProgressSize, type StnCircularProgressTone, type StnCircularProgressTrack, StnContainer, type StnContainerMaxWidth, type StnContainerProps, StnContext, type StnContextValue, StnDashboard, type StnDashboardProps, type StnDashboardRegionProps, type StnDashboardWidgetPosition, StnDateRangeField, type StnDateRangeFieldProps, type StnDateRangeFieldVariant, StnDateRangePicker, StnDateRangePickerField, type StnDateRangePickerFieldProps, type StnDateRangePickerProps, StnDropdown, StnDropdownMenu, type StnDropdownMenuProps, type StnDropdownProps, StnEventBanner, type StnEventBannerGap, type StnEventBannerPlacement, type StnEventBannerProps, type StnEventBannerSeverity, StnFloatingToolbar, type StnFloatingToolbarPlacement, StnFloatingToolbarPreset, type StnFloatingToolbarPresetProps, type StnFloatingToolbarProps, StnGrid, type StnGridBreakpoint, type StnGridDirection, type StnGridProps, type StnGridResponsive, type StnGridSize, type StnGridSpacing, StnHeader, StnHeaderContextTitle, StnHeaderPageTitle, type StnHeaderPageTitleProps, type StnHeaderProps, type StnHeaderRegionProps, StnHeaderSubTitle, StnHeaderTitle, type StnHeaderTitleClockProps, StnHeaderTitleDate, type StnHeaderTitleDateOptions, type StnHeaderTitleDualProps, StnHeaderTitleFramePreview, StnHeaderTitleMainText, type StnHeaderTitleProps, type StnHeaderTitleSize, StnHeaderTitleSubText, StnHeaderTitleTime, type StnHeaderTitleTimeOptions, type StnHeaderTitleTitleProps, type StnHeaderTitleVariant, StnHeaderTitleWeekday, StnHeaderToolbar, type StnHeaderToolbarProps, StnIcon, StnIconBox, type StnIconBoxColor, type StnIconBoxProps, type StnIconBoxSize, type StnIconProps, StnLabelPrefix, type StnLabelPrefixPosition, type StnLabelPrefixProps, type StnLabelPrefixRadius, type StnLabelPrefixSize, type StnLabelPrefixVariant, StnLayer, StnLayer0Background, type StnLayer0BackgroundColor, type StnLayer0BackgroundProps, StnLayerBackground, StnLayerContent, StnLayerDim, StnLayerModal, type StnLayerProps, type StnLayerRoleProps, StnLayerShell, type StnLayerShellProps, StnListViewLayout, StnListViewLayoutBody, type StnListViewLayoutBodyProps, StnListViewLayoutContent, StnListViewLayoutHeader, StnListViewLayoutPagination, type StnListViewLayoutProps, StnListViewLayoutSearch, StnListViewLayoutSidebar, StnListViewLayoutTable, StnLoadingSkeleton, StnLoadingSkeletonBlock, type StnLoadingSkeletonBlockProps, StnLoadingSkeletonCircle, type StnLoadingSkeletonCircleProps, StnLoadingSkeletonLine, type StnLoadingSkeletonLineProps, StnLoadingSkeletonProfile, type StnLoadingSkeletonProfileProps, type StnLoadingSkeletonProps, type StnLoadingSkeletonRootProps, StnLoadingSkeletonTable, type StnLoadingSkeletonTableProps, type StnLoadingSkeletonVariant, StnLoadingSkeletonWidget, type StnLoadingSkeletonWidgetProps, StnLoginBrandStack, type StnLoginBrandStackProps, StnLoginCard, type StnLoginCardBrandPosition, StnLoginCardGlowWrapper, type StnLoginCardGlowWrapperProps, type StnLoginCardProps, type StnLoginCardVariant, StnLoginFormFields, type StnLoginFormFieldsProps, StnLoginFormLinks, type StnLoginFormLinksProps, StnLoginFormStack, type StnLoginFormStackProps, StnLoginPlaceholder, type StnLoginPlaceholderProps, StnLoginTextField, type StnLoginTextFieldProps, StnLogo, type StnLogoProps, type StnLogoSize, type StnLogoTheme, type StnLogoVariant, StnMapCanvas, type StnMapCanvasProps, StnMapToolbar, type StnMapToolbarProps, StnModal, type StnModalProps, type StnModalSize, StnPageScaffold, StnPageScaffoldLayer, type StnPageScaffoldLayerProps, StnPageScaffoldMapCanvas, type StnPageScaffoldMapCanvasProps, StnPageScaffoldMapPlaceholder, type StnPageScaffoldMapPlaceholderProps, StnPageScaffoldRegion, type StnPageScaffoldRegionProps, StnPageScaffoldRoot, type StnPageScaffoldRootProps, StnPagination, type StnPaginationColor, type StnPaginationItem, type StnPaginationProps, type StnPaginationSize, type StnPaginationVariant, StnPopup, type StnPopupProps, type StnPopupSize, StnProgressBar, type StnProgressBarGradient, type StnProgressBarLabelAlign, type StnProgressBarLabelPosition, type StnProgressBarProps, type StnProgressBarSize, type StnProgressBarTone, type StnProgressBarTrack, StnProvider, type StnProviderProps, StnRadio, type StnRadioColor, StnRadioGroup, type StnRadioGroupLayout, type StnRadioGroupOption, type StnRadioGroupOrientation, type StnRadioGroupProps, type StnRadioLabelPlacement, type StnRadioProps, type StnRadioSize, StnScroll, type StnScrollColor, type StnScrollOrientation, type StnScrollProps, type StnScrollSize, type StnScrollVariant, StnSearchRequirementBar, StnSearchRequirementBarDemo, type StnSearchRequirementBarDemoProps, type StnSearchRequirementBarDividerProps, type StnSearchRequirementBarExportProps, type StnSearchRequirementBarFieldProps, type StnSearchRequirementBarFieldsProps, type StnSearchRequirementBarProps, type StnSearchRequirementBarSearchButtonProps, StnSectionSide, StnSectionSidePreset, type StnSectionSidePresetProps, type StnSectionSideProps, StnSegmented, type StnSegmentedMultipleProps, type StnSegmentedOption, type StnSegmentedProps, type StnSegmentedSingleProps, StnSeverityBadge, type StnSeverityBadgeProps, StnSeverityFilter, type StnSeverityFilterProps, type StnSeverityLevel, type StnSeverityVariant, type StnSideNavDropdownVariant, StnSideNavFooter, type StnSideNavFooterProps, StnSideNavGroup, type StnSideNavGroupProps, StnSideNavHeader, type StnSideNavHeaderProps, StnSideNavItem, type StnSideNavItemProps, type StnSideNavItemVariant, StnSideNavLogo, type StnSideNavLogoProps, StnSideNavMenu, type StnSideNavMenuProps, StnSideNavMobileTrigger, type StnSideNavMobileTriggerProps, StnSideNavSpacer, type StnSideNavSpacerProps, StnSideNavSub, StnSideNavSubItem, type StnSideNavSubItemProps, StnSideNavSubNav, type StnSideNavSubNavProps, type StnSideNavSubNavVariant, type StnSideNavSubProps, StnSideNavToggle, type StnSideNavToggleProps, StnSideNavWatermark, type StnSideNavWatermarkProps, StnSideNavigation, type StnSideNavigationProps, type StnSideNavigationVariant, StnSlider, type StnSliderColor, type StnSliderGradient, type StnSliderLabelAlign, type StnSliderLabelPosition, type StnSliderProps, type StnSliderSize, StnStack, type StnStackBreakpoint, type StnStackDirection, type StnStackProps, type StnStackResponsive, type StnStackScrollable, type StnStackWrap, StnStatus, StnStatusDot, type StnStatusDotGap, StnStatusDotGroup, type StnStatusDotGroupItem, type StnStatusDotGroupProps, type StnStatusDotPosition, type StnStatusDotProps, type StnStatusDotSize, StnStatusFlow, type StnStatusFlowProps, type StnStatusFlowSize, type StnStatusProps, StnStatusSwitch, type StnStatusSwitchProps, StnSwitch, type StnSwitchColor, type StnSwitchGradient, type StnSwitchLabelPosition, type StnSwitchProps, type StnSwitchSize, StnTable, type StnTableAlign, StnTableBody, type StnTableBodyProps, StnTableGrid, type StnTableGridProps, StnTableHead, type StnTableHeadProps, type StnTableProps, StnTableRow, type StnTableRowProps, StnTableSort, type StnTableSortProps, StnTableTd, StnTableTdCheck, type StnTableTdCheckProps, type StnTableTdProps, StnTableTh, StnTableThCheck, type StnTableThCheckProps, type StnTableThProps, StnTextField, type StnTextFieldColor, type StnTextFieldIconPosition, type StnTextFieldLabelPosition, type StnTextFieldProps, type StnTextFieldVariant, type StnTheme, StnToastCloseButton, StnToastIcon, type StnToastIconProps, StnToggleButton, type StnToggleButtonColor, type StnToggleButtonIconPosition, type StnToggleButtonProps, type StnToggleButtonSize, type StnToolbarOrientation, StnTooltip, type StnTooltipPlacement, type StnTooltipProps, type StnTooltipSize, type StnTooltipTone, type StnTooltipVariant, type StnTopologyCore, StnTopologyGraph, type StnTopologyGraphLink, type StnTopologyGraphNode, type StnTopologyGraphProps, type StnTopologyNode, type StnTopologyNodeContent, type StnTopologyNodeIcon, StnTopologyNodeMark, type StnTopologyNodeMarkProps, StnTopologyNodePreview, type StnTopologyNodePreviewProps, type StnTopologyNodeShape, type StnTopologyNodeSize, type StnTopologyNodeStatus, StnTopologyRing, type StnTopologyRingProps, StnTree, type StnTreeDocRowState, StnTreeItem, type StnTreeItemData, type StnTreeItemDocState, type StnTreeItemProps, StnTreeNode, type StnTreeNodeDocState, type StnTreeNodeKind, type StnTreeNodeProps, type StnTreeProps, type StnTreeRadius, type StnTreeSize, type StnTreeWidth, StnWidget, StnWidgetActions, type StnWidgetBackground, StnWidgetBody, StnWidgetChartSlot, type StnWidgetChartSlotProps, StnWidgetEmpty, StnWidgetFooter, StnWidgetGradeRow, StnWidgetGradeRowList, type StnWidgetGradeRowProps, StnWidgetHeader, StnWidgetInsetIcon, type StnWidgetInsetIconProps, StnWidgetLoading, type StnWidgetPadding, StnWidgetPlaceholder, type StnWidgetProps, StnWidgetStatCard, type StnWidgetStatCardProps, StnWidgetStatGroup, type StnWidgetStatus, type StnWidgetStatusGrade, StnWidgetStatusItem, type StnWidgetStatusItemProps, StnWidgetStatusList, StnWidgetTitle, buildPaginationItems, buildStnTreeNodeCells, cn, collectExpandableIds, flattenStnTree, formatStnHeaderTitleDate, formatStnHeaderTitleTime, formatStnHeaderTitleWeekday, formatTopologyCount, useSideNav, useStn, useStnOptional };
|