@xfilecom/front-core 0.2.2 → 0.2.5

package/dist/base.css

@@ -1,6 +1,13 @@
 /**
  * Global base + atomic classes for @xfilecom/front-core components.
- * Import after tokens.css.
+ *
+ * 권장 로드 순서 (xframe web/shared 와 함께 쓸 때):
+ *   1. @xfilecom/front-core/tokens.css
+ *   2. web/shared/src/styles/xfc-theme.css  — 앱별 :root --xfc-* 덮어쓰기(선택)
+ *   3. 이 파일 (base.css) — atoms(.xfc-*)
+ *   4. web/shared/src/styles/app.css       — 레이아웃 + atoms 클래스 오버라이드(선택)
+ *
+ * CSS 변수는 사용 시점에 계산되므로, (2)에서 바꾼 --xfc-* 는 (3)의 atoms 규칙에 반영됩니다.
  */
 
 *,
@@ -292,3 +299,220 @@ a:hover {
   background: color-mix(in srgb, var(--xfc-danger) 15%, transparent);
   color: var(--xfc-danger);
 }
+
+/* —— Global loading overlay (business-promotion global-indicator) —— */
+
+.xfc-loading-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--xfc-space-md);
+  padding: var(--xfc-space-lg);
+  box-sizing: border-box;
+  background: transparent;
+  pointer-events: auto;
+  animation: xfc-loading-overlay-enter 0.2s ease-out;
+}
+
+.xfc-loading-overlay-spinner {
+  width: 48px;
+  height: 48px;
+  border: 4px solid color-mix(in srgb, var(--xfc-accent) 22%, transparent);
+  border-top-color: var(--xfc-accent);
+  border-radius: 50%;
+  animation: xfc-loading-overlay-spin 0.68s linear infinite;
+  flex-shrink: 0;
+  box-shadow:
+    0 0 0 2px rgba(255, 255, 255, 0.95),
+    0 6px 24px rgba(0, 0, 0, 0.14);
+  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
+}
+
+.xfc-loading-overlay-message {
+  margin: 0;
+  max-width: min(280px, 100%);
+  font-size: var(--xfc-text-small);
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--xfc-fg);
+  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);
+}
+
+@keyframes xfc-loading-overlay-enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes xfc-loading-overlay-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xfc-loading-overlay {
+    animation: none;
+  }
+
+  .xfc-loading-overlay-spinner {
+    animation-duration: 1.4s;
+  }
+}
+
+/* —— Toasts (business-promotion toast-list) —— */
+
+.xfc-toast-list {
+  position: fixed;
+  bottom: var(--xfc-space-md);
+  right: var(--xfc-space-md);
+  z-index: 9998;
+  display: flex;
+  flex-direction: column;
+  gap: var(--xfc-space-sm);
+  max-width: 360px;
+}
+
+.xfc-toast {
+  display: inline-flex;
+  width: 100%;
+  box-sizing: border-box;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--xfc-space-lg);
+  padding: var(--xfc-space-lg);
+  border-radius: var(--xfc-toast-radius);
+  color: #fff;
+  font-family: var(--xfc-font-sans);
+  font-size: var(--xfc-text-body);
+  font-weight: 400;
+  line-height: 1.25;
+  box-shadow: var(--xfc-toast-shadow);
+  transition: opacity 0.2s ease;
+}
+
+.xfc-toast--info {
+  background: var(--xfc-toast-info-bg);
+}
+
+.xfc-toast--success {
+  background: var(--xfc-toast-success-bg);
+}
+
+.xfc-toast--warn {
+  background: var(--xfc-toast-warn-bg);
+}
+
+.xfc-toast--error {
+  background: var(--xfc-toast-error-bg);
+}
+
+.xfc-toast__icon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}
+
+.xfc-toast__icon svg {
+  display: block;
+}
+
+.xfc-toast__message {
+  flex: 1 1 0;
+  min-width: 0;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+
+.xfc-toast-dismiss {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: none;
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.85;
+}
+
+.xfc-toast-dismiss svg {
+  display: block;
+}
+
+.xfc-toast-dismiss:hover {
+  opacity: 1;
+}
+
+.xfc-toast-dismiss:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
+  border-radius: 2px;
+}
+
+/* —— Inline error banners (business-promotion error-list) —— */
+
+.xfc-inline-error-list {
+  position: fixed;
+  top: var(--xfc-space-md);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 9998;
+  display: flex;
+  flex-direction: column;
+  gap: var(--xfc-space-sm);
+  max-width: 400px;
+}
+
+.xfc-inline-error-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--xfc-space-sm);
+  padding: var(--xfc-space-md) var(--xfc-space-lg);
+  background: var(--xfc-danger);
+  color: var(--xfc-accent-fg);
+  border-radius: var(--xfc-radius-md);
+  font-size: var(--xfc-text-small);
+  box-shadow: var(--xfc-toast-shadow);
+}
+
+.xfc-inline-error-dismiss {
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  font-size: 1.25rem;
+  line-height: 1;
+  opacity: 0.8;
+  padding: 0 var(--xfc-space-xs);
+}
+
+.xfc-inline-error-dismiss:hover {
+  opacity: 1;
+}
+
+.xfc-inline-error-dismiss:focus-visible {
+  outline: none;
+  box-shadow: var(--xfc-focus-ring);
+  border-radius: var(--xfc-radius-xs);
+}

package/dist/components/InlineErrorList.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export type InlineErrorEntry = {
+    id: string;
+    message: ReactNode;
+};
+export type InlineErrorListProps = {
+    errors: InlineErrorEntry[];
+    onDismiss: (id: string) => void;
+    className?: string;
+};
+/** 상단 고정 에러 배너 목록 (business-promotion `ErrorList` UI, MobX 없음). */
+export declare function InlineErrorList({ errors, onDismiss, className }: InlineErrorListProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/InlineErrorList.js

@@ -0,0 +1,11 @@
+"use strict";
+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 = '' }) {
+    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))) }));
+}

package/dist/components/LoadingOverlay.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export type LoadingOverlayProps = {
+    active: boolean;
+    message?: ReactNode;
+    className?: string;
+};
+/** 전역 로딩 오버레이 (business-promotion `GlobalIndicator` UI, 상태는 부모에서 주입). */
+export declare function LoadingOverlay({ active, message, className }: LoadingOverlayProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/LoadingOverlay.js

@@ -0,0 +1,11 @@
+"use strict";
+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)
+        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] }));
+}

package/dist/components/Toast.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+export type ToastSeverity = 'info' | 'success' | 'warn' | 'error';
+export declare function ToastSeverityIcon({ severity }: {
+    severity: ToastSeverity;
+}): import("react/jsx-runtime").JSX.Element;
+export type ToastProps = {
+    severity: ToastSeverity;
+    message: ReactNode;
+    onDismiss?: () => void;
+    className?: string;
+};
+/** 단일 토스트 행 (목록·커스텀 레이아웃용). */
+export declare function Toast({ severity, message, onDismiss, className }: ToastProps): import("react/jsx-runtime").JSX.Element;
+export type ToastEntry = {
+    id: string;
+    severity: ToastSeverity;
+    message: ReactNode;
+};
+export type ToastListProps = {
+    toasts: ToastEntry[];
+    onDismiss: (id: string) => void;
+    className?: string;
+};
+/** 하단 고정 토스트 스택 (business-promotion `ToastList` UI, 상태는 부모에서 주입). */
+export declare function ToastList({ toasts, onDismiss, className }: ToastListProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Toast.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastSeverityIcon = ToastSeverityIcon;
+exports.Toast = Toast;
+exports.ToastList = ToastList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const iconSvgProps = {
+    width: 20,
+    height: 20,
+    viewBox: '0 0 20 20',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg',
+    'aria-hidden': true,
+};
+function ToastSeverityIcon({ severity }) {
+    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" })] }));
+        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" })] }));
+        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" })] }));
+        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" })] }));
+    }
+}
+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 = '' }) {
+    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] }));
+}
+/** 하단 고정 토스트 스택 (business-promotion `ToastList` UI, 상태는 부모에서 주입). */
+function ToastList({ toasts, onDismiss, className = '' }) {
+    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))) }));
+}

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

@@ -0,0 +1,6 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
+    tone?: 'neutral' | 'accent' | 'success' | 'danger';
+    children?: ReactNode;
+};
+export declare function Badge({ tone, className, children, ...rest }: BadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Badge.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = Badge;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function Badge({ tone = 'neutral', className = '', children, ...rest }) {
+    const cls = ['xfc-badge', `xfc-badge--${tone}`, className].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsx)("span", { className: cls, ...rest, children: children }));
+}

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

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

package/dist/components/atoms/Box.js

@@ -0,0 +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 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 }));
+}

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

@@ -0,0 +1,5 @@
+import type { ButtonHTMLAttributes } from 'react';
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: 'primary' | 'secondary' | 'outline' | 'muted' | 'ghost';
+};
+export declare function Button({ variant, className, type, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Button.js

@@ -0,0 +1,8 @@
+"use strict";
+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 });
+}

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

@@ -0,0 +1,5 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type CardProps = HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode;
+};
+export declare function Card({ className, children, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Card.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = Card;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function Card({ className = '', children, ...rest }) {
+    const cls = ['xfc-card', className].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsx)("div", { className: cls, ...rest, children: children }));
+}

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

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export type InlineErrorEntry = {
+    id: string;
+    message: ReactNode;
+};
+export type InlineErrorListProps = {
+    errors: InlineErrorEntry[];
+    onDismiss: (id: string) => void;
+    className?: string;
+};
+/** 상단 고정 에러 배너 목록 (business-promotion `ErrorList` UI, MobX 없음). */
+export declare function InlineErrorList({ errors, onDismiss, className }: InlineErrorListProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/atoms/InlineErrorList.js

@@ -0,0 +1,11 @@
+"use strict";
+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 = '' }) {
+    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))) }));
+}

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

@@ -0,0 +1,3 @@
+import { type InputHTMLAttributes } from 'react';
+export type InputProps = InputHTMLAttributes<HTMLInputElement>;
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/atoms/Input.js

@@ -0,0 +1,9 @@
+"use strict";
+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 });
+});

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

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export type LoadingOverlayProps = {
+    active: boolean;
+    message?: ReactNode;
+    className?: string;
+};
+/** 전역 로딩 오버레이 (business-promotion `GlobalIndicator` UI, 상태는 부모에서 주입). */
+export declare function LoadingOverlay({ active, message, className }: LoadingOverlayProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/atoms/LoadingOverlay.js

@@ -0,0 +1,11 @@
+"use strict";
+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)
+        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] }));
+}

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

@@ -0,0 +1,8 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type StackProps = HTMLAttributes<HTMLDivElement> & {
+    direction?: 'row' | 'column';
+    gap?: 'none' | 'sm' | 'md' | 'lg';
+    align?: 'start' | 'center' | 'stretch';
+    children?: ReactNode;
+};
+export declare function Stack({ direction, gap, align, className, children, ...rest }: StackProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Stack.js

@@ -0,0 +1,16 @@
+"use strict";
+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 }) {
+    const cls = [
+        'xfc-stack',
+        direction === 'column' ? 'xfc-stack--column' : 'xfc-stack--row',
+        `xfc-stack--gap-${gap}`,
+        `xfc-stack--align-${align}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return ((0, jsx_runtime_1.jsx)("div", { className: cls, ...rest, children: children }));
+}

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

@@ -0,0 +1,22 @@
+import { type ElementType, type HTMLAttributes, type ReactNode } from 'react';
+declare const variantClass: {
+    readonly title: "xfc-text xfc-text--title";
+    readonly appbar: "xfc-text xfc-text--appbar";
+    readonly section: "xfc-text xfc-text--section";
+    readonly subtitle: "xfc-text xfc-text--subtitle";
+    readonly body: "xfc-text xfc-text--body";
+    readonly muted: "xfc-text xfc-text--body xfc-text--muted";
+    readonly small: "xfc-text xfc-text--small";
+    readonly label: "xfc-text xfc-text--small xfc-text--muted";
+    readonly labelBlock: "xfc-text xfc-text--label-block";
+    readonly accent: "xfc-text xfc-text--body xfc-text--accent";
+};
+export type TextVariant = keyof typeof variantClass;
+export type TextProps = {
+    as?: ElementType;
+    variant?: TextVariant;
+    children?: ReactNode;
+    className?: string;
+} & HTMLAttributes<HTMLElement>;
+export declare function Text({ as, variant, className, children, ...rest }: TextProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export {};

package/dist/components/atoms/Text.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = Text;
+const react_1 = require("react");
+const variantClass = {
+    title: 'xfc-text xfc-text--title',
+    appbar: 'xfc-text xfc-text--appbar',
+    section: 'xfc-text xfc-text--section',
+    subtitle: 'xfc-text xfc-text--subtitle',
+    body: 'xfc-text xfc-text--body',
+    muted: 'xfc-text xfc-text--body xfc-text--muted',
+    small: 'xfc-text xfc-text--small',
+    label: 'xfc-text xfc-text--small xfc-text--muted',
+    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(' ');
+    return (0, react_1.createElement)(as, { className: cls, ...rest }, children);
+}

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

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+export type ToastSeverity = 'info' | 'success' | 'warn' | 'error';
+export declare function ToastSeverityIcon({ severity }: {
+    severity: ToastSeverity;
+}): import("react/jsx-runtime").JSX.Element;
+export type ToastProps = {
+    severity: ToastSeverity;
+    message: ReactNode;
+    onDismiss?: () => void;
+    className?: string;
+};
+/** 단일 토스트 행 (목록·커스텀 레이아웃용). */
+export declare function Toast({ severity, message, onDismiss, className }: ToastProps): import("react/jsx-runtime").JSX.Element;
+export type ToastEntry = {
+    id: string;
+    severity: ToastSeverity;
+    message: ReactNode;
+};
+export type ToastListProps = {
+    toasts: ToastEntry[];
+    onDismiss: (id: string) => void;
+    className?: string;
+};
+/** 하단 고정 토스트 스택 (business-promotion `ToastList` UI, 상태는 부모에서 주입). */
+export declare function ToastList({ toasts, onDismiss, className }: ToastListProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/atoms/Toast.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastSeverityIcon = ToastSeverityIcon;
+exports.Toast = Toast;
+exports.ToastList = ToastList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const iconSvgProps = {
+    width: 20,
+    height: 20,
+    viewBox: '0 0 20 20',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg',
+    'aria-hidden': true,
+};
+function ToastSeverityIcon({ severity }) {
+    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" })] }));
+        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" })] }));
+        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" })] }));
+        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" })] }));
+    }
+}
+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 = '' }) {
+    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] }));
+}
+/** 하단 고정 토스트 스택 (business-promotion `ToastList` UI, 상태는 부모에서 주입). */
+function ToastList({ toasts, onDismiss, className = '' }) {
+    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))) }));
+}

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

@@ -0,0 +1,14 @@
+/**
+ * Atomic UI — design tokens + base.css 의 `.xfc-*` 와 1:1.
+ * 패키지 루트는 `components/index.ts` → 여기서 동일 심볼을 재export.
+ */
+export { Badge, type BadgeProps } from './Badge';
+export { Box, type BoxProps } from './Box';
+export { Button, type ButtonProps } from './Button';
+export { Card, type CardProps } from './Card';
+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 { Text, type TextProps, type TextVariant } from './Text';

package/dist/components/atoms/index.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = exports.ToastSeverityIcon = exports.ToastList = exports.Toast = exports.Stack = exports.LoadingOverlay = exports.InlineErrorList = exports.Input = exports.Card = exports.Button = exports.Box = exports.Badge = void 0;
+/**
+ * Atomic UI — design tokens + base.css 의 `.xfc-*` 와 1:1.
+ * 패키지 루트는 `components/index.ts` → 여기서 동일 심볼을 재export.
+ */
+var Badge_1 = require("./Badge");
+Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return Badge_1.Badge; } });
+var Box_1 = require("./Box");
+Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return Box_1.Box; } });
+var Button_1 = require("./Button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
+var Card_1 = require("./Card");
+Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.Card; } });
+var Input_1 = require("./Input");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });
+var InlineErrorList_1 = require("./InlineErrorList");
+Object.defineProperty(exports, "InlineErrorList", { enumerable: true, get: function () { return InlineErrorList_1.InlineErrorList; } });
+var LoadingOverlay_1 = require("./LoadingOverlay");
+Object.defineProperty(exports, "LoadingOverlay", { enumerable: true, get: function () { return LoadingOverlay_1.LoadingOverlay; } });
+var Stack_1 = require("./Stack");
+Object.defineProperty(exports, "Stack", { enumerable: true, get: function () { return Stack_1.Stack; } });
+var Toast_1 = require("./Toast");
+Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return Toast_1.Toast; } });
+Object.defineProperty(exports, "ToastList", { enumerable: true, get: function () { return Toast_1.ToastList; } });
+Object.defineProperty(exports, "ToastSeverityIcon", { enumerable: true, get: function () { return Toast_1.ToastSeverityIcon; } });
+var Text_1 = require("./Text");
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });

package/dist/components/index.d.ts

@@ -1,7 +1 @@
-export { Badge, type BadgeProps } from './Badge';
-export { Box, type BoxProps } from './Box';
-export { Button, type ButtonProps } from './Button';
-export { Card, type CardProps } from './Card';
-export { Input, type InputProps } from './Input';
-export { Stack, type StackProps } from './Stack';
-export { Text, type TextProps, type TextVariant } from './Text';
+export * from './atoms';

package/dist/components/index.js

@@ -1,17 +1,17 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Text = exports.Stack = exports.Input = exports.Card = exports.Button = exports.Box = exports.Badge = void 0;
-var Badge_1 = require("./Badge");
-Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return Badge_1.Badge; } });
-var Box_1 = require("./Box");
-Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return Box_1.Box; } });
-var Button_1 = require("./Button");
-Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
-var Card_1 = require("./Card");
-Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.Card; } });
-var Input_1 = require("./Input");
-Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });
-var Stack_1 = require("./Stack");
-Object.defineProperty(exports, "Stack", { enumerable: true, get: function () { return Stack_1.Stack; } });
-var Text_1 = require("./Text");
-Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
+__exportStar(require("./atoms"), exports);

package/dist/index.d.ts

@@ -1,11 +1,15 @@
 /**
  * @xfilecom/front-core — design tokens + atomic React components (browser-only).
  *
- * CSS (앱 엔트리에서 순서대로):
+ * CSS (xframe 템플릿·web/shared 권장 순서):
  *   import '@xfilecom/front-core/tokens.css';
+ *   import '<shared>/styles/xfc-theme.css';   // 앱 토큰 덮어쓰기(선택)
  *   import '@xfilecom/front-core/base.css';
+ *   import '<shared>/styles/app.css';         // 레이아웃 + .xfc-* 오버라이드
+ *
+ * React atoms: 패키지 루트 또는 `@xfilecom/front-core/atoms`.
  */
-export declare const XFRAME_FRONT_CORE_VERSION = "0.2.1";
+export declare const XFRAME_FRONT_CORE_VERSION = "0.2.4";
 /** CSS 커스텀 프로퍼티 이름 (-- 제외 시 var()와 함께 사용) */
 export declare const tokenVars: {
     readonly colorBg: "--xfc-bg";
@@ -34,5 +38,9 @@ export declare const tokenVars: {
     readonly textSection: "--xfc-text-section";
     readonly textBody: "--xfc-text-body";
     readonly textSmall: "--xfc-text-small";
+    readonly toastInfoBg: "--xfc-toast-info-bg";
+    readonly toastSuccessBg: "--xfc-toast-success-bg";
+    readonly toastWarnBg: "--xfc-toast-warn-bg";
+    readonly toastErrorBg: "--xfc-toast-error-bg";
 };
-export { Badge, Box, Button, Card, Input, Stack, Text, type BadgeProps, type BoxProps, type ButtonProps, type CardProps, type InputProps, type StackProps, type TextProps, type TextVariant, } from './components';
+export { Badge, Box, Button, Card, InlineErrorList, Input, LoadingOverlay, Stack, Text, Toast, ToastList, ToastSeverityIcon, type BadgeProps, type BoxProps, type ButtonProps, type CardProps, type InlineErrorEntry, type InlineErrorListProps, type InputProps, type LoadingOverlayProps, type StackProps, type TextProps, type TextVariant, type ToastEntry, type ToastListProps, type ToastProps, type ToastSeverity, } from './components';

package/dist/index.js

@@ -1,14 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Text = exports.Stack = exports.Input = exports.Card = exports.Button = exports.Box = exports.Badge = exports.tokenVars = exports.XFRAME_FRONT_CORE_VERSION = void 0;
+exports.ToastSeverityIcon = exports.ToastList = exports.Toast = exports.Text = exports.Stack = exports.LoadingOverlay = exports.Input = exports.InlineErrorList = exports.Card = exports.Button = exports.Box = exports.Badge = exports.tokenVars = exports.XFRAME_FRONT_CORE_VERSION = void 0;
 /**
  * @xfilecom/front-core — design tokens + atomic React components (browser-only).
  *
- * CSS (앱 엔트리에서 순서대로):
+ * CSS (xframe 템플릿·web/shared 권장 순서):
  *   import '@xfilecom/front-core/tokens.css';
+ *   import '<shared>/styles/xfc-theme.css';   // 앱 토큰 덮어쓰기(선택)
  *   import '@xfilecom/front-core/base.css';
+ *   import '<shared>/styles/app.css';         // 레이아웃 + .xfc-* 오버라이드
+ *
+ * React atoms: 패키지 루트 또는 `@xfilecom/front-core/atoms`.
  */
-exports.XFRAME_FRONT_CORE_VERSION = '0.2.1';
+exports.XFRAME_FRONT_CORE_VERSION = '0.2.4';
 /** CSS 커스텀 프로퍼티 이름 (-- 제외 시 var()와 함께 사용) */
 exports.tokenVars = {
     colorBg: '--xfc-bg',
@@ -37,12 +41,21 @@ exports.tokenVars = {
     textSection: '--xfc-text-section',
     textBody: '--xfc-text-body',
     textSmall: '--xfc-text-small',
+    toastInfoBg: '--xfc-toast-info-bg',
+    toastSuccessBg: '--xfc-toast-success-bg',
+    toastWarnBg: '--xfc-toast-warn-bg',
+    toastErrorBg: '--xfc-toast-error-bg',
 };
 var components_1 = require("./components");
 Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return components_1.Badge; } });
 Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return components_1.Box; } });
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return components_1.Button; } });
 Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return components_1.Card; } });
+Object.defineProperty(exports, "InlineErrorList", { enumerable: true, get: function () { return components_1.InlineErrorList; } });
 Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return components_1.Input; } });
+Object.defineProperty(exports, "LoadingOverlay", { enumerable: true, get: function () { return components_1.LoadingOverlay; } });
 Object.defineProperty(exports, "Stack", { enumerable: true, get: function () { return components_1.Stack; } });
 Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return components_1.Text; } });
+Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return components_1.Toast; } });
+Object.defineProperty(exports, "ToastList", { enumerable: true, get: function () { return components_1.ToastList; } });
+Object.defineProperty(exports, "ToastSeverityIcon", { enumerable: true, get: function () { return components_1.ToastSeverityIcon; } });

package/dist/tokens.css

@@ -34,6 +34,14 @@
   --xfc-warning: #d97706;
   --xfc-warning-bg: #fef3c7;
 
+  /* Toasts (business-promotion client index.css 와 동일 톤) */
+  --xfc-toast-info-bg: #1c252f;
+  --xfc-toast-success-bg: #19af66;
+  --xfc-toast-warn-bg: #e8a317;
+  --xfc-toast-error-bg: #f43b3c;
+  --xfc-toast-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  --xfc-toast-radius: 6px;
+
   /* Effects */
   --xfc-input-shadow: 0 7px 64px rgba(0, 0, 0, 0.07);
   --xfc-card-shadow: 0 1px 2px rgba(28, 37, 47, 0.06);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xfilecom/front-core",
-  "version": "0.2.2",
+  "version": "0.2.5",
   "description": "Shared design tokens, base CSS, and atomic React components (browser-only; no Nest dependency)",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -10,7 +10,11 @@
       "default": "./dist/index.js"
     },
     "./tokens.css": "./dist/tokens.css",
-    "./base.css": "./dist/base.css"
+    "./base.css": "./dist/base.css",
+    "./atoms": {
+      "types": "./dist/components/atoms/index.d.ts",
+      "default": "./dist/components/atoms/index.js"
+    }
   },
   "files": [
     "dist"