@ihabdevteam/core 0.11.1 → 0.12.1

package/dist/ihabdevteam-core.d.ts

@@ -3001,7 +3001,7 @@ export declare interface PairStats {
     total: number;
 }
 
-export declare function Panel({ title, actions, size, minHeight, maxWidth, className, scrollable, useBorder, useBg, useRowBorder, labelWidth, form, loading, empty, children }: PanelProps): JSX.Element;
+export declare function Panel({ title, icon, disc, actions, size, minHeight, maxWidth, className, scrollable, useBorder, useBg, useRowBorder, labelWidth, form, loading, empty, children }: PanelProps): JSX.Element;
 
 /** @public */
 export declare type PanelElement = HTMLDivElement & {
@@ -3017,6 +3017,24 @@ export declare function PanelGrid({ cols, children }: {
 
 declare interface PanelProps {
     title?: ReactNode;
+    /**
+     * 제목 앞에 서는 lucide 아이콘 이름. Section 의 `icon` 과 같은 자리다.
+     *
+     * 제목 노드 안에 직접 넣지 말 것 — 그러면 설명(`disc`)이 아이콘 밑으로
+     * 들어가 제목 글자와 왼쪽 선이 어긋난다. 여기로 주면 아이콘이 제목·설명
+     * 묶음 밖에 서서 둘의 왼쪽이 맞는다.
+     */
+    icon?: string;
+    /**
+     * 제목 아래 한 줄 설명. Section 의 `disc` 와 같은 자리다.
+     *
+     * 머리가 제목 한 줄뿐이면, 칸이 무엇을 하는 자리인지 적을 곳이 없어 부르는
+     * 쪽이 설명을 첫 행(`PanelRow variant="description"`)으로 내리게 된다 —
+     * 고르는 것이 없는 행이 하나 늘고, 행 높이(56px)까지 차지한다.
+     * 설명을 `title` 에 끼워 넣는 것도 답이 아니다: 제목은 `<h2>` 안에 그려지므로
+     * 스크린리더가 설명까지 제목으로 읽는다.
+     */
+    disc?: ReactNode;
     actions?: ReactNode;
     /** 행 높이 스케일 — small 48 / medium 56 / large 64. 기본 medium */
     size?: PanelSize;

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

@@ -35,14 +35,50 @@
   box-sizing: border-box;
   border-bottom: 1px solid var(--color-darkWhite);
 }
+/* 머리 밑에 아무것도 없으면 가르는 선도 없다 — 판넬 자신의 테두리와 1px 을
+   사이에 두고 겹쳐 두 줄로 보인다(실측: 머리만 있는 판넬 높이 58px). */
+.panel__header:last-child {
+  border-bottom: none;
+}
 /* header 높이도 size 스케일을 따름 — small 48 / medium 56 / large 64 */
 .panel--small  .panel__header { min-height: 48px; }
 .panel--medium .panel__header { min-height: 56px; }
 .panel--large  .panel__header { min-height: 64px; }
+/* 제목 앞 아이콘 — Section 과 같은 크기·같은 색. 제목·설명 묶음 밖에 서므로
+   설명도 제목 글자와 같은 왼쪽 선에서 시작한다. */
+.panel__icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: var(--spacing-s);
+  color: var(--t-item-fg, var(--color-main));
+}
+
+/* 제목 + 설명 한 덩이. 설명이 없으면 한 줄짜리라 예전과 같은 모양이다. */
+.panel__title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
 .panel__title {
   color: var(--color-darkGray);
   margin: 0;
 }
+/* 색은 행의 부제(panel-row__sub)와 같다. 급도 같은 caption-1 을 쓴다 —
+   머리와 행의 곁글이 한 화면에 함께 서므로(Section 의 disc 는 body-3 이지만
+   그쪽은 판넬 밖 제목이라 옆에 견줄 곁글이 없다). */
+.panel__disc {
+  color: var(--color-gray);
+  margin: 0;
+}
+/* 설명이 붙어도 머리 높이는 size 스케일 그대로다 — 위아래 여백을 따로 주면
+   그만큼 머리만 커져서, 부제(sub)가 붙어도 높이가 그대로인 행과 어긋난다
+   (실측: padding 12px 을 줬더니 56 → 74). 제목+설명 두 줄은 49px 이라
+   medium(56)·large(64) 안에 들어간다. small(48) 에서만 살짝 넘친다. */
 .panel__actions {
   display: flex;
   gap: 6px;

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

@@ -4,6 +4,24 @@ import './Panel.css';
 type PanelSize = 'small' | 'medium' | 'large';
 interface PanelProps {
     title?: ReactNode;
+    /**
+     * 제목 앞에 서는 lucide 아이콘 이름. Section 의 `icon` 과 같은 자리다.
+     *
+     * 제목 노드 안에 직접 넣지 말 것 — 그러면 설명(`disc`)이 아이콘 밑으로
+     * 들어가 제목 글자와 왼쪽 선이 어긋난다. 여기로 주면 아이콘이 제목·설명
+     * 묶음 밖에 서서 둘의 왼쪽이 맞는다.
+     */
+    icon?: string;
+    /**
+     * 제목 아래 한 줄 설명. Section 의 `disc` 와 같은 자리다.
+     *
+     * 머리가 제목 한 줄뿐이면, 칸이 무엇을 하는 자리인지 적을 곳이 없어 부르는
+     * 쪽이 설명을 첫 행(`PanelRow variant="description"`)으로 내리게 된다 —
+     * 고르는 것이 없는 행이 하나 늘고, 행 높이(56px)까지 차지한다.
+     * 설명을 `title` 에 끼워 넣는 것도 답이 아니다: 제목은 `<h2>` 안에 그려지므로
+     * 스크린리더가 설명까지 제목으로 읽는다.
+     */
+    disc?: ReactNode;
     actions?: ReactNode;
     /** 행 높이 스케일 — small 48 / medium 56 / large 64. 기본 medium */
     size?: PanelSize;
@@ -27,7 +45,7 @@ interface PanelProps {
     empty?: ReactNode;
     children?: ReactNode;
 }
-export default function Panel({ title, actions, size, minHeight, maxWidth, className, scrollable, useBorder, useBg, useRowBorder, labelWidth, form, loading, empty, children }: PanelProps): import("react").JSX.Element;
+export default function Panel({ title, icon, disc, actions, size, minHeight, maxWidth, className, scrollable, useBorder, useBg, useRowBorder, labelWidth, form, loading, empty, children }: PanelProps): import("react").JSX.Element;
 /** @public */
 export declare function PanelGrid({ cols, children }: {
     cols?: number;

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

@@ -8,12 +8,13 @@ import SegmentedControl from './SegmentedControl';
 import Dropdown from './Dropdown';
 import Button from './Button';
 import Badge from './Badge';
+import Icon from './Icon';
 import { deviceKindVariant } from '../utils/deviceKind';
 import TextField from './TextField';
 import Loader from './Loader';
 import './Panel.css';
 const noop = () => { };
-export default function Panel({ title, actions, size = 'medium', minHeight, maxWidth, className, scrollable, useBorder = true, useBg = true, useRowBorder = true, labelWidth, form = false, loading, empty, children }) {
+export default function Panel({ title, icon, disc, actions, size = 'medium', minHeight, maxWidth, className, scrollable, useBorder = true, useBg = true, useRowBorder = true, labelWidth, form = false, loading, empty, children }) {
     const cls = cx('panel', `panel--${size}`, form ? 'panel--form' : '', 
     /* minHeight 패널은 마지막 행 아래 빈 공간이 생길 수 있으므로 행 하단 구분선 사용 */
     minHeight !== undefined ? 'panel--fill' : '', !useBorder ? 'panel--no-border' : '', !useBg ? 'panel--no-bg' : '', !useRowBorder ? 'panel--no-row-border' : '', className);
@@ -24,7 +25,7 @@ export default function Panel({ title, actions, size = 'medium', minHeight, maxW
         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 && (_jsxs("div", { className: "panel__header", children: [_jsx("h2", { className: "panel__title h5b", children: title }), 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 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/utils/lucideIconSet.js

@@ -155,6 +155,7 @@ import WrenchIcon from 'lucide-react/dist/esm/icons/wrench.mjs';
 import XIcon from 'lucide-react/dist/esm/icons/x.mjs';
 import ZapIcon from 'lucide-react/dist/esm/icons/zap.mjs';
 import AnchorIcon from 'lucide-react/dist/esm/icons/anchor.mjs';
+import ArmchairIcon from 'lucide-react/dist/esm/icons/armchair.mjs';
 import ArrowUpAZIcon from 'lucide-react/dist/esm/icons/arrow-up-a-z.mjs';
 import BarChart2Icon from 'lucide-react/dist/esm/icons/bar-chart-2.mjs';
 import CalendarIcon from 'lucide-react/dist/esm/icons/calendar.mjs';
@@ -194,6 +195,7 @@ export const STATIC_LUCIDE_ICONS = {
     'alert-triangle': AlertTriangleIcon,
     'align-start-vertical': AlignStartVerticalIcon,
     'anchor': AnchorIcon,
+    'armchair': ArmchairIcon,
     'arrow-down': ArrowDownIcon,
     'arrow-left': ArrowLeftIcon,
     'arrow-right': ArrowRightIcon,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ihabdevteam/core",
-  "version": "0.11.1",
+  "version": "0.12.1",
   "private": false,
   "main": "dist/ihabdevteam-core.cjs.js",
   "module": "dist/ihabdevteam-core.esm.js",