@stn-uiux/pub-ui 0.1.58 → 0.1.59

package/dist/chunk-UPXSNRIJ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/data/stnTree.ts"],"sourcesContent":["/**\n * Folder structure tree — Infomap Figma node 40000042:210359 · section-side 40000040:102539\n */\n\nexport type StnTreeDemoNode = {\n  id: string\n  label: string\n  kind?: 'root' | 'folder' | 'server'\n  children?: StnTreeDemoNode[]\n}\n\nexport const STN_TREE_FIGMA = '40000042:210359'\n\n/** section-side shell — light / dark */\nexport const STN_TREE_SECTION_SIDE_FIGMA = {\n  light: '40000042:187762',\n  dark: '40000040:102539',\n} as const\n\nexport const STN_TREE_INTRO =\n  'LNB 사이드바 및 팝업 내부에서 계층형 폴더/파일 구조를 탐색하는 트리 내비게이션 패턴입니다. 폴더/파일 노드 선택 및 뎁스별 접기·펼치기 기능을 지원합니다.'\n\n/** Figma 40000040:102539 section-side tree content */\nexport const STN_TREE_DEMO: StnTreeDemoNode[] = [\n  {\n    id: 'root',\n    label: 'Root',\n    kind: 'root',\n    children: [\n      {\n        id: 'group-a',\n        label: '그룹 서버',\n        kind: 'folder',\n        children: [\n          {\n            id: 'equip',\n            label: '장비',\n            kind: 'folder',\n            children: [\n              { id: 'srv-1', label: 'grid-pro-01', kind: 'server' },\n              { id: 'srv-2', label: 'grid-pro-02', kind: 'server' },\n              { id: 'srv-3', label: 'grid-pro-03', kind: 'server' },\n              { id: 'srv-4', label: 'grid-premium-01', kind: 'server' },\n              { id: 'srv-5', label: 'grid-premium-02', kind: 'server' },\n            ],\n          },\n        ],\n      },\n      {\n        id: 'group-b',\n        label: '그룹 서버 (백업)',\n        kind: 'folder',\n        children: [\n          { id: 'srv-b1', label: 'auth-server-01', kind: 'server' },\n          { id: 'srv-b2', label: 'auth-server-02', kind: 'server' },\n          { id: 'srv-b3', label: 'db-cluster-01', kind: 'server' },\n          { id: 'srv-b4', label: 'db-cluster-02', kind: 'server' },\n          { id: 'srv-b5', label: 'cache-redis-01', kind: 'server' },\n        ],\n      },\n    ],\n  },\n]\n\nexport const STN_TREE_REACT_EXAMPLE = `import { StnSectionSide, StnTree } from '@stn-uiux/pub-ui-react'\n\n<StnSectionSide fill>\n  <StnTree\n    heading=\"FOLDER STRUCTURE\"\n    nodes={[\n      {\n        id: 'root',\n        label: 'Root',\n        kind: 'root',\n        children: [\n          { id: 'group', label: '그룹 서버', kind: 'folder', children: [\n            { id: 'srv-1', label: 'grid-pro', kind: 'server' },\n          ]},\n        ],\n      },\n    ]}\n    defaultExpandedIds={['root', 'group']}\n    defaultSelectedId=\"srv-1\"\n    onSelect={(id) => console.log(id)}\n  />\n</StnSectionSide>`\n\nexport const STN_TREE_USAGE_HTML = `<!-- StnSectionSide + StnTree · stn-section-side.css · stn-tree.css -->\n<aside class=\"stn-section-side stn-section-side--fill\">\n  <div class=\"stn-scroll stn-section-side__body stn-scroll--vertical\">\n    <div class=\"stn-tree\">\n      <p class=\"stn-tree__heading\">FOLDER STRUCTURE</p>\n      <div class=\"stn-tree__rows\" role=\"tree\">\n        <div class=\"stn-tree__row stn-tree__row--root\" data-depth=\"0\" role=\"treeitem\">\n          <span class=\"stn-tree__label\">Root</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</aside>`\n\nexport type StnTreePatternPlaygroundConfig = {\n  heading: string\n  showHeading: boolean\n}\n\nexport const STN_TREE_PATTERN_PLAYGROUND_DEFAULT: StnTreePatternPlaygroundConfig = {\n  heading: 'FOLDER STRUCTURE',\n  showHeading: true,\n}\n\nexport const STN_TREE_PATTERN_PLAYGROUND_PROPERTIES: {\n  name: string\n  values: string\n  note?: string\n}[] = [\n  { name: 'heading', values: 'string', note: 'StnTree heading · 빈 문자열이면 숨김' },\n  { name: 'showHeading', values: 'true | false', note: '섹션 제목 표시' },\n  { name: 'fill', values: 'true', note: 'StnSectionSide — list view LNB 열 높이 채움 (고정)' },\n  { name: 'nodes', values: 'StnTreeItem[]', note: '데모 — STN_TREE_DEMO' },\n  { name: 'defaultExpandedIds', values: 'string[]', note: '초기 펼침 노드 id' },\n  { name: 'selectedId', values: 'string | null', note: '선택 행 · onSelect' },\n]\n\nexport function describeTreePatternReact(config: StnTreePatternPlaygroundConfig): string {\n  const headingProp = config.showHeading\n    ? `\\n    heading=${JSON.stringify(config.heading)}`\n    : '\\n    heading=\"\"'\n  return `import { StnSectionSide, StnTree } from '@stn-uiux/pub-ui-react'\n\n<StnSectionSide fill>\n  <StnTree${headingProp}\n    nodes={STN_TREE_DEMO}\n    defaultExpandedIds={['root', 'group-a', 'equip', 'group-b']}\n    selectedId={selectedId}\n    onSelect={setSelectedId}\n  />\n</StnSectionSide>`\n}\n\nexport const STN_TREE_PARTS = [\n  { part: '.stn-tree', role: '트리 래퍼 (`StnTree`)' },\n  { part: '.stn-tree__heading', role: '섹션 제목 · 13 bold gray-450' },\n  { part: '.stn-tree__row', role: '행 24px · role=treeitem · data-depth' },\n  { part: '.stn-tree__cell--guide', role: 'vertical_line · tree_connector(_midium)' },\n  { part: '.stn-tree__toggle', role: '펼침/접힘 chevron (arrow-left 12)' },\n  { part: '.stn-tree__icon--root / --folder / --server', role: '노드 종류별 16px 아이콘' },\n  { part: '.stn-tree__row.is-selected', role: '선택 배경 `--stn-tree-selected`' },\n  { part: '.stn-tree__row.is-hover / :hover', role: '호버 배경' },\n  { part: '.stn-tree__row.is-pressed / :active', role: '프레스 배경' },\n  { part: '.stn-section-side', role: '사이드 패널 셸 — Patterns Tree 조립' },\n  { part: '.stn-scroll', role: 'Pub 스크롤 — Patterns Tree 조립' },\n] as const\n"],"mappings":"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","names":[]}

package/styles/@assets/svg/system/line/input.svg

@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect x="0.75" y="0.75" width="16.5" height="16.5" rx="2.25" stroke="#C8D0D9" stroke-width="1.5" stroke-linejoin="round"/>
-</svg>

package/styles/@assets/svg/system/line/radio.svg

@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="9" cy="9" r="7.5" stroke="#C8D0D9" stroke-width="3"/>
-</svg>

package/styles/components/stn-severity-badge.css

@@ -1,227 +0,0 @@
-@charset "utf-8";
-/**
- * StnSeverityBadge — 관제 알람 심각도 뱃지 및 필터
- *
- * 위험도 클래스: critical · major · minor · warning
- * 크기 클래스: sm · md · lg
- *
- * Modes:
- *   - `badge`: 상태 표시용 뱃지 (height: var(--stn-severity-badge-height), font: 11px)
- *   - `filter`: 대시보드 다중 필터 토글용 (width: var(--stn-severity-filter-width), height: var(--stn-severity-filter-height), font: 14px)
- *
- * 100% 시맨틱 토큰 SSOT 기반 구축
- */
-
-.stn-severity-filter-group {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--stn-space-8, 8px);
-  flex-wrap: wrap;
-}
-
-.stn-severity-badge {
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--stn-space-2, 2px);
-  border-radius: var(--stn-radius-4, 4px);
-  font-family: var(--stn-font-body, Pretendard, sans-serif);
-  line-height: 1.2;
-  user-select: none;
-  vertical-align: middle;
-  white-space: nowrap;
-  transition: opacity 0.15s ease, filter 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
-}
-
-/* Shape (기본 4px rounded vs 9999px round 알약형) */
-.stn-severity-badge.round,
-.stn-severity-badge.rounded-full {
-  border-radius: var(--stn-radius-circle, 9999px);
-}
-
-/* 1. 기본 뱃지 모드 (Badge - Display: sm / md / lg) */
-.stn-severity-badge.badge,
-.stn-severity-badge:not(.filter) {
-  height: var(--stn-severity-badge-height-md, var(--stn-severity-badge-height, var(--stn-size-20, 20px)));
-  padding: var(--stn-severity-badge-padding-md, var(--stn-severity-badge-padding, var(--stn-space-2, 2px) var(--stn-space-8, 8px)));
-  font-size: var(--stn-font-size-11, 11px);
-  font-weight: var(--stn-font-weight-bold, 700);
-  letter-spacing: -0.1px;
-}
-
-.stn-severity-badge.badge .stn-severity-badge__icon,
-.stn-severity-badge:not(.filter) .stn-severity-badge__icon {
-  width: var(--stn-severity-badge-icon-size-md, var(--stn-severity-badge-icon-size, var(--stn-size-14, 14px)));
-  height: var(--stn-severity-badge-icon-size-md, var(--stn-severity-badge-icon-size, var(--stn-size-14, 14px)));
-}
-
-/* Sizes: sm (18px) */
-.stn-severity-badge.sm {
-  height: var(--stn-severity-badge-height-sm, var(--stn-size-18, 18px));
-  padding: var(--stn-severity-badge-padding-sm, var(--stn-space-2, 2px) var(--stn-space-6, 6px));
-  font-size: var(--stn-font-size-10, 10px);
-  gap: var(--stn-space-2, 2px);
-}
-
-.stn-severity-badge.sm .stn-severity-badge__icon {
-  width: var(--stn-severity-badge-icon-size-sm, var(--stn-size-12, 12px));
-  height: var(--stn-severity-badge-icon-size-sm, var(--stn-size-12, 12px));
-}
-
-/* Sizes: md (20px - 기본) */
-.stn-severity-badge.md {
-  height: var(--stn-severity-badge-height-md, var(--stn-size-20, 20px));
-  padding: var(--stn-severity-badge-padding-md, var(--stn-space-2, 2px) var(--stn-space-8, 8px));
-  font-size: var(--stn-font-size-11, 11px);
-  gap: var(--stn-space-2, 2px);
-}
-
-.stn-severity-badge.md .stn-severity-badge__icon {
-  width: var(--stn-severity-badge-icon-size-md, var(--stn-size-14, 14px));
-  height: var(--stn-severity-badge-icon-size-md, var(--stn-size-14, 14px));
-}
-
-/* Sizes: lg (24px) */
-.stn-severity-badge.lg {
-  height: var(--stn-severity-badge-height-lg, var(--stn-size-24, 24px));
-  padding: var(--stn-severity-badge-padding-lg, var(--stn-space-4, 4px) var(--stn-space-10, 10px));
-  font-size: var(--stn-font-size-12, 12px);
-  gap: var(--stn-space-4, 4px);
-}
-
-.stn-severity-badge.lg .stn-severity-badge__icon {
-  width: var(--stn-severity-badge-icon-size-lg, var(--stn-size-16, 16px));
-  height: var(--stn-severity-badge-icon-size-lg, var(--stn-size-16, 16px));
-}
-
-/* 2. 아이콘 전용 모드 (Icon-Only - 정사각 4px / 원형 9999px) */
-.stn-severity-badge.icon-only {
-  width: var(--stn-severity-badge-height-md, var(--stn-size-20, 20px));
-  height: var(--stn-severity-badge-height-md, var(--stn-size-20, 20px));
-  padding: 0;
-  gap: 0;
-  flex-shrink: 0;
-}
-
-.stn-severity-badge.icon-only.sm {
-  width: var(--stn-severity-badge-height-sm, var(--stn-size-18, 18px));
-  height: var(--stn-severity-badge-height-sm, var(--stn-size-18, 18px));
-  padding: 0;
-}
-
-.stn-severity-badge.icon-only.md {
-  width: var(--stn-severity-badge-height-md, var(--stn-size-20, 20px));
-  height: var(--stn-severity-badge-height-md, var(--stn-size-20, 20px));
-  padding: 0;
-}
-
-.stn-severity-badge.icon-only.lg {
-  width: var(--stn-severity-badge-height-lg, var(--stn-size-24, 24px));
-  height: var(--stn-severity-badge-height-lg, var(--stn-size-24, 24px));
-  padding: 0;
-}
-
-.stn-severity-badge.icon-only .stn-severity-badge__label {
-  display: none;
-}
-
-/* 3. 필터 모드 (Filter Toggle - 52px x 26px) */
-.stn-severity-badge.filter {
-  width: var(--stn-severity-filter-width, var(--stn-size-52, 52px));
-  height: var(--stn-severity-filter-height, var(--stn-size-26, 26px));
-  padding: var(--stn-space-4, 4px);
-  font-size: var(--stn-font-size-14, 14px);
-  font-weight: var(--stn-font-weight-bold, 700);
-  cursor: pointer;
-  background: transparent;
-}
-
-.stn-severity-badge.filter .stn-severity-badge__icon {
-  width: var(--stn-severity-icon-size, var(--stn-size-16, 16px));
-  height: var(--stn-severity-icon-size, var(--stn-size-16, 16px));
-}
-
-.stn-severity-badge.filter:hover {
-  filter: brightness(1.15);
-}
-
-.stn-severity-badge.filter:active {
-  filter: brightness(0.92);
-}
-
-/* 필터 비활성 상태 */
-.stn-severity-badge.filter.is-inactive,
-.stn-severity-badge.filter:not(.is-active) {
-  opacity: 0.35;
-  filter: grayscale(0.5);
-  box-shadow: none !important;
-}
-
-.stn-severity-badge.filter.is-inactive:hover,
-.stn-severity-badge.filter:not(.is-active):hover {
-  opacity: 0.65;
-  filter: grayscale(0.2);
-}
-
-/* 아이콘 래퍼 */
-.stn-severity-badge__icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.stn-severity-badge__icon img,
-.stn-severity-badge__icon svg {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.stn-severity-badge__label {
-  display: inline-block;
-  line-height: 1;
-}
-
-/* ==========================================================================
-   3. 심각도 등급별 색상 (시맨틱 토큰 연동)
-   ========================================================================== */
-
-.stn-severity-badge.critical {
-  --stn-badge-glow-color: var(--stn-severity-glow);
-  background: var(--stn-severity-critical-bg);
-  border: 1px solid var(--stn-severity-critical-border);
-  color: var(--stn-severity-fg);
-}
-
-.stn-severity-badge.major {
-  --stn-badge-glow-color: var(--stn-severity-glow-major);
-  background: var(--stn-severity-major-bg);
-  border: 1px solid var(--stn-severity-major-border);
-  color: var(--stn-severity-fg);
-}
-
-.stn-severity-badge.minor {
-  --stn-badge-glow-color: var(--stn-severity-glow-minor);
-  background: var(--stn-severity-minor-bg);
-  border: 1px solid var(--stn-severity-minor-border);
-  color: var(--stn-severity-fg);
-}
-
-.stn-severity-badge.warning {
-  --stn-badge-glow-color: var(--stn-severity-glow-warning);
-  background: var(--stn-severity-warning-bg);
-  border: 1px solid var(--stn-severity-warning-border);
-  color: var(--stn-severity-fg);
-}
-
-/* ==========================================================================
-   4. Glow 발광 변형 (.glow)
-   ========================================================================== */
-
-.stn-severity-badge.glow {
-  box-shadow: 0 0 var(--stn-space-8, 8px) var(--stn-badge-glow-color);
-}
-
-