@ihabdevteam/core 0.12.3 → 0.13.0

package/dist/ihabdevteam-core.d.ts

@@ -3889,7 +3889,7 @@ export declare interface ProgressBarProps {
 }
 
 /** @public */
-export declare function ProgressIndicator({ max, index, inactiveBg, inactiveColor, transparent }: ProgressIndicatorProps): JSX.Element | null;
+export declare function ProgressIndicator({ max, index, inactiveBg, inactiveColor, transparent, variant, announce }: ProgressIndicatorProps): JSX.Element | null;
 
 /** @public */
 export declare interface ProgressIndicatorProps {
@@ -3905,6 +3905,24 @@ export declare interface ProgressIndicatorProps {
      * inactiveBg·inactiveColor 를 직접 주면 그쪽이 이긴다.
      */
     transparent?: boolean;
+    /**
+     * 표시 방식.
+     *
+     * - `numbered` — 번호를 적은 52×28 칸. 기본값이다. 훈련 팝업처럼 "지금 몇
+     *   번째인지" 를 글로 읽어야 하는 자리에 쓴다.
+     * - `dot` — 번호 없는 8px 점. 지금 칸만 알약으로 늘어난다. 화면에서 멀리
+     *   떨어져 보는 안내처럼, 진행이 있다는 것만 알리고 본문에 자리를 내주는
+     *   자리에 쓴다. 좁은 화면에서도 접지 않는다 — 점은 이미 작다.
+     */
+    variant?: 'numbered' | 'dot';
+    /**
+     * 단계가 바뀔 때 낭독기가 스스로 알리게 한다(`role="status"`).
+     *
+     * 기본은 알리지 않는다 — 점 모드는 그림에 가까워 `role="img"` + 이름표로
+     * 두는 편이 조용하다. 사용자가 넘기는 것이 아니라 화면이 저절로 넘어가는
+     * 자리(검사 안내)에서는 켜는 편이 낫다.
+     */
+    announce?: boolean;
 }
 
 /** key → 실제 배경 컴포넌트. PromoBanner 등 사용처가 이걸로 렌더한다. 각 컴포넌트는 자신의
@@ -5466,7 +5484,7 @@ export declare type TabItem = {
 /** @public */
 export declare function Table<T extends {
     id?: string | number;
-}>({ fields, headerGroups, items, renderRow, onRowClick, onRowMouseEnter, onRowMouseLeave, onRowDragStart, onRowDragEnd, draggingId, gridTemplateColumns, resizable, resizeMode, resizeStorageKey, size, title, count, collapsed, onToggleCollapse, headerActions, empty, loading, dragOver, onDragOver, onDragLeave, onDrop, renderExpandedRow, expandedId, }: TableProps<T>): JSX.Element;
+}>({ fields, headerGroups, items, renderRow, onRowClick, onRowMouseEnter, onRowMouseLeave, onRowDragStart, onRowDragEnd, draggingId, gridTemplateColumns, resizable, resizeMode, resizeStorageKey, size, title, icon, count, collapsed, onToggleCollapse, headerActions, empty, loading, dragOver, onDragOver, onDragLeave, onDrop, renderExpandedRow, expandedId, }: TableProps<T>): JSX.Element;
 
 /**
  * **다음에 쓸 표를 고른다.**
@@ -5608,6 +5626,13 @@ export declare type TableProps<T extends {
     size?: 'small' | 'medium' | 'large';
     /** 테이블 상단 그룹 헤더 제목. 지정하면 .table-header 영역이 렌더됩니다. */
     title?: ReactNode;
+    /**
+     * 제목 앞에 서는 lucide 아이콘 이름. Panel 의 `icon` 과 같은 자리다.
+     *
+     * 이 자리가 없어서 부르는 쪽이 아이콘을 `title` 노드 안에 넣고 있었다 —
+     * 표와 판넬을 나란히 놓는 화면에서 둘의 머리 모양이 미묘하게 갈린다.
+     */
+    icon?: string;
     /** 제목 옆 항목 갯수 표시 */
     count?: number;
     /** 접힘 상태 — true면 필드/행 영역을 숨김. onToggleCollapse와 함께 사용 */

package/dist/packages/core/src/components/Panel.js

@@ -25,7 +25,7 @@ export default function Panel({ title, icon, disc, actions, size = 'medium', min
         style.maxWidth = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;
     if (labelWidth !== undefined)
         style['--panel-label-width'] = typeof labelWidth === 'number' ? `${labelWidth}px` : labelWidth;
-    return (_jsxs("div", { className: cls, style: Object.keys(style).length ? style : undefined, children: [(title != null || disc != null) && (_jsxs("div", { className: cx('panel__header', disc != null ? 'panel__header--with-disc' : ''), children: [icon && (_jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "panel__icon" })), _jsxs("div", { className: "panel__title-group", children: [title != null && _jsx("h2", { className: "panel__title h5b", children: title }), disc != null && _jsx("p", { className: "panel__disc caption-1", children: disc })] }), actions && _jsx("div", { className: "panel__actions", children: actions })] })), loading ? (_jsx(PanelRow, { variant: "loading" })) : empty != null && (children == null || (Array.isArray(children) && children.length === 0)) ? (_jsx(PanelRow, { variant: "empty", children: empty })) : scrollable ? (_jsx("div", { className: "panel__body--scroll", children: children })) : children] }));
+    return (_jsxs("div", { className: cls, style: Object.keys(style).length ? style : undefined, children: [(title != null || disc != null) && (_jsxs("div", { className: cx('panel__header', disc != null ? 'panel__header--with-disc' : ''), children: [icon && (_jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "panel__icon" })), _jsxs("div", { className: "panel__title-group", children: [title != null && (_jsx("h2", { className: `panel__title ${disc != null ? 'body-3b' : 'h5b'}`, children: title })), disc != null && _jsx("p", { className: "panel__disc caption-1", children: disc })] }), actions && _jsx("div", { className: "panel__actions", children: actions })] })), loading ? (_jsx(PanelRow, { variant: "loading" })) : empty != null && (children == null || (Array.isArray(children) && children.length === 0)) ? (_jsx(PanelRow, { variant: "empty", children: empty })) : scrollable ? (_jsx("div", { className: "panel__body--scroll", children: children })) : children] }));
 }
 // ── PanelGrid ──────────────────────────────────────────────────────────────
 /** @public */

package/dist/packages/core/src/components/ProgressIndicator.css

@@ -39,3 +39,32 @@
     height: 28px;
   }
 }
+
+/* ── 점 모드 ────────────────────────────────────────────────────────────
+   번호 없이 자리만 알린다. 지금 칸은 폭으로 갈린다 — 색만으로 가르면 색을
+   구별하기 어려운 사람에게 네 칸이 같아 보인다. 폭이 바뀌는 동안 움직임이
+   생기므로 전환을 짧게 두되, 움직임을 줄여 달라는 설정은 따른다. */
+.progress-indicator--dot {
+    gap: var(--spacing-xs);
+}
+
+.progress-indicator-dot--dot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--radius-full);
+    background: var(--pi-inactive-bg, var(--color-darkWhite));
+    transition: width 0.2s ease-out, background 0.2s ease-out;
+}
+
+.progress-indicator-dot--dot.done {
+    background: color-mix(in srgb, var(--color-main) 40%, transparent);
+}
+
+.progress-indicator-dot--dot.active {
+    width: 24px;
+    background: var(--color-main);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .progress-indicator-dot--dot { transition: none; }
+}

package/dist/packages/core/src/components/ProgressIndicator.d.ts

@@ -13,6 +13,24 @@ export interface ProgressIndicatorProps {
      * inactiveBg·inactiveColor 를 직접 주면 그쪽이 이긴다.
      */
     transparent?: boolean;
+    /**
+     * 표시 방식.
+     *
+     * - `numbered` — 번호를 적은 52×28 칸. 기본값이다. 훈련 팝업처럼 "지금 몇
+     *   번째인지" 를 글로 읽어야 하는 자리에 쓴다.
+     * - `dot` — 번호 없는 8px 점. 지금 칸만 알약으로 늘어난다. 화면에서 멀리
+     *   떨어져 보는 안내처럼, 진행이 있다는 것만 알리고 본문에 자리를 내주는
+     *   자리에 쓴다. 좁은 화면에서도 접지 않는다 — 점은 이미 작다.
+     */
+    variant?: 'numbered' | 'dot';
+    /**
+     * 단계가 바뀔 때 낭독기가 스스로 알리게 한다(`role="status"`).
+     *
+     * 기본은 알리지 않는다 — 점 모드는 그림에 가까워 `role="img"` + 이름표로
+     * 두는 편이 조용하다. 사용자가 넘기는 것이 아니라 화면이 저절로 넘어가는
+     * 자리(검사 안내)에서는 켜는 편이 낫다.
+     */
+    announce?: boolean;
 }
 /** @public */
-export default function ProgressIndicator({ max, index, inactiveBg, inactiveColor, transparent }: ProgressIndicatorProps): import("react").JSX.Element | null;
+export default function ProgressIndicator({ max, index, inactiveBg, inactiveColor, transparent, variant, announce }: ProgressIndicatorProps): import("react").JSX.Element | null;

package/dist/packages/core/src/components/ProgressIndicator.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import useMediaQuery from '../hooks/useMediaQuery';
 import './ProgressIndicator.css';
@@ -14,7 +14,7 @@ import './ProgressIndicator.css';
  */
 const TRANSPARENT_INACTIVE_BG = 'rgba(255, 255, 255, 0.16)';
 /** @public */
-export default function ProgressIndicator({ max, index, inactiveBg, inactiveColor, transparent }) {
+export default function ProgressIndicator({ max, index, inactiveBg, inactiveColor, transparent, variant = 'numbered', announce = false }) {
     const { t } = useTranslation();
     const isMobile = useMediaQuery('(max-width: 767px)');
     if (!Number.isInteger(max) || max <= 0)
@@ -37,6 +37,13 @@ export default function ProgressIndicator({ max, index, inactiveBg, inactiveColo
         if (!inactiveColor)
             rootStyle['--pi-inactive-color'] = 'var(--color-white)';
     }
+    /* 점 모드 — 번호가 없으므로 칸마다 읽을 것이 없다. role="list" 로 두면
+       낭독기가 "목록, 4개, 빈 항목…" 으로 읽어 도움이 되지 않는다. 그림 하나로
+       묶고 이름표에 자리를 적는다. 화면이 스스로 넘어가는 자리에서는
+       announce 로 role="status" 를 켠다. */
+    if (variant === 'dot') {
+        return (_jsx("div", { className: "progress-indicator progress-indicator--dot", style: rootStyle, role: announce ? 'status' : 'img', "aria-label": groupLabel, children: Array.from({ length: max }).map((_, i) => (_jsx("span", { "aria-hidden": "true", className: `progress-indicator-dot--dot${i < idx ? ' done' : i === idx ? ' active' : ''}` }, i))) }));
+    }
     // 모바일: 현재 단계만 표시 (n / max 형태)
     if (isMobile) {
         return (_jsx("div", { className: "progress-indicator progress-indicator--mobile", style: rootStyle, role: "list", "aria-label": groupLabel, children: _jsxs("span", { role: "listitem", className: "progress-indicator-dot active body-3", children: [idx + 1, " / ", max] }) }));

package/dist/packages/core/src/components/Table.css

@@ -30,6 +30,18 @@
   flex-shrink: 0;
 }
 
+/* 제목 앞 아이콘 — Panel 머리의 아이콘과 같은 크기·같은 색. 표와 판넬을
+   나란히 놓는 화면에서 두 머리가 같은 모양이 되도록. */
+.table-header__icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--t-item-fg, var(--color-main));
+}
+
 .table-header__title {
   color: var(--color-darkGray);
 }

package/dist/packages/core/src/components/Table.d.ts

@@ -66,6 +66,13 @@ export type TableProps<T extends {
     size?: 'small' | 'medium' | 'large';
     /** 테이블 상단 그룹 헤더 제목. 지정하면 .table-header 영역이 렌더됩니다. */
     title?: ReactNode;
+    /**
+     * 제목 앞에 서는 lucide 아이콘 이름. Panel 의 `icon` 과 같은 자리다.
+     *
+     * 이 자리가 없어서 부르는 쪽이 아이콘을 `title` 노드 안에 넣고 있었다 —
+     * 표와 판넬을 나란히 놓는 화면에서 둘의 머리 모양이 미묘하게 갈린다.
+     */
+    icon?: string;
     /** 제목 옆 항목 갯수 표시 */
     count?: number;
     /** 접힘 상태 — true면 필드/행 영역을 숨김. onToggleCollapse와 함께 사용 */
@@ -91,4 +98,4 @@ export type TableProps<T extends {
 /** @public */
 export default function Table<T extends {
     id?: string | number;
-}>({ fields, headerGroups, items, renderRow, onRowClick, onRowMouseEnter, onRowMouseLeave, onRowDragStart, onRowDragEnd, draggingId, gridTemplateColumns, resizable, resizeMode, resizeStorageKey, size, title, count, collapsed, onToggleCollapse, headerActions, empty, loading, dragOver, onDragOver, onDragLeave, onDrop, renderExpandedRow, expandedId, }: TableProps<T>): import("react").JSX.Element;
+}>({ fields, headerGroups, items, renderRow, onRowClick, onRowMouseEnter, onRowMouseLeave, onRowDragStart, onRowDragEnd, draggingId, gridTemplateColumns, resizable, resizeMode, resizeStorageKey, size, title, icon, count, collapsed, onToggleCollapse, headerActions, empty, loading, dragOver, onDragOver, onDragLeave, onDrop, renderExpandedRow, expandedId, }: TableProps<T>): import("react").JSX.Element;

package/dist/packages/core/src/components/Table.js

@@ -15,6 +15,7 @@ import { useState, useRef, useCallback, useEffect } from 'react';
 import ChevronUp from 'lucide-react/dist/esm/icons/chevron-up.mjs';
 import ChevronDown from 'lucide-react/dist/esm/icons/chevron-down.mjs';
 import Button from './Button';
+import Icon from './Icon';
 import Loader from './Loader';
 function TableCell({ children, className, style }) {
     return _jsx("div", { className: className ? `table-cell ${className}` : 'table-cell', style: style, children: children });
@@ -60,7 +61,7 @@ function TableField({ children, onClick, className, sortDir, onResizeStart }) {
     return (_jsxs("div", { onClick: onClick, onKeyDown: onClick ? handleKeyDown : undefined, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, "aria-sort": sortDir ? (sortDir === 'asc' ? 'ascending' : 'descending') : undefined, className: cx('table-field body-3', className, sortDir ? 'table-field--sorted' : '', onResizeStart ? 'table-field--resizable' : ''), children: [children, sortDir && _jsx(SortArrow, { dir: sortDir }), onResizeStart && (_jsx("span", { className: "table-field__resizer", onPointerDown: onResizeStart, onClick: e => e.stopPropagation(), "aria-hidden": "true" }))] }));
 }
 /** @public */
-export default function Table({ fields = [], headerGroups, items = [], renderRow, onRowClick, onRowMouseEnter, onRowMouseLeave, onRowDragStart, onRowDragEnd, draggingId, gridTemplateColumns, resizable = false, resizeMode = 'grow', resizeStorageKey, size = 'small', title, count, collapsed = false, onToggleCollapse, headerActions, empty, loading, dragOver = false, onDragOver, onDragLeave, onDrop, renderExpandedRow, expandedId, }) {
+export default function Table({ fields = [], headerGroups, items = [], renderRow, onRowClick, onRowMouseEnter, onRowMouseLeave, onRowDragStart, onRowDragEnd, draggingId, gridTemplateColumns, resizable = false, resizeMode = 'grow', resizeStorageKey, size = 'small', title, icon, count, collapsed = false, onToggleCollapse, headerActions, empty, loading, dragOver = false, onDragOver, onDragLeave, onDrop, renderExpandedRow, expandedId, }) {
     const { t } = useTranslation();
     // ── 컬럼 폭 드래그 리사이즈 (resizable) ──
     const MIN_COL_W = 48;
@@ -183,7 +184,7 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
     return (_jsx("div", { className: `table-wrap table-wrap--${size}${dragOver ? ' table-wrap--dragover' : ''}${collapsed ? ' table-wrap--collapsed' : ''}`, style: gridStyle, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, children: _jsxs("div", { className: "table body-2", children: [hasHeader && (_jsxs("div", { className: "table-header", onClick: onToggleCollapse, role: onToggleCollapse ? 'button' : undefined, tabIndex: onToggleCollapse ? 0 : undefined, "aria-expanded": onToggleCollapse ? !collapsed : undefined, onKeyDown: onToggleCollapse ? (e) => { if (e.key === 'Enter' || e.key === ' ') {
                         e.preventDefault();
                         onToggleCollapse();
-                    } } : undefined, children: [onToggleCollapse && (_jsx(Button, { size: 40, type: "dot", variant: "transparent-gray", useBorder: false, icon: collapsed ? 'chevron-right' : 'chevron-down', ariaLabel: collapsed ? t('common.expand', '펼치기') : t('common.collapse', '접기'), className: "table-header__chevron" })), _jsx("span", { className: "table-header__title h5b", children: title }), count !== undefined && _jsx("span", { className: "table-header__count body-3b", children: count }), headerActions && (_jsx("span", { className: "table-header__actions", onClick: e => e.stopPropagation(), children: headerActions }))] })), !collapsed && (_jsxs(_Fragment, { children: [headerGroups && headerGroups.length > 0 && (_jsx("div", { className: "table-fields table-fields--groups", children: headerGroups.map((g, i) => (_jsx("div", { className: cx('table-field body-3', g.className), style: { gridColumn: `span ${g.span}` }, children: g.label }, i))) })), _jsx("div", { className: "table-fields", ref: fieldsRef, children: fields.map((f, i) => (_jsx(TableField, { onClick: f.onClick, className: f.className, sortDir: f.sortDir, 
+                    } } : undefined, children: [onToggleCollapse && (_jsx(Button, { size: 40, type: "dot", variant: "transparent-gray", useBorder: false, icon: collapsed ? 'chevron-right' : 'chevron-down', ariaLabel: collapsed ? t('common.expand', '펼치기') : t('common.collapse', '접기'), className: "table-header__chevron" })), icon && (_jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "table-header__icon" })), _jsx("span", { className: "table-header__title h5b", children: title }), count !== undefined && _jsx("span", { className: "table-header__count body-3b", children: count }), headerActions && (_jsx("span", { className: "table-header__actions", onClick: e => e.stopPropagation(), children: headerActions }))] })), !collapsed && (_jsxs(_Fragment, { children: [headerGroups && headerGroups.length > 0 && (_jsx("div", { className: "table-fields table-fields--groups", children: headerGroups.map((g, i) => (_jsx("div", { className: cx('table-field body-3', g.className), style: { gridColumn: `span ${g.span}` }, children: g.label }, i))) })), _jsx("div", { className: "table-fields", ref: fieldsRef, children: fields.map((f, i) => (_jsx(TableField, { onClick: f.onClick, className: f.className, sortDir: f.sortDir, 
                                 /* fit 모드는 오른쪽 이웃에서 폭을 덜어 오므로, 덜어 올 컬럼이 없는 자리에는
                                    손잡이를 두지 않는다 — 두면 그 컬럼만 grow처럼 넓어져 표가 밀린다. */
                                 onResizeStart: resizable && i < fields.length - 1 && f.resizable !== false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ihabdevteam/core",
-  "version": "0.12.3",
+  "version": "0.13.0",
   "private": false,
   "main": "dist/ihabdevteam-core.cjs.js",
   "module": "dist/ihabdevteam-core.esm.js",
@@ -113,6 +113,7 @@
     "smoke-test": "node ./scripts/smoke-test.js",
     "audit:exports": "node ./scripts/audit-exports.cjs",
     "audit:docs": "node ./scripts/audit-docs.cjs",
+    "audit:props": "node ./scripts/audit-props-tables.cjs",
     "analyze:bundle": "node ./scripts/analyze-bundle.cjs",
     "pack:check": "bash ./scripts/publish-check.sh",
     "check:size": "size-limit",