@xfilecom/front-core 0.2.19 → 0.2.21

package/dist/base.css

@@ -93,6 +93,13 @@ a:hover {
   color: var(--xfc-fg-label);
 }
 
+.xfc-text--truncate {
+  overflow: hidden;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* —— Layout —— */
 
 .xfc-stack {
@@ -131,6 +138,26 @@ a:hover {
   align-items: stretch;
 }
 
+.xfc-stack--justify-start {
+  justify-content: flex-start;
+}
+.xfc-stack--justify-end {
+  justify-content: flex-end;
+}
+.xfc-stack--justify-center {
+  justify-content: center;
+}
+.xfc-stack--justify-between {
+  justify-content: space-between;
+}
+.xfc-stack--justify-around {
+  justify-content: space-around;
+}
+
+.xfc-stack--nowrap {
+  flex-wrap: nowrap;
+}
+
 .xfc-box {
   display: block;
 }
@@ -153,6 +180,25 @@ a:hover {
   box-shadow: var(--xfc-card-shadow);
 }
 
+.xfc-card__header {
+  padding: var(--xfc-space-lg) var(--xfc-space-lg) var(--xfc-space-md);
+  border-bottom: 1px solid var(--xfc-border);
+  font-size: var(--xfc-text-section);
+  font-weight: 700;
+  color: var(--xfc-fg-strong);
+}
+
+.xfc-card__body {
+  min-width: 0;
+  padding: var(--xfc-space-lg);
+}
+
+.xfc-card__footer {
+  padding: 0 var(--xfc-space-lg) var(--xfc-space-lg);
+  border-top: 1px solid var(--xfc-border);
+  padding-top: var(--xfc-space-md);
+}
+
 /* —— Buttons (피그마: 80×34 primary, radius 5) —— */
 
 .xfc-btn {
@@ -186,6 +232,21 @@ a:hover {
   cursor: not-allowed;
 }
 
+.xfc-btn--loading {
+  cursor: wait;
+}
+
+.xfc-btn__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+.xfc-btn__label {
+  min-width: 0;
+}
+
 .xfc-btn--primary {
   background: var(--xfc-accent);
   color: var(--xfc-accent-fg);
@@ -268,6 +329,22 @@ a:hover {
   cursor: not-allowed;
 }
 
+.xfc-input--invalid {
+  border-color: var(--xfc-danger);
+}
+
+.xfc-input--invalid:focus {
+  border-color: var(--xfc-danger);
+  box-shadow: var(--xfc-input-shadow), 0 0 0 2px color-mix(in srgb, var(--xfc-danger) 25%, transparent);
+}
+
+.xfc-input-description {
+  margin: var(--xfc-space-xs) 0 0;
+  font-size: var(--xfc-text-small);
+  line-height: var(--xfc-leading-normal);
+  color: var(--xfc-fg-muted);
+}
+
 /* —— Badges —— */
 
 .xfc-badge {
@@ -300,6 +377,29 @@ a:hover {
   color: var(--xfc-danger);
 }
 
+span.xfc-badge[aria-disabled='true'] {
+  opacity: 0.55;
+  pointer-events: none;
+}
+
+button.xfc-badge {
+  cursor: pointer;
+  font: inherit;
+  border: none;
+}
+
+button.xfc-badge:disabled,
+button.xfc-badge[aria-disabled='true'] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.xfc-badge__icon {
+  display: inline-flex;
+  margin-inline-end: var(--xfc-space-xs);
+  vertical-align: middle;
+}
+
 /* —— Global loading overlay (business-promotion global-indicator) —— */
 
 .xfc-loading-overlay {
@@ -332,6 +432,20 @@ a:hover {
   filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
 }
 
+.xfc-loading-overlay-title {
+  margin: 0 0 var(--xfc-space-xs);
+  max-width: min(280px, 100%);
+  font-size: var(--xfc-text-body);
+  font-weight: 700;
+  line-height: 1.3;
+  color: var(--xfc-fg-strong);
+  text-align: center;
+  text-shadow:
+    0 0 10px rgba(255, 255, 255, 1),
+    0 0 3px rgba(255, 255, 255, 1),
+    0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
 .xfc-loading-overlay-message {
   margin: 0;
   max-width: min(280px, 100%);
@@ -496,6 +610,19 @@ a:hover {
   box-shadow: var(--xfc-toast-shadow);
 }
 
+.xfc-inline-error-item__main {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: var(--xfc-space-sm);
+}
+
+.xfc-inline-error-item__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
 .xfc-inline-error-dismiss {
   background: none;
   border: none;
@@ -586,12 +713,45 @@ a:hover {
   animation: xfc-dialog-panel-in 0.22s ease-out;
 }
 
+.xfc-dialog-panel__title-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--xfc-space-md);
+  margin: 0 0 var(--xfc-space-md);
+}
+
+.xfc-dialog-panel__title-block {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  align-items: center;
+  gap: var(--xfc-space-sm);
+  flex-wrap: wrap;
+}
+
 .xfc-dialog-panel__title {
   font-size: var(--xfc-text-section);
   font-weight: 700;
   line-height: var(--xfc-leading-tight);
-  margin: 0 0 var(--xfc-space-md);
+  margin: 0;
   color: var(--xfc-fg-strong);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.xfc-dialog-panel__title-adornment {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  color: var(--xfc-fg-muted);
+}
+
+.xfc-dialog-panel__title-extra {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--xfc-space-xs);
 }
 
 .xfc-dialog-panel__description {
@@ -651,11 +811,39 @@ button.xfc-btn.xfc-btn--primary.xfc-confirm-dialog__confirm--danger:hover:not(:d
   flex-shrink: 0;
 }
 
+.xfc-bottom-sheet-panel__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--xfc-space-md);
+  margin: 0 0 var(--xfc-space-sm);
+}
+
+.xfc-bottom-sheet-panel__head--only-extra {
+  justify-content: flex-end;
+}
+
 .xfc-bottom-sheet-panel__title {
   font-size: var(--xfc-text-section);
   font-weight: 700;
-  margin: 0 0 var(--xfc-space-md);
+  margin: 0;
   color: var(--xfc-fg-strong);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.xfc-bottom-sheet-panel__head-extra {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--xfc-space-xs);
+}
+
+.xfc-bottom-sheet-panel__subtitle {
+  margin: 0 0 var(--xfc-space-md);
+  font-size: var(--xfc-text-small);
+  line-height: var(--xfc-leading-normal);
+  color: var(--xfc-fg-muted);
 }
 
 .xfc-bottom-sheet-panel__body {

package/dist/components/atoms/Badge.d.ts

@@ -1,6 +1,13 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-export type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
+import type { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+export type BadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, 'onClick'> & {
     tone?: 'neutral' | 'accent' | 'success' | 'danger';
     children?: ReactNode;
+    /** 앞쪽 아이콘·이모지 등 */
+    icon?: ReactNode;
+    /** false 이거나 disabled 시 스타일만 비활성 (span 인 경우 클릭 불가) */
+    enabled?: boolean;
+    disabled?: boolean;
+    /** 있으면 `<button type="button">` 로 렌더 (키보드·스크린리더 친화) */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
 };
-export declare function Badge({ tone, className, children, ...rest }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Badge({ tone, className, children, icon, enabled, onClick, disabled, ...rest }: BadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Badge.js

@@ -2,7 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Badge = Badge;
 const jsx_runtime_1 = require("react/jsx-runtime");
-function Badge({ tone = 'neutral', className = '', children, ...rest }) {
+function Badge({ tone = 'neutral', className = '', children, icon, enabled = true, onClick, disabled, ...rest }) {
     const cls = ['xfc-badge', `xfc-badge--${tone}`, className].filter(Boolean).join(' ');
-    return ((0, jsx_runtime_1.jsx)("span", { className: cls, ...rest, children: children }));
+    const isDisabled = disabled === true || !enabled;
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon ? (0, jsx_runtime_1.jsx)("span", { className: "xfc-badge__icon", children: icon }) : null, children] }));
+    if (onClick) {
+        return ((0, jsx_runtime_1.jsx)("button", { type: "button", className: cls, disabled: isDisabled, "aria-disabled": isDisabled || undefined, onClick: onClick, ...rest, children: content }));
+    }
+    return ((0, jsx_runtime_1.jsx)("span", { className: cls, "aria-disabled": isDisabled || undefined, ...rest, children: content }));
 }

package/dist/components/atoms/Box.d.ts

@@ -1,6 +1,8 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-export type BoxProps = HTMLAttributes<HTMLDivElement> & {
+import { type ElementType, type HTMLAttributes, type ReactNode } from 'react';
+export type BoxProps = {
+    as?: ElementType;
     padding?: 'none' | 'sm' | 'md' | 'lg';
     children?: ReactNode;
-};
-export declare function Box({ padding, className, children, ...rest }: BoxProps): import("react/jsx-runtime").JSX.Element;
+    className?: string;
+} & HTMLAttributes<HTMLElement>;
+export declare function Box({ as, padding, className, children, ...rest }: BoxProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/components/atoms/Box.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Box = Box;
-const jsx_runtime_1 = require("react/jsx-runtime");
-function Box({ padding = 'none', className = '', children, ...rest }) {
+const react_1 = require("react");
+function Box({ as = 'div', padding = 'none', className = '', children, ...rest }) {
     const padClass = padding === 'none' ? '' : padding === 'sm' ? 'xfc-box--p-sm' : padding === 'md' ? 'xfc-box--p-md' : 'xfc-box--p-lg';
     const cls = ['xfc-box', padClass, className].filter(Boolean).join(' ');
-    return ((0, jsx_runtime_1.jsx)("div", { className: cls, ...rest, children: children }));
+    return (0, react_1.createElement)(as, { className: cls, ...rest }, children);
 }

package/dist/components/atoms/Button.d.ts

@@ -1,5 +1,12 @@
-import type { ButtonHTMLAttributes } from 'react';
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     variant?: 'primary' | 'secondary' | 'outline' | 'muted' | 'ghost';
+    /** false 이면 disabled 와 동일 (스타일·상호작용 끔) */
+    enabled?: boolean;
+    /** true 이면 비활성 + 로딩 표시(aria-busy) */
+    loading?: boolean;
+    /** 버튼 텍스트 앞/뒤 아이콘 등 */
+    icon?: ReactNode;
+    iconPosition?: 'start' | 'end';
 };
-export declare function Button({ variant, className, type, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ variant, className, type, enabled, loading, icon, iconPosition, disabled, children, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Button.js

@@ -2,7 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = Button;
 const jsx_runtime_1 = require("react/jsx-runtime");
-function Button({ variant = 'primary', className = '', type = 'button', ...rest }) {
-    const cls = ['xfc-btn', `xfc-btn--${variant}`, className].filter(Boolean).join(' ');
-    return (0, jsx_runtime_1.jsx)("button", { type: type, className: cls, ...rest });
+function Button({ variant = 'primary', className = '', type = 'button', enabled = true, loading = false, icon, iconPosition = 'start', disabled, children, ...rest }) {
+    const isDisabled = Boolean(disabled || !enabled || loading);
+    const cls = [
+        'xfc-btn',
+        `xfc-btn--${variant}`,
+        loading ? 'xfc-btn--loading' : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const iconEl = icon ? ((0, jsx_runtime_1.jsx)("span", { className: "xfc-btn__icon", "aria-hidden": typeof icon === 'string' ? undefined : true, children: icon })) : null;
+    return ((0, jsx_runtime_1.jsxs)("button", { type: type, className: cls, disabled: isDisabled, "aria-busy": loading || undefined, ...rest, children: [icon && iconPosition === 'start' ? iconEl : null, loading ? ((0, jsx_runtime_1.jsx)("span", { className: "xfc-btn__label", children: "\u2026" })) : children != null && children !== false ? ((0, jsx_runtime_1.jsx)("span", { className: "xfc-btn__label", children: children })) : null, icon && iconPosition === 'end' ? iconEl : null] }));
 }

package/dist/components/atoms/Card.d.ts

@@ -1,5 +1,9 @@
 import type { HTMLAttributes, ReactNode } from 'react';
 export type CardProps = HTMLAttributes<HTMLDivElement> & {
     children?: ReactNode;
+    /** 상단 헤더 슬롯 (있으면 본문은 .xfc-card__body 로 감쌈) */
+    title?: ReactNode;
+    /** 하단 푸터 슬롯 */
+    footer?: ReactNode;
 };
-export declare function Card({ className, children, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ className, children, title, footer, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Card.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Card = Card;
 const jsx_runtime_1 = require("react/jsx-runtime");
-function Card({ className = '', children, ...rest }) {
+function Card({ className = '', children, title, footer, ...rest }) {
     const cls = ['xfc-card', className].filter(Boolean).join(' ');
-    return ((0, jsx_runtime_1.jsx)("div", { className: cls, ...rest, children: children }));
+    const structured = title != null || footer != null;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: cls, ...rest, children: [title != null ? (0, jsx_runtime_1.jsx)("div", { className: "xfc-card__header", children: title }) : null, structured ? (0, jsx_runtime_1.jsx)("div", { className: "xfc-card__body", children: children }) : children, footer != null ? (0, jsx_runtime_1.jsx)("div", { className: "xfc-card__footer", children: footer }) : null] }));
 }

package/dist/components/atoms/InlineErrorList.d.ts

@@ -1,12 +1,17 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 export type InlineErrorEntry = {
     id: string;
     message: ReactNode;
+    icon?: ReactNode;
+    /** 행 클릭 시 (배너 액션 등) */
+    onClick?: () => void;
 };
 export type InlineErrorListProps = {
     errors: InlineErrorEntry[];
     onDismiss: (id: string) => void;
     className?: string;
-};
+    dismissAriaLabel?: string;
+    itemClassName?: string;
+} & Pick<HTMLAttributes<HTMLDivElement>, 'style'>;
 /** 상단 고정 에러 배너 목록 (business-promotion `ErrorList` UI, MobX 없음). */
-export declare function InlineErrorList({ errors, onDismiss, className }: InlineErrorListProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function InlineErrorList({ errors, onDismiss, className, dismissAriaLabel, itemClassName, style, }: InlineErrorListProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/atoms/InlineErrorList.js

@@ -3,9 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InlineErrorList = InlineErrorList;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /** 상단 고정 에러 배너 목록 (business-promotion `ErrorList` UI, MobX 없음). */
-function InlineErrorList({ errors, onDismiss, className = '' }) {
+function InlineErrorList({ errors, onDismiss, className = '', dismissAriaLabel = '닫기', itemClassName = '', style, }) {
     if (!errors.length)
         return null;
     const listCls = ['xfc-inline-error-list', className].filter(Boolean).join(' ');
-    return ((0, jsx_runtime_1.jsx)("div", { className: listCls, "aria-live": "assertive", role: "alert", children: errors.map((e) => ((0, jsx_runtime_1.jsxs)("div", { className: "xfc-inline-error-item", children: [(0, jsx_runtime_1.jsx)("span", { children: e.message }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "xfc-inline-error-dismiss", onClick: () => onDismiss(e.id), "aria-label": "\uB2EB\uAE30", children: "\u00D7" })] }, e.id))) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: listCls, style: style, "aria-live": "assertive", role: "alert", children: errors.map((e) => {
+            const itemCls = ['xfc-inline-error-item', itemClassName].filter(Boolean).join(' ');
+            return ((0, jsx_runtime_1.jsxs)("div", { className: itemCls, onClick: e.onClick, onKeyDown: e.onClick
+                    ? (ev) => {
+                        if (ev.key === 'Enter' || ev.key === ' ') {
+                            ev.preventDefault();
+                            e.onClick?.();
+                        }
+                    }
+                    : undefined, role: e.onClick ? 'button' : undefined, tabIndex: e.onClick ? 0 : undefined, children: [(0, jsx_runtime_1.jsxs)("div", { className: "xfc-inline-error-item__main", children: [e.icon ? (0, jsx_runtime_1.jsx)("span", { className: "xfc-inline-error-item__icon", children: e.icon }) : null, (0, jsx_runtime_1.jsx)("span", { children: e.message })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "xfc-inline-error-dismiss", onClick: (ev) => {
+                            ev.stopPropagation();
+                            onDismiss(e.id);
+                        }, "aria-label": dismissAriaLabel, children: "\u00D7" })] }, e.id));
+        }) }));
 }

package/dist/components/atoms/Input.d.ts

@@ -1,3 +1,21 @@
-import { type InputHTMLAttributes } from 'react';
-export type InputProps = InputHTMLAttributes<HTMLInputElement>;
-export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+import { type InputHTMLAttributes, type ReactNode } from 'react';
+export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
+    /** false 이면 disabled */
+    enabled?: boolean;
+    /** 검증 실패 등 시각·aria-invalid */
+    invalid?: boolean;
+    /** 입력 아래 도움말 (id 자동 연결) */
+    description?: ReactNode;
+    /** 루트 래퍼 class (description 포함 시 div 로 감쌈) */
+    wrapperClassName?: string;
+};
+export declare const Input: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+    /** false 이면 disabled */
+    enabled?: boolean;
+    /** 검증 실패 등 시각·aria-invalid */
+    invalid?: boolean;
+    /** 입력 아래 도움말 (id 자동 연결) */
+    description?: ReactNode;
+    /** 루트 래퍼 class (description 포함 시 div 로 감쌈) */
+    wrapperClassName?: string;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/atoms/Input.js

@@ -3,7 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-exports.Input = (0, react_1.forwardRef)(function Input({ className = '', ...rest }, ref) {
-    const cls = ['xfc-input', className].filter(Boolean).join(' ');
-    return (0, jsx_runtime_1.jsx)("input", { ref: ref, className: cls, ...rest });
+exports.Input = (0, react_1.forwardRef)(function Input({ className = '', enabled = true, invalid = false, description, wrapperClassName = '', disabled, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-invalid': ariaInvalidProp, ...rest }, ref) {
+    const genId = (0, react_1.useId)();
+    const inputId = idProp ?? genId;
+    const descId = `${inputId}-desc`;
+    const hasDesc = Boolean(description);
+    const cls = [
+        'xfc-input',
+        invalid ? 'xfc-input--invalid' : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const isDisabled = disabled === true || !enabled;
+    const ariaInvalid = ariaInvalidProp ?? invalid;
+    const ariaDescribedBy = [ariaDescribedByProp, hasDesc ? descId : null].filter(Boolean).join(' ') || undefined;
+    const inputEl = ((0, jsx_runtime_1.jsx)("input", { ref: ref, id: inputId, className: cls, disabled: isDisabled, "aria-invalid": ariaInvalid || undefined, "aria-describedby": ariaDescribedBy, ...rest }));
+    if (!hasDesc) {
+        return inputEl;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: wrapperClassName || undefined, children: [inputEl, (0, jsx_runtime_1.jsx)("p", { id: descId, className: "xfc-input-description", children: description })] }));
 });

package/dist/components/atoms/LoadingOverlay.d.ts

@@ -1,8 +1,18 @@
 import type { ReactNode } from 'react';
 export type LoadingOverlayProps = {
+    /** 표시 여부 */
     active: boolean;
+    /** false 이면 active 여도 렌더하지 않음 (상위에서 토글) */
+    enabled?: boolean;
+    /** 본문 메시지 */
     message?: ReactNode;
+    /** 메시지 위 짧은 제목·상태 텍스트 */
+    title?: ReactNode;
     className?: string;
+    /** 스피너 대신 커스텀. `null` 이면 스피너 숨김 */
+    spinner?: ReactNode | null;
+    /** 루트 `aria-label` (스크린리더용) */
+    ariaLabel?: string;
 };
 /** 전역 로딩 오버레이 (business-promotion `GlobalIndicator` UI, 상태는 부모에서 주입). */
-export declare function LoadingOverlay({ active, message, className }: LoadingOverlayProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function LoadingOverlay({ active, enabled, message, title, className, spinner, ariaLabel, }: LoadingOverlayProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/atoms/LoadingOverlay.js

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoadingOverlay = LoadingOverlay;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /** 전역 로딩 오버레이 (business-promotion `GlobalIndicator` UI, 상태는 부모에서 주입). */
-function LoadingOverlay({ active, message, className = '' }) {
-    if (!active)
+function LoadingOverlay({ active, enabled = true, message, title, className = '', spinner, ariaLabel = '로딩 중', }) {
+    if (!active || !enabled)
         return null;
     const root = ['xfc-loading-overlay', className].filter(Boolean).join(' ');
-    return ((0, jsx_runtime_1.jsxs)("div", { className: root, role: "status", "aria-live": "polite", "aria-busy": "true", children: [(0, jsx_runtime_1.jsx)("span", { className: "xfc-loading-overlay-spinner", "aria-hidden": true }), message ? (0, jsx_runtime_1.jsx)("p", { className: "xfc-loading-overlay-message", children: message }) : null] }));
+    const spinnerEl = spinner === null ? null : spinner !== undefined ? (spinner) : ((0, jsx_runtime_1.jsx)("span", { className: "xfc-loading-overlay-spinner", "aria-hidden": true }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: root, role: "status", "aria-live": "polite", "aria-busy": "true", "aria-label": ariaLabel, children: [spinnerEl, title ? (0, jsx_runtime_1.jsx)("p", { className: "xfc-loading-overlay-title", children: title }) : null, message ? (0, jsx_runtime_1.jsx)("p", { className: "xfc-loading-overlay-message", children: message }) : null] }));
 }

package/dist/components/atoms/Stack.d.ts

@@ -3,6 +3,10 @@ export type StackProps = HTMLAttributes<HTMLDivElement> & {
     direction?: 'row' | 'column';
     gap?: 'none' | 'sm' | 'md' | 'lg';
     align?: 'start' | 'center' | 'stretch';
+    /** 주축 정렬 (flex justify-content) */
+    justify?: 'start' | 'end' | 'center' | 'between' | 'around';
+    /** row 일 때 줄바꿈 (기본 true = 기존 .xfc-stack--row 와 동일) */
+    wrap?: boolean;
     children?: ReactNode;
 };
-export declare function Stack({ direction, gap, align, className, children, ...rest }: StackProps): import("react/jsx-runtime").JSX.Element;
+export declare function Stack({ direction, gap, align, justify, wrap, className, children, ...rest }: StackProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Stack.js

@@ -2,12 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Stack = Stack;
 const jsx_runtime_1 = require("react/jsx-runtime");
-function Stack({ direction = 'column', gap = 'md', align = 'start', className = '', children, ...rest }) {
+function Stack({ direction = 'column', gap = 'md', align = 'start', justify = 'start', wrap = true, className = '', children, ...rest }) {
     const cls = [
         'xfc-stack',
         direction === 'column' ? 'xfc-stack--column' : 'xfc-stack--row',
         `xfc-stack--gap-${gap}`,
         `xfc-stack--align-${align}`,
+        `xfc-stack--justify-${justify}`,
+        direction === 'row' && !wrap ? 'xfc-stack--nowrap' : '',
         className,
     ]
         .filter(Boolean)

package/dist/components/atoms/Text.d.ts

@@ -17,6 +17,8 @@ export type TextProps = {
     variant?: TextVariant;
     children?: ReactNode;
     className?: string;
+    /** 한 줄 말줄임 */
+    truncate?: boolean;
 } & HTMLAttributes<HTMLElement>;
-export declare function Text({ as, variant, className, children, ...rest }: TextProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare function Text({ as, variant, className, truncate, children, ...rest }: TextProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export {};

package/dist/components/atoms/Text.js

@@ -14,7 +14,9 @@ const variantClass = {
     labelBlock: 'xfc-text xfc-text--label-block',
     accent: 'xfc-text xfc-text--body xfc-text--accent',
 };
-function Text({ as = 'p', variant = 'body', className = '', children, ...rest }) {
-    const cls = [variantClass[variant], className].filter(Boolean).join(' ');
+function Text({ as = 'p', variant = 'body', className = '', truncate = false, children, ...rest }) {
+    const cls = [variantClass[variant], truncate ? 'xfc-text--truncate' : '', className]
+        .filter(Boolean)
+        .join(' ');
     return (0, react_1.createElement)(as, { className: cls, ...rest }, children);
 }

package/dist/components/atoms/Toast.d.ts

@@ -1,25 +1,34 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, SVGAttributes } from 'react';
 export type ToastSeverity = 'info' | 'success' | 'warn' | 'error';
-export declare function ToastSeverityIcon({ severity }: {
+export type ToastSeverityIconProps = {
     severity: ToastSeverity;
-}): import("react/jsx-runtime").JSX.Element;
+} & Pick<SVGAttributes<SVGSVGElement>, 'className' | 'style'>;
+export declare function ToastSeverityIcon({ severity, className, style }: ToastSeverityIconProps): import("react/jsx-runtime").JSX.Element;
 export type ToastProps = {
     severity: ToastSeverity;
     message: ReactNode;
     onDismiss?: () => void;
     className?: string;
+    /** 기본 심각도 아이콘 대체. `null` 이면 아이콘 칸 숨김 */
+    icon?: ReactNode | null;
+    dismissAriaLabel?: string;
+    /** false 이면 닫기 버튼 숨김 */
+    dismissible?: boolean;
 };
 /** 단일 토스트 행 (목록·커스텀 레이아웃용). */
-export declare function Toast({ severity, message, onDismiss, className }: ToastProps): import("react/jsx-runtime").JSX.Element;
+export declare function Toast({ severity, message, onDismiss, className, icon, dismissAriaLabel, dismissible, }: ToastProps): import("react/jsx-runtime").JSX.Element;
 export type ToastEntry = {
     id: string;
     severity: ToastSeverity;
     message: ReactNode;
+    icon?: ReactNode | null;
 };
 export type ToastListProps = {
     toasts: ToastEntry[];
     onDismiss: (id: string) => void;
     className?: string;
+    dismissAriaLabel?: string;
+    dismissible?: boolean;
 };
 /** 하단 고정 토스트 스택 (business-promotion `ToastList` UI, 상태는 부모에서 주입). */
-export declare function ToastList({ toasts, onDismiss, className }: ToastListProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ToastList({ toasts, onDismiss, className, dismissAriaLabel, dismissible, }: ToastListProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/atoms/Toast.js

@@ -12,31 +12,35 @@ const iconSvgProps = {
     xmlns: 'http://www.w3.org/2000/svg',
     'aria-hidden': true,
 };
-function ToastSeverityIcon({ severity }) {
+function ToastSeverityIcon({ severity, className, style }) {
+    const svgCls = className ? `${className}` : undefined;
+    const common = { ...iconSvgProps, className: svgCls, style };
     switch (severity) {
         case 'success':
-            return ((0, jsx_runtime_1.jsxs)("svg", { ...iconSvgProps, children: [(0, jsx_runtime_1.jsx)("path", { d: "M10 18.5a8.5 8.5 0 100-17 8.5 8.5 0 000 17z", stroke: "currentColor", strokeWidth: "1.33" }), (0, jsx_runtime_1.jsx)("path", { d: "M6.2 10.1l2.4 2.4 5.2-5.2", stroke: "currentColor", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+            return ((0, jsx_runtime_1.jsxs)("svg", { ...common, children: [(0, jsx_runtime_1.jsx)("path", { d: "M10 18.5a8.5 8.5 0 100-17 8.5 8.5 0 000 17z", stroke: "currentColor", strokeWidth: "1.33" }), (0, jsx_runtime_1.jsx)("path", { d: "M6.2 10.1l2.4 2.4 5.2-5.2", stroke: "currentColor", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" })] }));
         case 'error':
-            return ((0, jsx_runtime_1.jsxs)("svg", { ...iconSvgProps, children: [(0, jsx_runtime_1.jsx)("path", { d: "M10 18.5a8.5 8.5 0 100-17 8.5 8.5 0 000 17z", stroke: "currentColor", strokeWidth: "1.33" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 6.2v5.2M10 13.7v.1", stroke: "currentColor", strokeWidth: "1.33", strokeLinecap: "round" })] }));
+            return ((0, jsx_runtime_1.jsxs)("svg", { ...common, children: [(0, jsx_runtime_1.jsx)("path", { d: "M10 18.5a8.5 8.5 0 100-17 8.5 8.5 0 000 17z", stroke: "currentColor", strokeWidth: "1.33" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 6.2v5.2M10 13.7v.1", stroke: "currentColor", strokeWidth: "1.33", strokeLinecap: "round" })] }));
         case 'warn':
-            return ((0, jsx_runtime_1.jsxs)("svg", { ...iconSvgProps, children: [(0, jsx_runtime_1.jsx)("path", { d: "M10 3.2L17.3 16H2.7L10 3.2z", stroke: "currentColor", strokeWidth: "1.33", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 8v3.2M10 13.5v.1", stroke: "currentColor", strokeWidth: "1.33", strokeLinecap: "round" })] }));
+            return ((0, jsx_runtime_1.jsxs)("svg", { ...common, children: [(0, jsx_runtime_1.jsx)("path", { d: "M10 3.2L17.3 16H2.7L10 3.2z", stroke: "currentColor", strokeWidth: "1.33", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 8v3.2M10 13.5v.1", stroke: "currentColor", strokeWidth: "1.33", strokeLinecap: "round" })] }));
         case 'info':
         default:
-            return ((0, jsx_runtime_1.jsxs)("svg", { ...iconSvgProps, children: [(0, jsx_runtime_1.jsx)("path", { d: "M10 18.5a8.5 8.5 0 100-17 8.5 8.5 0 000 17z", stroke: "currentColor", strokeWidth: "1.33" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 8.8V14M10 5.8v.1", stroke: "currentColor", strokeWidth: "1.33", strokeLinecap: "round" })] }));
+            return ((0, jsx_runtime_1.jsxs)("svg", { ...common, children: [(0, jsx_runtime_1.jsx)("path", { d: "M10 18.5a8.5 8.5 0 100-17 8.5 8.5 0 000 17z", stroke: "currentColor", strokeWidth: "1.33" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 8.8V14M10 5.8v.1", stroke: "currentColor", strokeWidth: "1.33", strokeLinecap: "round" })] }));
     }
 }
 function ToastCloseIcon() {
     return ((0, jsx_runtime_1.jsx)("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: (0, jsx_runtime_1.jsx)("path", { d: "M5 5l10 10M15 5L5 15", stroke: "currentColor", strokeWidth: "1.33", strokeLinecap: "round" }) }));
 }
 /** 단일 토스트 행 (목록·커스텀 레이아웃용). */
-function Toast({ severity, message, onDismiss, className = '' }) {
+function Toast({ severity, message, onDismiss, className = '', icon, dismissAriaLabel = '닫기', dismissible = true, }) {
     const root = ['xfc-toast', `xfc-toast--${severity}`, className].filter(Boolean).join(' ');
-    return ((0, jsx_runtime_1.jsxs)("div", { className: root, role: "alert", children: [(0, jsx_runtime_1.jsx)("span", { className: "xfc-toast__icon", children: (0, jsx_runtime_1.jsx)(ToastSeverityIcon, { severity: severity }) }), (0, jsx_runtime_1.jsx)("div", { className: "xfc-toast__message", children: message }), onDismiss ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "xfc-toast-dismiss", onClick: onDismiss, "aria-label": "\uB2EB\uAE30", children: (0, jsx_runtime_1.jsx)(ToastCloseIcon, {}) })) : null] }));
+    const showDismiss = dismissible && onDismiss;
+    const iconContent = icon === null ? null : icon !== undefined ? (icon) : ((0, jsx_runtime_1.jsx)(ToastSeverityIcon, { severity: severity }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: root, role: "alert", children: [iconContent != null ? (0, jsx_runtime_1.jsx)("span", { className: "xfc-toast__icon", children: iconContent }) : null, (0, jsx_runtime_1.jsx)("div", { className: "xfc-toast__message", children: message }), showDismiss ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "xfc-toast-dismiss", onClick: onDismiss, "aria-label": dismissAriaLabel, children: (0, jsx_runtime_1.jsx)(ToastCloseIcon, {}) })) : null] }));
 }
 /** 하단 고정 토스트 스택 (business-promotion `ToastList` UI, 상태는 부모에서 주입). */
-function ToastList({ toasts, onDismiss, className = '' }) {
+function ToastList({ toasts, onDismiss, className = '', dismissAriaLabel, dismissible, }) {
     if (!toasts.length)
         return null;
     const listCls = ['xfc-toast-list', className].filter(Boolean).join(' ');
-    return ((0, jsx_runtime_1.jsx)("div", { className: listCls, "aria-live": "polite", children: toasts.map((t) => ((0, jsx_runtime_1.jsx)(Toast, { severity: t.severity, message: t.message, onDismiss: () => onDismiss(t.id) }, t.id))) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: listCls, "aria-live": "polite", children: toasts.map((t) => ((0, jsx_runtime_1.jsx)(Toast, { severity: t.severity, message: t.message, icon: t.icon, dismissAriaLabel: dismissAriaLabel, dismissible: dismissible, onDismiss: () => onDismiss(t.id) }, t.id))) }));
 }

package/dist/components/atoms/index.d.ts

@@ -10,5 +10,5 @@ export { Input, type InputProps } from './Input';
 export { InlineErrorList, type InlineErrorEntry, type InlineErrorListProps, } from './InlineErrorList';
 export { LoadingOverlay, type LoadingOverlayProps } from './LoadingOverlay';
 export { Stack, type StackProps } from './Stack';
-export { Toast, ToastList, ToastSeverityIcon, type ToastEntry, type ToastListProps, type ToastProps, type ToastSeverity, } from './Toast';
+export { Toast, ToastList, ToastSeverityIcon, type ToastEntry, type ToastListProps, type ToastProps, type ToastSeverity, type ToastSeverityIconProps, } from './Toast';
 export { Text, type TextProps, type TextVariant } from './Text';

package/dist/components/overlays/BottomSheet.d.ts

@@ -4,11 +4,15 @@ export type BottomSheetProps = {
     onOpenChange?: (open: boolean) => void;
     children?: ReactNode;
     title?: ReactNode;
+    subtitle?: ReactNode;
+    /** 헤더 오른쪽 (아이콘 버튼 등) */
+    headerExtra?: ReactNode;
     /** 상단 드래그 핸들 막대(시각용) */
     showHandle?: boolean;
     closeOnBackdropClick?: boolean;
     closeOnEscape?: boolean;
     backdropClassName?: string;
     panelClassName?: string;
+    bodyClassName?: string;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'>;
-export declare function BottomSheet({ open, onOpenChange, children, title, showHandle, closeOnBackdropClick, closeOnEscape, backdropClassName, panelClassName, className, onMouseDown: onPanelMouseDown, ...panelRest }: BottomSheetProps): import("react").ReactPortal | null;
+export declare function BottomSheet({ open, onOpenChange, children, title, subtitle, headerExtra, showHandle, closeOnBackdropClick, closeOnEscape, backdropClassName, panelClassName, bodyClassName, className, onMouseDown: onPanelMouseDown, ...panelRest }: BottomSheetProps): import("react").ReactPortal | null;

package/dist/components/overlays/BottomSheet.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const overlayHooks_1 = require("./overlayHooks");
-function BottomSheet({ open, onOpenChange, children, title, showHandle = true, closeOnBackdropClick = true, closeOnEscape = true, backdropClassName = '', panelClassName = '', className = '', onMouseDown: onPanelMouseDown, ...panelRest }) {
+function BottomSheet({ open, onOpenChange, children, title, subtitle, headerExtra, showHandle = true, closeOnBackdropClick = true, closeOnEscape = true, backdropClassName = '', panelClassName = '', bodyClassName = '', className = '', onMouseDown: onPanelMouseDown, ...panelRest }) {
     const titleId = (0, react_1.useId)();
     const panelRef = (0, react_1.useRef)(null);
     const prevFocusRef = (0, react_1.useRef)(null);
@@ -40,11 +40,19 @@ function BottomSheet({ open, onOpenChange, children, title, showHandle = true, c
     ]
         .filter(Boolean)
         .join(' ');
+    const bodyCls = ['xfc-bottom-sheet-panel__body', bodyClassName].filter(Boolean).join(' ');
+    const showHead = title != null || headerExtra != null;
+    const headOnlyExtra = title == null && headerExtra != null;
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: backdropCls, role: "presentation", onMouseDown: (e) => {
             if (e.target === e.currentTarget && closeOnBackdropClick)
                 requestClose();
-        }, children: (0, jsx_runtime_1.jsxs)("div", { ref: panelRef, ...panelRest, className: panelCls, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, tabIndex: -1, onMouseDown: (e) => {
+        }, children: (0, jsx_runtime_1.jsxs)("div", { ref: panelRef, ...panelRest, className: panelCls, role: "dialog", "aria-modal": "true", "aria-labelledby": title != null ? titleId : undefined, tabIndex: -1, onMouseDown: (e) => {
                 onPanelMouseDown?.(e);
                 e.stopPropagation();
-            }, children: [showHandle ? (0, jsx_runtime_1.jsx)("div", { className: "xfc-bottom-sheet-handle", "aria-hidden": true }) : null, title ? ((0, jsx_runtime_1.jsx)("div", { id: titleId, className: "xfc-bottom-sheet-panel__title", children: title })) : null, (0, jsx_runtime_1.jsx)("div", { className: "xfc-bottom-sheet-panel__body", children: children })] }) }), document.body);
+            }, children: [showHandle ? (0, jsx_runtime_1.jsx)("div", { className: "xfc-bottom-sheet-handle", "aria-hidden": true }) : null, showHead ? ((0, jsx_runtime_1.jsxs)("div", { className: [
+                        'xfc-bottom-sheet-panel__head',
+                        headOnlyExtra ? 'xfc-bottom-sheet-panel__head--only-extra' : '',
+                    ]
+                        .filter(Boolean)
+                        .join(' '), children: [title != null ? ((0, jsx_runtime_1.jsx)("div", { id: titleId, className: "xfc-bottom-sheet-panel__title", children: title })) : null, headerExtra ? ((0, jsx_runtime_1.jsx)("div", { className: "xfc-bottom-sheet-panel__head-extra", children: headerExtra })) : null] })) : null, subtitle != null ? (0, jsx_runtime_1.jsx)("div", { className: "xfc-bottom-sheet-panel__subtitle", children: subtitle }) : null, (0, jsx_runtime_1.jsx)("div", { className: bodyCls, children: children })] }) }), document.body);
 }

package/dist/components/overlays/ConfirmDialog.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { ButtonProps } from '../atoms/Button';
 export type ConfirmDialogProps = {
     open: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -13,5 +14,9 @@ export type ConfirmDialogProps = {
     confirmLoading?: boolean;
     closeOnBackdropClick?: boolean;
     panelClassName?: string;
+    /** 확인 버튼에 추가 props (icon, className, aria-* 등). `onClick` 은 확인 핸들러 뒤에 호출됩니다. */
+    confirmButtonProps?: Omit<ButtonProps, 'children' | 'variant' | 'type' | 'loading'>;
+    /** 취소 버튼에 추가 props. `onClick` 은 취소 핸들러 뒤에 호출됩니다. */
+    cancelButtonProps?: Omit<ButtonProps, 'children' | 'variant' | 'type'>;
 };
-export declare function ConfirmDialog({ open, onOpenChange, onConfirm, onCancel, title, message, confirmLabel, cancelLabel, destructive, confirmLoading, closeOnBackdropClick, panelClassName, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConfirmDialog({ open, onOpenChange, onConfirm, onCancel, title, message, confirmLabel, cancelLabel, destructive, confirmLoading, closeOnBackdropClick, panelClassName, confirmButtonProps, cancelButtonProps, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/overlays/ConfirmDialog.js

@@ -4,15 +4,21 @@ exports.ConfirmDialog = ConfirmDialog;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Button_1 = require("../atoms/Button");
 const Dialog_1 = require("./Dialog");
-function ConfirmDialog({ open, onOpenChange, onConfirm, onCancel, title, message, confirmLabel = '확인', cancelLabel = '취소', destructive = false, confirmLoading = false, closeOnBackdropClick = true, panelClassName = '', }) {
-    const handleCancel = () => {
+function ConfirmDialog({ open, onOpenChange, onConfirm, onCancel, title, message, confirmLabel = '확인', cancelLabel = '취소', destructive = false, confirmLoading = false, closeOnBackdropClick = true, panelClassName = '', confirmButtonProps, cancelButtonProps, }) {
+    const { className: confirmClassName, onClick: confirmOnClick, disabled: confirmDisabled, ...confirmRest } = confirmButtonProps ?? {};
+    const { className: cancelClassName, onClick: cancelOnClick, disabled: cancelDisabled, ...cancelRest } = cancelButtonProps ?? {};
+    const handleCancel = (e) => {
+        cancelOnClick?.(e);
         onCancel?.();
         onOpenChange?.(false);
     };
-    const handleConfirm = () => {
+    const handleConfirm = (e) => {
+        confirmOnClick?.(e);
         if (confirmLoading)
             return;
         onConfirm?.();
     };
-    return ((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { open: open, onOpenChange: onOpenChange, title: title, description: message, closeOnBackdropClick: closeOnBackdropClick, panelClassName: ['xfc-confirm-dialog', panelClassName].filter(Boolean).join(' '), children: (0, jsx_runtime_1.jsxs)("div", { className: "xfc-dialog-footer", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", variant: "muted", onClick: handleCancel, disabled: confirmLoading, children: cancelLabel }), (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", variant: "primary", className: destructive ? 'xfc-confirm-dialog__confirm--danger' : '', onClick: handleConfirm, disabled: confirmLoading, "aria-busy": confirmLoading, children: confirmLoading ? '…' : confirmLabel })] }) }));
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { open: open, onOpenChange: onOpenChange, title: title, description: message, closeOnBackdropClick: closeOnBackdropClick, panelClassName: ['xfc-confirm-dialog', panelClassName].filter(Boolean).join(' '), children: (0, jsx_runtime_1.jsxs)("div", { className: "xfc-dialog-footer", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", variant: "muted", ...cancelRest, disabled: confirmLoading || cancelDisabled, className: cancelClassName, onClick: handleCancel, children: cancelLabel }), (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", variant: "primary", ...confirmRest, className: [destructive ? 'xfc-confirm-dialog__confirm--danger' : '', confirmClassName ?? '']
+                        .filter(Boolean)
+                        .join(' '), onClick: handleConfirm, loading: confirmLoading, disabled: confirmDisabled, children: confirmLabel })] }) }));
 }

package/dist/components/overlays/Dialog.d.ts

@@ -5,11 +5,17 @@ export type DialogProps = {
     children?: ReactNode;
     /** 보이는 제목(패널 상단). 스크린 리더용 id 자동 연결 */
     title?: ReactNode;
+    /** 제목 앞 장식(아이콘 등) */
+    titleAdornment?: ReactNode;
+    /** 헤더 오른쪽 액션(닫기 버튼 등) */
+    headerExtra?: ReactNode;
     /** 부가 설명 */
     description?: ReactNode;
     closeOnBackdropClick?: boolean;
     closeOnEscape?: boolean;
     backdropClassName?: string;
     panelClassName?: string;
+    bodyClassName?: string;
+    descriptionClassName?: string;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'>;
-export declare function Dialog({ open, onOpenChange, children, title, description, closeOnBackdropClick, closeOnEscape, backdropClassName, panelClassName, className, onMouseDown: onPanelMouseDown, ...panelRest }: DialogProps): import("react").ReactPortal | null;
+export declare function Dialog({ open, onOpenChange, children, title, titleAdornment, headerExtra, description, closeOnBackdropClick, closeOnEscape, backdropClassName, panelClassName, bodyClassName, descriptionClassName, className, onMouseDown: onPanelMouseDown, ...panelRest }: DialogProps): import("react").ReactPortal | null;

package/dist/components/overlays/Dialog.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const overlayHooks_1 = require("./overlayHooks");
-function Dialog({ open, onOpenChange, children, title, description, closeOnBackdropClick = true, closeOnEscape = true, backdropClassName = '', panelClassName = '', className = '', onMouseDown: onPanelMouseDown, ...panelRest }) {
+function Dialog({ open, onOpenChange, children, title, titleAdornment, headerExtra, description, closeOnBackdropClick = true, closeOnEscape = true, backdropClassName = '', panelClassName = '', bodyClassName = '', descriptionClassName = '', className = '', onMouseDown: onPanelMouseDown, ...panelRest }) {
     const titleId = (0, react_1.useId)();
     const descriptionId = (0, react_1.useId)();
     const panelRef = (0, react_1.useRef)(null);
@@ -32,11 +32,14 @@ function Dialog({ open, onOpenChange, children, title, description, closeOnBackd
         return null;
     const backdropCls = ['xfc-dialog-backdrop', backdropClassName].filter(Boolean).join(' ');
     const panelCls = ['xfc-dialog-panel', panelClassName, className].filter(Boolean).join(' ');
+    const bodyCls = ['xfc-dialog-panel__body', bodyClassName].filter(Boolean).join(' ');
+    const descCls = ['xfc-dialog-panel__description', descriptionClassName].filter(Boolean).join(' ');
+    const showTitleRow = title != null || titleAdornment != null || headerExtra != null;
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: backdropCls, role: "presentation", onMouseDown: (e) => {
             if (e.target === e.currentTarget && closeOnBackdropClick)
                 requestClose();
-        }, children: (0, jsx_runtime_1.jsxs)("div", { ref: panelRef, ...panelRest, className: panelCls, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, "aria-describedby": description ? descriptionId : undefined, tabIndex: -1, onMouseDown: (e) => {
+        }, children: (0, jsx_runtime_1.jsxs)("div", { ref: panelRef, ...panelRest, className: panelCls, role: "dialog", "aria-modal": "true", "aria-labelledby": title != null ? titleId : undefined, "aria-describedby": description ? descriptionId : undefined, tabIndex: -1, onMouseDown: (e) => {
                 onPanelMouseDown?.(e);
                 e.stopPropagation();
-            }, children: [title ? ((0, jsx_runtime_1.jsx)("div", { id: titleId, className: "xfc-dialog-panel__title", children: title })) : null, description ? ((0, jsx_runtime_1.jsx)("div", { id: descriptionId, className: "xfc-dialog-panel__description", children: description })) : null, (0, jsx_runtime_1.jsx)("div", { className: "xfc-dialog-panel__body", children: children })] }) }), document.body);
+            }, children: [showTitleRow ? ((0, jsx_runtime_1.jsxs)("div", { className: "xfc-dialog-panel__title-row", children: [(0, jsx_runtime_1.jsxs)("div", { className: "xfc-dialog-panel__title-block", children: [titleAdornment ? ((0, jsx_runtime_1.jsx)("span", { className: "xfc-dialog-panel__title-adornment", children: titleAdornment })) : null, title != null ? ((0, jsx_runtime_1.jsx)("div", { id: titleId, className: "xfc-dialog-panel__title", children: title })) : null] }), headerExtra ? (0, jsx_runtime_1.jsx)("div", { className: "xfc-dialog-panel__title-extra", children: headerExtra }) : null] })) : null, description ? ((0, jsx_runtime_1.jsx)("div", { id: descriptionId, className: descCls, children: description })) : null, (0, jsx_runtime_1.jsx)("div", { className: bodyCls, children: children })] }) }), document.body);
 }

package/dist/index.d.ts

@@ -43,4 +43,4 @@ export declare const tokenVars: {
     readonly toastWarnBg: "--xfc-toast-warn-bg";
     readonly toastErrorBg: "--xfc-toast-error-bg";
 };
-export { Badge, BottomSheet, Box, Button, Card, ConfirmDialog, Dialog, InlineErrorList, Input, LoadingOverlay, Stack, Text, Toast, ToastList, ToastSeverityIcon, type BadgeProps, type BottomSheetProps, type BoxProps, type ButtonProps, type CardProps, type ConfirmDialogProps, type DialogProps, type InlineErrorEntry, type InlineErrorListProps, type InputProps, type LoadingOverlayProps, type StackProps, type TextProps, type TextVariant, type ToastEntry, type ToastListProps, type ToastProps, type ToastSeverity, } from './components';
+export { Badge, BottomSheet, Box, Button, Card, ConfirmDialog, Dialog, InlineErrorList, Input, LoadingOverlay, Stack, Text, Toast, ToastList, ToastSeverityIcon, type BadgeProps, type BottomSheetProps, type BoxProps, type ButtonProps, type CardProps, type ConfirmDialogProps, type DialogProps, type InlineErrorEntry, type InlineErrorListProps, type InputProps, type LoadingOverlayProps, type StackProps, type TextProps, type TextVariant, type ToastEntry, type ToastListProps, type ToastProps, type ToastSeverity, type ToastSeverityIconProps, } from './components';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xfilecom/front-core",
-  "version": "0.2.19",
+  "version": "0.2.21",
   "description": "Shared design tokens, base CSS, and atomic React components (browser-only; no Nest dependency)",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",