@stn-uiux/pub-ui-react 0.1.71 → 0.1.73

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.
Files changed (5) hide show
  1. package/README.md +5 -4
  2. package/dist/index.d.ts +48 -11
  3. package/dist/index.js +48 -21
  4. package/dist/index.js.map +1 -1
  5. package/package.json +2 -2
package/README.md CHANGED
@@ -28,7 +28,7 @@ import { StnProvider, StnButton, StnTable } from '@stn-uiux/pub-ui-react'
28
28
 
29
29
  export function App() {
30
30
  return (
31
- <StnProvider theme="dark" applyThemeToDocument>
31
+ <StnProvider mode="dark" applyModeToDocument>
32
32
  <main>
33
33
  <StnButton variant="primary" size="md">
34
34
  실행
@@ -43,9 +43,10 @@ export function App() {
43
43
 
44
44
  | Prop | 타입 | 기본값 | 설명 |
45
45
  |------|------|--------|------|
46
- | `theme` | `'light' \| 'dark'` | `'dark'` | 적용할 디자인 시스템 테마 모드 |
47
- | `applyThemeToDocument` | `boolean` | `false` | `true`일 경우 `<html>` 태그에 `data-theme` 속성을 자동 적용 |
48
- | `useStn()` | Hook | - | 하위 컴포넌트에서 현재 테마 상태를 조회하는 훅 |
46
+ | `mode` | `'light' \| 'dark'` | `'dark'` | 다크/라이트 컬러 모드 (`html[data-mode]`) |
47
+ | `applyModeToDocument` | `boolean` | `true` | `true`일 경우 `<html>` 태그에 `data-mode` 속성을 자동 적용 |
48
+ | `theme` | `string` | `undefined` | 커스텀 테마 식별자 (`html[data-theme]`) |
49
+ | `useStn()` | Hook | - | 하위 컴포넌트에서 `{ mode, setMode, theme, setTheme }`를 조회/변경하는 훅 |
49
50
 
50
51
 
51
52
  ## 주요 컴포넌트 목록
package/dist/index.d.ts CHANGED
@@ -50,10 +50,19 @@ type StnPaginationItem = number | 'ellipsis';
50
50
  */
51
51
  declare function buildPaginationItems(page: number, count: number, siblingCount?: number, boundaryCount?: number): StnPaginationItem[];
52
52
 
53
- type StnTheme = 'light' | 'dark';
53
+ /** 모드 (Color Mode): dark | light */
54
+ type StnMode = 'light' | 'dark';
55
+ /** 테마 (Theme): 브랜드 및 고객사 커스텀 테마 명칭 */
56
+ type StnTheme = string;
54
57
  type StnContextValue = {
55
- theme: StnTheme;
56
- setTheme: (theme: StnTheme) => void;
58
+ /** 현재 다크/라이트 색상 모드 */
59
+ mode: StnMode;
60
+ /** 다크/라이트 색상 모드 변경 */
61
+ setMode: (mode: StnMode) => void;
62
+ /** 커스텀 테마 명칭 */
63
+ theme?: StnTheme;
64
+ /** 커스텀 테마 변경 */
65
+ setTheme?: (theme: StnTheme) => void;
57
66
  };
58
67
  declare const StnContext: react.Context<StnContextValue | null>;
59
68
  declare function useStn(): StnContextValue;
@@ -61,13 +70,25 @@ declare function useStnOptional(): StnContextValue | null;
61
70
 
62
71
  type StnProviderProps = {
63
72
  children: ReactNode;
73
+ /** 다크/라이트 색상 모드 (제어 상태) */
74
+ mode?: StnMode;
75
+ /** 다크/라이트 색상 모드 기본값 (비제어 상태, 기본값 'dark') */
76
+ defaultMode?: StnMode;
77
+ /** 모드 변경 이벤트 콜백 */
78
+ onModeChange?: (mode: StnMode) => void;
79
+ /** 커스텀 테마 명칭 (예: 'infomap') */
64
80
  theme?: StnTheme;
81
+ /** 커스텀 테마 기본값 */
65
82
  defaultTheme?: StnTheme;
83
+ /** 테마 변경 이벤트 콜백 */
66
84
  onThemeChange?: (theme: StnTheme) => void;
85
+ /** document.documentElement (html 태그)에 data-mode 속성을 적용할지 여부 */
86
+ applyModeToDocument?: boolean;
87
+ /** @deprecated applyModeToDocument 사용 권장 */
67
88
  applyThemeToDocument?: boolean;
68
89
  className?: string;
69
90
  };
70
- declare function StnProvider({ children, theme: themeProp, defaultTheme, onThemeChange, applyThemeToDocument, className, }: StnProviderProps): react_jsx_runtime.JSX.Element;
91
+ declare function StnProvider({ children, mode: modeProp, defaultMode, onModeChange, theme: themeProp, defaultTheme, onThemeChange, applyModeToDocument, applyThemeToDocument, className, }: StnProviderProps): react_jsx_runtime.JSX.Element;
71
92
 
72
93
  /**
73
94
  * 디자인 가이드 준수 — 소비자가 `style`로 높이·색 등 모양을 바꾸지 못하게 차단.
@@ -1759,7 +1780,9 @@ declare const StnLoginTextField: react.ForwardRefExoticComponent<StnWithoutStyle
1759
1780
  type StnLogoVariant = 'horizontal' | 'vertical' | 'watermark' | 'onlyimg' | 'symbol';
1760
1781
  /** CSS tokens: xs sm md lg xl */
1761
1782
  type StnLogoSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
1762
- type StnLogoTheme = 'dark' | 'light';
1783
+ type StnLogoMode = 'dark' | 'light';
1784
+ /** @deprecated StnLogoMode 사용 권장 */
1785
+ type StnLogoTheme = StnLogoMode;
1763
1786
  type StnLogoProps = StnWithoutStyle<Omit<HTMLAttributes<HTMLSpanElement>, 'children'>> & {
1764
1787
  /**
1765
1788
  * horizontal: 가로 워드마크 (full PNG)
@@ -1779,6 +1802,8 @@ type StnLogoProps = StnWithoutStyle<Omit<HTMLAttributes<HTMLSpanElement>, 'child
1779
1802
  * light: 검은색 로고 (밝은 배경용)
1780
1803
  * @default 'dark'
1781
1804
  */
1805
+ mode?: StnLogoMode;
1806
+ /** @deprecated mode 사용 권장 */
1782
1807
  theme?: StnLogoTheme;
1783
1808
  alt?: string;
1784
1809
  };
@@ -1801,6 +1826,8 @@ declare const StnLogo: react.ForwardRefExoticComponent<StnWithoutStyle<Omit<HTML
1801
1826
  * light: 검은색 로고 (밝은 배경용)
1802
1827
  * @default 'dark'
1803
1828
  */
1829
+ mode?: StnLogoMode;
1830
+ /** @deprecated mode 사용 권장 */
1804
1831
  theme?: StnLogoTheme;
1805
1832
  alt?: string;
1806
1833
  } & react.RefAttributes<HTMLSpanElement>>;
@@ -2651,7 +2678,7 @@ type StnLayer0BackgroundProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'>
2651
2678
  };
2652
2679
  /**
2653
2680
  * Layer 0 page background — 프리셋은 `variant`, 단색은 `color`, 임의 URL은 `src`.
2654
- * `src` + `srcDark` 를 같이 주면 `data-theme` 에 맞춰 전환합니다.
2681
+ * `src` + `srcDark` 를 같이 주면 `data-mode` 에 맞춰 전환합니다.
2655
2682
  */
2656
2683
  declare function StnLayer0Background({ variant, kind: kindProp, color, src: srcProp, srcDark: srcDarkProp, overlay: overlayProp, overlayDarkRadial: overlayDarkRadialProp, alt, className, style, ...rest }: StnLayer0BackgroundProps): react_jsx_runtime.JSX.Element;
2657
2684
 
@@ -3104,6 +3131,7 @@ declare function StnAlertCard({ item, titleOverflow, descOverflow, onClick, clas
3104
3131
  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;
3105
3132
 
3106
3133
  type StnAlertCenterDocPreviewProps = StnAlertCenterPanelProps & {
3134
+ mode?: StnMode;
3107
3135
  theme?: StnTheme;
3108
3136
  /** DS iframe·Color doc용 GNB 크롬 래퍼 */
3109
3137
  withDocChrome?: boolean;
@@ -3113,7 +3141,7 @@ type StnAlertCenterDocPreviewProps = StnAlertCenterPanelProps & {
3113
3141
  * 문서·데모 — `stn-doc-frame--alert-center` + SideNav bottom shell.
3114
3142
  * 제품 앱에서는 `StnSideNavigation` bottom 슬롯에 `StnAlertCenterPanel`만 넣으면 됩니다.
3115
3143
  */
3116
- declare function StnAlertCenterDocPreview({ theme, withDocChrome, children, ...panelProps }: StnAlertCenterDocPreviewProps): react_jsx_runtime.JSX.Element;
3144
+ declare function StnAlertCenterDocPreview({ mode, theme, withDocChrome, children, ...panelProps }: StnAlertCenterDocPreviewProps): react_jsx_runtime.JSX.Element;
3117
3145
 
3118
3146
  type SideNavContextValue = {
3119
3147
  collapsed: boolean;
@@ -3374,13 +3402,17 @@ type StnSideNavWatermarkProps = HTMLAttributes<HTMLDivElement> & {
3374
3402
  */
3375
3403
  size?: StnLogoSize;
3376
3404
  /**
3377
- * 다크 / 라이트 테마 (미지정 시 상위 data-theme에 따라 자동 전환)
3405
+ * 다크 / 라이트 모드 (미지정 시 상위 data-mode에 따라 자동 전환)
3406
+ */
3407
+ mode?: StnLogoMode;
3408
+ /**
3409
+ * @deprecated mode 사용 권장
3378
3410
  */
3379
3411
  theme?: StnLogoTheme;
3380
3412
  };
3381
3413
  /**
3382
3414
  * 사이드바 하단 3D 엠보싱 브랜드 워터마크 카드 (Figma 40004218:102473)
3383
- * StnLogo(variant="watermark") 기반으로 크기(size prop) 및 테마 제어를 지원합니다.
3415
+ * StnLogo(variant="watermark") 기반으로 크기(size prop) 및 모드 제어를 지원합니다.
3384
3416
  */
3385
3417
  declare const StnSideNavWatermark: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
3386
3418
  /**
@@ -3390,7 +3422,11 @@ declare const StnSideNavWatermark: react.ForwardRefExoticComponent<HTMLAttribute
3390
3422
  */
3391
3423
  size?: StnLogoSize;
3392
3424
  /**
3393
- * 다크 / 라이트 테마 (미지정 시 상위 data-theme에 따라 자동 전환)
3425
+ * 다크 / 라이트 모드 (미지정 시 상위 data-mode에 따라 자동 전환)
3426
+ */
3427
+ mode?: StnLogoMode;
3428
+ /**
3429
+ * @deprecated mode 사용 권장
3394
3430
  */
3395
3431
  theme?: StnLogoTheme;
3396
3432
  } & react.RefAttributes<HTMLDivElement>>;
@@ -3643,6 +3679,7 @@ declare const StnSideNavigation: react.ForwardRefExoticComponent<HTMLAttributes<
3643
3679
  } & react.RefAttributes<HTMLElement>>;
3644
3680
  Watermark: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
3645
3681
  size?: StnLogoSize;
3682
+ mode?: StnLogoMode;
3646
3683
  theme?: StnLogoTheme;
3647
3684
  } & react.RefAttributes<HTMLDivElement>>;
3648
3685
  MobileTrigger: react.ForwardRefExoticComponent<react.ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -4431,4 +4468,4 @@ interface StnEventBannerProps extends Omit<react__default.HTMLAttributes<HTMLDiv
4431
4468
  /** 위험도별 이벤트 배너. placement와 severity로 배치·스타일을 고릅니다. */
4432
4469
  declare const StnEventBanner: react__default.ForwardRefExoticComponent<StnEventBannerProps & react__default.RefAttributes<HTMLDivElement>>;
4433
4470
 
4434
- export { AlertCenterDashboard, type AlertCenterDashboardProps, AlertCenterPageScaffold, type AlertCenterPageScaffoldProps, DashboardPageScaffold, type DashboardPageScaffoldProps, type DashboardType, 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, type StnCheckboxVariant, 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, type StnSectionSideVariant, StnSegmented, type StnSegmentedMultipleProps, type StnSegmentedOption, type StnSegmentedProps, type StnSegmentedSingleProps, StnSeverityBadge, type StnSeverityBadgeProps, type StnSeverityLevel, type StnSeveritySize, 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, StnStatusSeverity, type StnStatusSeverityProps, StnStatusSwitch, type StnStatusSwitchProps, StnSwitch, type StnSwitchColor, type StnSwitchGradient, type StnSwitchLabelPosition, type StnSwitchProps, type StnSwitchSize, StnTab, StnTabContextProvider, type StnTabContextProviderProps, type StnTabContextValue, StnTabPanel, type StnTabPanelProps, type StnTabProps, 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, StnTabs, type StnTabsProps, StnTabsRoot, StnTextArea, type StnTextAreaColor, type StnTextAreaLabelPosition, type StnTextAreaProps, type StnTextAreaResize, type StnTextAreaSizeProp, type StnTextAreaVariant, 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, useStnTabsContext };
4471
+ export { AlertCenterDashboard, type AlertCenterDashboardProps, AlertCenterPageScaffold, type AlertCenterPageScaffoldProps, DashboardPageScaffold, type DashboardPageScaffoldProps, type DashboardType, 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, type StnCheckboxVariant, 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, type StnMode, 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, type StnSectionSideVariant, StnSegmented, type StnSegmentedMultipleProps, type StnSegmentedOption, type StnSegmentedProps, type StnSegmentedSingleProps, StnSeverityBadge, type StnSeverityBadgeProps, type StnSeverityLevel, type StnSeveritySize, 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, StnStatusSeverity, type StnStatusSeverityProps, StnStatusSwitch, type StnStatusSwitchProps, StnSwitch, type StnSwitchColor, type StnSwitchGradient, type StnSwitchLabelPosition, type StnSwitchProps, type StnSwitchSize, StnTab, StnTabContextProvider, type StnTabContextProviderProps, type StnTabContextValue, StnTabPanel, type StnTabPanelProps, type StnTabProps, 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, StnTabs, type StnTabsProps, StnTabsRoot, StnTextArea, type StnTextAreaColor, type StnTextAreaLabelPosition, type StnTextAreaProps, type StnTextAreaResize, type StnTextAreaSizeProp, type StnTextAreaVariant, 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, useStnTabsContext };
package/dist/index.js CHANGED
@@ -66,7 +66,10 @@ function useStn() {
66
66
  const ctx = useContext(StnContext);
67
67
  if (!ctx) {
68
68
  return {
69
- theme: "light",
69
+ mode: "dark",
70
+ setMode: () => {
71
+ },
72
+ theme: void 0,
70
73
  setTheme: () => {
71
74
  }
72
75
  };
@@ -81,14 +84,27 @@ function useStnOptional() {
81
84
  import { jsx } from "react/jsx-runtime";
82
85
  function StnProvider({
83
86
  children,
87
+ mode: modeProp,
88
+ defaultMode = "dark",
89
+ onModeChange,
84
90
  theme: themeProp,
85
- defaultTheme = "light",
91
+ defaultTheme,
86
92
  onThemeChange,
87
- applyThemeToDocument = false,
93
+ applyModeToDocument,
94
+ applyThemeToDocument,
88
95
  className
89
96
  }) {
97
+ const [internalMode, setInternalMode] = useState(defaultMode);
98
+ const mode = modeProp ?? internalMode;
90
99
  const [internalTheme, setInternalTheme] = useState(defaultTheme);
91
100
  const theme = themeProp ?? internalTheme;
101
+ const setMode = useCallback(
102
+ (next) => {
103
+ if (modeProp === void 0) setInternalMode(next);
104
+ onModeChange?.(next);
105
+ },
106
+ [modeProp, onModeChange]
107
+ );
92
108
  const setTheme = useCallback(
93
109
  (next) => {
94
110
  if (themeProp === void 0) setInternalTheme(next);
@@ -96,21 +112,30 @@ function StnProvider({
96
112
  },
97
113
  [themeProp, onThemeChange]
98
114
  );
115
+ const applyToDoc = applyModeToDocument ?? applyThemeToDocument ?? false;
99
116
  useEffect(() => {
100
- if (!applyThemeToDocument) return;
117
+ if (!applyToDoc) return;
101
118
  const el = document.documentElement;
102
- const prev = el.getAttribute("data-theme");
103
- el.setAttribute("data-theme", theme);
119
+ const prevMode = el.getAttribute("data-mode");
120
+ const prevTheme = el.getAttribute("data-theme");
121
+ el.setAttribute("data-mode", mode);
122
+ if (theme) {
123
+ el.setAttribute("data-theme", theme);
124
+ } else {
125
+ el.removeAttribute("data-theme");
126
+ }
104
127
  return () => {
105
- if (prev === null) el.removeAttribute("data-theme");
106
- else el.setAttribute("data-theme", prev);
128
+ if (prevMode === null) el.removeAttribute("data-mode");
129
+ else el.setAttribute("data-mode", prevMode);
130
+ if (prevTheme === null) el.removeAttribute("data-theme");
131
+ else el.setAttribute("data-theme", prevTheme);
107
132
  };
108
- }, [theme, applyThemeToDocument]);
109
- const value = { theme, setTheme };
110
- if (applyThemeToDocument) {
133
+ }, [mode, theme, applyToDoc]);
134
+ const value = { mode, setMode, theme, setTheme };
135
+ if (applyToDoc) {
111
136
  return /* @__PURE__ */ jsx(StnContext.Provider, { value, children });
112
137
  }
113
- return /* @__PURE__ */ jsx(StnContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { className: cn(className), "data-theme": theme, children }) });
138
+ return /* @__PURE__ */ jsx(StnContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { className: cn(className), "data-mode": mode, "data-theme": theme, children }) });
114
139
  }
115
140
 
116
141
  // src/components/StnButton.tsx
@@ -3103,18 +3128,19 @@ function sources(variant) {
3103
3128
  }
3104
3129
  return { light: STN_INFOMAP_LOGO.full, dark: STN_INFOMAP_LOGO.fullDark };
3105
3130
  }
3106
- var StnLogo = forwardRef19(function StnLogo2({ variant = "horizontal", size = "md", theme, alt = "InfoMap SRM", className, ...rest }, ref) {
3131
+ var StnLogo = forwardRef19(function StnLogo2({ variant = "horizontal", size = "md", mode, theme, alt = "InfoMap SRM", className, ...rest }, ref) {
3107
3132
  const { light, dark } = sources(variant);
3133
+ const finalMode = mode ?? theme;
3108
3134
  return /* @__PURE__ */ jsxs18(
3109
3135
  "span",
3110
3136
  {
3111
3137
  ref,
3112
3138
  className: cn("stn-logo", variant, size, className),
3113
- "data-theme": theme,
3139
+ "data-mode": finalMode,
3114
3140
  ...rest,
3115
3141
  children: [
3116
- /* @__PURE__ */ jsx24("img", { className: "stn-logo__img light", src: light, alt: theme === "dark" ? "" : alt }),
3117
- /* @__PURE__ */ jsx24("img", { className: "stn-logo__img dark", src: dark, alt: theme === "light" ? "" : alt })
3142
+ /* @__PURE__ */ jsx24("img", { className: "stn-logo__img light", src: light, alt: finalMode === "dark" ? "" : alt }),
3143
+ /* @__PURE__ */ jsx24("img", { className: "stn-logo__img dark", src: dark, alt: finalMode === "light" ? "" : alt })
3118
3144
  ]
3119
3145
  }
3120
3146
  );
@@ -7796,16 +7822,17 @@ function StnAlertCenterPanel({
7796
7822
  // src/patterns/alertCenter/StnAlertCenterDocPreview.tsx
7797
7823
  import { jsx as jsx58 } from "react/jsx-runtime";
7798
7824
  function StnAlertCenterDocPreview({
7799
- theme = "light",
7825
+ mode = "light",
7826
+ theme,
7800
7827
  withDocChrome = true,
7801
7828
  children,
7802
7829
  ...panelProps
7803
7830
  }) {
7804
7831
  const panel = children ?? /* @__PURE__ */ jsx58(StnAlertCenterPanel, { ...panelProps });
7805
7832
  if (!withDocChrome) {
7806
- return /* @__PURE__ */ jsx58(StnProvider, { theme, applyThemeToDocument: false, children: panel });
7833
+ return /* @__PURE__ */ jsx58(StnProvider, { mode, theme, applyModeToDocument: false, children: panel });
7807
7834
  }
7808
- return /* @__PURE__ */ jsx58("div", { className: "stn-doc-frame stn-doc-frame--alert-center", "data-theme": theme, children: /* @__PURE__ */ jsx58("div", { className: "stn-alert-center-preview-shell", children: panel }) });
7835
+ return /* @__PURE__ */ jsx58("div", { className: "stn-doc-frame stn-doc-frame--alert-center", "data-mode": mode, "data-theme": theme, children: /* @__PURE__ */ jsx58("div", { className: "stn-alert-center-preview-shell", children: panel }) });
7809
7836
  }
7810
7837
 
7811
7838
  // src/index.ts
@@ -8244,7 +8271,7 @@ var StnSideNavToggle = forwardRef37(
8244
8271
  import { forwardRef as forwardRef38 } from "react";
8245
8272
  import { jsx as jsx67 } from "react/jsx-runtime";
8246
8273
  var StnSideNavWatermark = forwardRef38(
8247
- function StnSideNavWatermark2({ size = "xl", theme, className, ...rest }, ref) {
8274
+ function StnSideNavWatermark2({ size = "xl", mode, theme, className, ...rest }, ref) {
8248
8275
  return /* @__PURE__ */ jsx67(
8249
8276
  "div",
8250
8277
  {
@@ -8252,7 +8279,7 @@ var StnSideNavWatermark = forwardRef38(
8252
8279
  className: cn("stn-side-nav__watermark", className),
8253
8280
  "aria-hidden": "true",
8254
8281
  ...rest,
8255
- children: /* @__PURE__ */ jsx67(StnLogo, { variant: "watermark", size, theme })
8282
+ children: /* @__PURE__ */ jsx67(StnLogo, { variant: "watermark", size, mode: mode ?? theme })
8256
8283
  }
8257
8284
  );
8258
8285
  }