@xfilecom/front-core 0.1.0 → 0.2.5

package/dist/components/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/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

@@ -0,0 +1 @@
+export * from './atoms';

package/dist/components/index.js

@@ -0,0 +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 });
+__exportStar(require("./atoms"), exports);

package/dist/index.d.ts

@@ -1,12 +1,46 @@
 /**
- * @xfilecom/front-core — design tokens (components expand later).
- * CSS: import '@xfilecom/front-core/tokens.css' in Vite/React entry.
+ * @xfilecom/front-core — design tokens + atomic React components (browser-only).
+ *
+ * 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.1.0";
+export declare const XFRAME_FRONT_CORE_VERSION = "0.2.4";
+/** CSS 커스텀 프로퍼티 이름 (-- 제외 시 var()와 함께 사용) */
 export declare const tokenVars: {
     readonly colorBg: "--xfc-bg";
+    readonly colorBgElevated: "--xfc-bg-elevated";
+    readonly colorBgMuted: "--xfc-bg-muted";
     readonly colorFg: "--xfc-fg";
+    readonly colorFgMuted: "--xfc-fg-muted";
+    readonly colorBorder: "--xfc-border";
+    readonly colorBorderStrong: "--xfc-border-strong";
     readonly colorAccent: "--xfc-accent";
+    readonly colorAccentHover: "--xfc-accent-hover";
+    readonly colorDanger: "--xfc-danger";
+    readonly radiusXs: "--xfc-radius-xs";
     readonly radiusSm: "--xfc-radius-sm";
+    readonly radiusMd: "--xfc-radius-md";
+    readonly radiusLg: "--xfc-radius-lg";
+    readonly spaceXs: "--xfc-space-xs";
+    readonly spaceSm: "--xfc-space-sm";
     readonly spaceMd: "--xfc-space-md";
+    readonly spaceLg: "--xfc-space-lg";
+    readonly spaceXl: "--xfc-space-xl";
+    readonly space2xl: "--xfc-space-2xl";
+    readonly fontSans: "--xfc-font-sans";
+    readonly textDisplay: "--xfc-text-display";
+    readonly textAppbar: "--xfc-text-appbar";
+    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, 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,15 +1,61 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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 (components expand later).
- * CSS: import '@xfilecom/front-core/tokens.css' in Vite/React entry.
+ * @xfilecom/front-core — design tokens + atomic React components (browser-only).
+ *
+ * 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.1.0';
+exports.XFRAME_FRONT_CORE_VERSION = '0.2.4';
+/** CSS 커스텀 프로퍼티 이름 (-- 제외 시 var()와 함께 사용) */
 exports.tokenVars = {
     colorBg: '--xfc-bg',
+    colorBgElevated: '--xfc-bg-elevated',
+    colorBgMuted: '--xfc-bg-muted',
     colorFg: '--xfc-fg',
+    colorFgMuted: '--xfc-fg-muted',
+    colorBorder: '--xfc-border',
+    colorBorderStrong: '--xfc-border-strong',
     colorAccent: '--xfc-accent',
+    colorAccentHover: '--xfc-accent-hover',
+    colorDanger: '--xfc-danger',
+    radiusXs: '--xfc-radius-xs',
     radiusSm: '--xfc-radius-sm',
+    radiusMd: '--xfc-radius-md',
+    radiusLg: '--xfc-radius-lg',
+    spaceXs: '--xfc-space-xs',
+    spaceSm: '--xfc-space-sm',
     spaceMd: '--xfc-space-md',
+    spaceLg: '--xfc-space-lg',
+    spaceXl: '--xfc-space-xl',
+    space2xl: '--xfc-space-2xl',
+    fontSans: '--xfc-font-sans',
+    textDisplay: '--xfc-text-display',
+    textAppbar: '--xfc-text-appbar',
+    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; } });