@wipco/sdui 0.1.0 → 0.2.0

package/dist/styles.css

@@ -270,7 +270,27 @@
 .wp-btn--lg { height: 40px; padding: 0 16px; font-size: 14px; }
 .wp-btn--xl { height: 48px; padding: 0 20px; font-size: 15px; }
 .wp-btn--block { width: 100%; }
-.wp-btn--loading { pointer-events: none; }
+/*
+ * loading 스피너는 **CSS가 그린다**. 컴포넌트는 엘리먼트를 넣지 않는다(components.tsx 주석 참고) —
+ * 그리는 주체가 둘이면 원이 두 개 돈다. 라벨은 투명하게 눕히고 그 위에 원을 얹는다.
+ */
+.wp-btn--loading { pointer-events: none; color: transparent !important; position: relative; }
+.wp-btn--loading::after {
+  content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%;
+  border: 1.5px solid currentColor; border-top-color: transparent;
+  animation: wp-spin 0.7s linear infinite; color: var(--wp-action-primary-fg);
+}
+.wp-btn--primary.wp-btn--loading::after, .wp-btn--danger.wp-btn--loading::after {
+  border-color: rgba(255, 255, 255, 0.85); border-top-color: transparent;
+}
+.wp-btn--secondary.wp-btn--loading::after, .wp-btn--ghost.wp-btn--loading::after {
+  border-color: var(--wp-slate-500); border-top-color: transparent;
+}
+/* as="a"/"span"은 disabled 속성이 없다 — 비활성 표기는 aria-disabled로도 걸린다. */
+.wp-btn[aria-disabled='true']:not(.wp-btn--loading) {
+  cursor: not-allowed; background: var(--wp-action-disabled-bg);
+  border-color: transparent; color: var(--wp-action-disabled-fg);
+}
 
 .wp-iconbtn {
   display: inline-flex; align-items: center; justify-content: center;
@@ -283,8 +303,18 @@
 .wp-iconbtn:focus-visible { outline: 2px solid var(--wp-border-focus); outline-offset: 1px; }
 .wp-iconbtn--sm { width: 28px; height: 28px; }
 .wp-iconbtn--xs { width: 24px; height: 24px; }
+.wp-iconbtn--lg { width: 40px; height: 40px; }
 .wp-iconbtn--danger { color: var(--wp-text-danger); }
 .wp-iconbtn--danger:hover { background: var(--wp-red-50); }
+/* solid — 주 동작이 아이콘 하나뿐인 자리(뷰어 툴바의 닫기 등). */
+.wp-iconbtn--solid { background: var(--wp-action-primary-bg); color: var(--wp-action-primary-fg); }
+.wp-iconbtn--solid:hover:not(:disabled) { background: var(--wp-action-primary-bg-hover); color: var(--wp-white); }
+/* onchrome — 네이비 사이드바/탑바 위. 밝은 글자에 반투명 호버. */
+.wp-iconbtn--onchrome { color: var(--wp-chrome-fg-muted); }
+.wp-iconbtn--onchrome:hover:not(:disabled) { background: var(--wp-chrome-item-hover); color: var(--wp-chrome-fg); }
+.wp-iconbtn:disabled { cursor: not-allowed; color: var(--wp-text-disabled); background: transparent; }
+/* pressed(토글 켜짐) — 선택 틴트. 클래스가 아니라 aria로 거는 이유는 상태가 곧 접근성 값이라서다. */
+.wp-iconbtn[aria-pressed='true'] { background: var(--wp-surface-selected); color: var(--wp-text-brand); }
 /* outlined — 툴바에서 배경이 같은 표면 위에 놓일 때 눌리는 자리임을 하드라인으로 보인다. */
 .wp-iconbtn--outlined {
   border: 1px solid var(--wp-action-secondary-border);
@@ -295,6 +325,24 @@
 .wp-iconbtn--outlined:hover { background: var(--wp-action-secondary-bg-hover); border-color: var(--wp-border-strong); }
 .wp-iconbtn--outlined:active { background: var(--wp-action-secondary-bg-active); }
 
+/* 세그먼티드 — 배타 뷰 전환(목록/카드, 2D/3D). 항목 2~4개까지, 그 이상은 Select다. */
+.wp-seg {
+  display: inline-flex; padding: 2px; gap: 2px;
+  background: var(--wp-surface-sunken); border: 1px solid var(--wp-border-subtle);
+  border-radius: var(--wp-radius-md);
+}
+.wp-seg__item {
+  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
+  height: 24px; padding: 0 10px; border: 0; background: transparent;
+  border-radius: var(--wp-radius-sm);
+  font-family: inherit; font-size: 12px; font-weight: 600; white-space: nowrap;
+  color: var(--wp-text-muted); cursor: pointer; transition: background 0.12s, color 0.12s;
+}
+.wp-seg__item:hover { color: var(--wp-text-strong); }
+.wp-seg__item[aria-selected='true'] { background: var(--wp-surface-card); color: var(--wp-text-strong); box-shadow: var(--wp-shadow-sm); }
+.wp-seg__item:focus-visible { outline: 2px solid var(--wp-border-focus); outline-offset: 1px; }
+.wp-seg--lg .wp-seg__item { height: 30px; padding: 0 14px; font-size: 13px; }
+
 /* ---------- 입력 ---------- */
 .wp-input, .wp-textarea, .wp-select {
   font-family: inherit; font-size: 13px; color: var(--wp-text-default);
@@ -354,6 +402,8 @@
   display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s, border-color 0.12s;
 }
 .wp-check input:checked + .wp-check__box { background: var(--wp-action-primary-bg); border-color: var(--wp-action-primary-bg); color: var(--wp-white); }
+/* 부분 선택 — 체크와 같은 채움에 글리프만 빼기(컴포넌트가 minus로 바꿔 넣는다). */
+.wp-check input:indeterminate + .wp-check__box { background: var(--wp-navy-600); border-color: var(--wp-navy-600); color: var(--wp-white); }
 .wp-check input:focus-visible + .wp-check__box { outline: 2px solid var(--wp-border-focus); outline-offset: 1px; }
 .wp-check__text { display: flex; flex-direction: column; gap: 2px; }
 .wp-check__desc { font-size: 12px; color: var(--wp-text-muted); }
@@ -494,6 +544,11 @@
 .wp-tab:hover { color: var(--wp-text-default); }
 .wp-tab[aria-selected='true'] { color: var(--wp-text-brand); border-bottom-color: var(--wp-accent); }
 .wp-tabs--lg .wp-tab { height: 42px; font-size: 14px; }
+/* onchrome — 네이비 탑바 위. 밝은 글자에 빨간 인디케이터. */
+.wp-tabs--onchrome { border-bottom-color: var(--wp-chrome-border); }
+.wp-tabs--onchrome .wp-tab { color: var(--wp-chrome-fg-muted); }
+.wp-tabs--onchrome .wp-tab:hover { color: var(--wp-chrome-fg); }
+.wp-tabs--onchrome .wp-tab[aria-selected='true'] { color: var(--wp-white); border-bottom-color: var(--wp-accent); }
 .wp-tab__count {
   font-size: 11px; font-weight: 700; padding: 1px 6px;
   background: var(--wp-slate-100); border-radius: var(--wp-radius-full); color: var(--wp-text-muted);
@@ -510,6 +565,15 @@
 .wp-table td { padding: 10px 12px; border-bottom: 1px solid var(--wp-border-subtle); vertical-align: middle; }
 .wp-table--dense td { padding: 6px 12px; }
 .wp-table--hover tbody tr:hover { background: var(--wp-surface-hover); }
+.wp-table tbody tr[aria-selected='true'] { background: var(--wp-surface-selected); }
+/* 정렬 헤더 — th의 타이포를 그대로 물려받아 버튼처럼 보이지 않게 한다. */
+.wp-table__sort {
+  display: inline-flex; align-items: center; gap: 3px;
+  border: none; background: none; padding: 0; cursor: pointer;
+  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
+}
+.wp-table__sort:hover { color: var(--wp-text-default); }
+.wp-table--sticky thead th { position: sticky; top: 0; z-index: 1; }
 .wp-table__num { text-align: right; font-variant-numeric: tabular-nums; }
 .wp-table__mono { font-family: var(--wp-font-mono); font-size: 12px; }
 .wp-table__strong { font-weight: 600; color: var(--wp-text-strong); }
@@ -548,21 +612,32 @@
 }
 .wp-spinner--sm { width: 12px; height: 12px; border-width: 2px; }
 .wp-spinner--lg { width: 24px; height: 24px; border-width: 3px; }
+/* inverse — 네이비/뷰어 표면 위에서는 밝은 쪽으로 뒤집는다. */
+.wp-spinner--inverse { border-color: rgba(255, 255, 255, 0.28); border-top-color: var(--wp-white); }
 @keyframes wp-spin { to { transform: rotate(360deg); } }
 
-.wp-progress { display: flex; flex-direction: column; gap: 5px; }
-/* showValue를 켜면 라벨 줄이 "라벨 … 값" 두 칸이 된다(라벨이 없으면 값만 오른쪽에). */
-.wp-progress__label { display: flex; align-items: baseline; gap: var(--wp-space-2); font-size: 12px; color: var(--wp-text-muted); }
-/* 값은 라벨과 같은 무게로 흐리게 둔다 — 눈에 먼저 걸려야 하는 것은 막대 자체다. */
-.wp-progress__value { margin-left: auto; flex: none; text-align: right; }
-.wp-progress__track { height: 6px; background: var(--wp-slate-100); border-radius: var(--wp-radius-full); overflow: hidden; }
-.wp-progress__fill { height: 100%; border-radius: var(--wp-radius-full); transition: width 0.25s; }
-.wp-progress__fill--brand { background: var(--wp-navy-600); }
-.wp-progress__fill--success { background: var(--wp-green-600); }
-.wp-progress__fill--warning { background: var(--wp-gold-600); }
-.wp-progress__fill--danger { background: var(--wp-red-600); }
+/*
+ * 진척/용량 막대. 클래스 어휘는 .wp-meter*다 — .wp-progress*가 아니다.
+ * 디자인 시스템 쪽 이름이 meter이고, ProgressBar가 그 마크업을 그대로 낸다.
+ */
+.wp-meter { width: 100%; height: 6px; background: var(--wp-slate-200); border-radius: var(--wp-radius-full); overflow: hidden; }
+.wp-meter--sm { height: 4px; }
+.wp-meter--lg { height: 8px; }
+.wp-meter__fill { height: 100%; background: var(--wp-navy-600); border-radius: var(--wp-radius-full); transition: width 0.25s; }
+.wp-meter__fill--success { background: var(--wp-green-600); }
+.wp-meter__fill--warning { background: var(--wp-gold-600); }
+.wp-meter__fill--danger { background: var(--wp-red-600); }
 /* info — 브랜드 네이비와 헷갈리지 않게 시그널 블루 쪽을 쓴다. */
-.wp-progress__fill--info { background: var(--wp-blue-600); }
+.wp-meter__fill--info { background: var(--wp-blue-500); }
+/* striped — 진행 중인 작업에만. 정지된 값에 쓰면 움직이는 것처럼 읽힌다. */
+.wp-meter__fill--striped {
+  background-image: linear-gradient(115deg, rgba(255, 255, 255, 0.22) 25%, transparent 25% 50%,
+    rgba(255, 255, 255, 0.22) 50% 75%, transparent 75%);
+  background-size: 10px 10px;
+}
+/* 라벨 없이 showValue만 켠 모양 — 값이 막대 오른쪽 옆에 붙는다. */
+.wp-meter-row { display: flex; align-items: center; gap: 10px; }
+.wp-meter-row__val { font-size: 12px; color: var(--wp-text-muted); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
 
 /* ---------- 페이지네이션 ---------- */
 .wp-pager { display: flex; align-items: center; gap: 4px; width: 100%; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wipco/sdui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "WIPCO 서버 주도 UI(SDUI) 렌더러 — JSON 페이지 스펙을 React 컴포넌트로 렌더링",
   "keywords": [
     "sdui",