@ihabdevteam/core 0.11.0 → 0.12.0

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, 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,16 @@ export declare function PanelGrid({ cols, children }: {
 
 declare interface PanelProps {
     title?: ReactNode;
+    /**
+     * 제목 아래 한 줄 설명. 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

@@ -39,10 +39,27 @@
 .panel--small  .panel__header { min-height: 48px; }
 .panel--medium .panel__header { min-height: 56px; }
 .panel--large  .panel__header { min-height: 64px; }
+/* 제목 + 설명 한 덩이. 설명이 없으면 한 줄짜리라 예전과 같은 모양이다. */
+.panel__title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
 .panel__title {
   color: var(--color-darkGray);
   margin: 0;
 }
+/* Section 의 disc 와 같은 색·같은 급 */
+.panel__disc {
+  color: var(--color-gray);
+  margin: 0;
+}
+/* 설명이 붙은 머리는 두 줄이라 size 의 min-height 를 넘어선다 —
+   위아래 여백을 줘서 글이 테두리에 붙지 않게 한다. */
+.panel__header--with-disc {
+  padding-block: var(--spacing-s);
+}
 .panel__actions {
   display: flex;
   gap: 6px;

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

@@ -4,6 +4,16 @@ import './Panel.css';
 type PanelSize = 'small' | 'medium' | 'large';
 interface PanelProps {
     title?: ReactNode;
+    /**
+     * 제목 아래 한 줄 설명. Section 의 `disc` 와 같은 자리다.
+     *
+     * 머리가 제목 한 줄뿐이면, 칸이 무엇을 하는 자리인지 적을 곳이 없어 부르는
+     * 쪽이 설명을 첫 행(`PanelRow variant="description"`)으로 내리게 된다 —
+     * 고르는 것이 없는 행이 하나 늘고, 행 높이(56px)까지 차지한다.
+     * 설명을 `title` 에 끼워 넣는 것도 답이 아니다: 제목은 `<h2>` 안에 그려지므로
+     * 스크린리더가 설명까지 제목으로 읽는다.
+     */
+    disc?: ReactNode;
     actions?: ReactNode;
     /** 행 높이 스케일 — small 48 / medium 56 / large 64. 기본 medium */
     size?: PanelSize;
@@ -27,7 +37,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, 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

@@ -13,7 +13,7 @@ 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, 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 +24,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: [_jsxs("div", { className: "panel__title-group", children: [title != null && _jsx("h2", { className: "panel__title h5b", children: title }), disc != null && _jsx("p", { className: "panel__disc body-3", 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/package.json

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