@xfilecom/front-core 0.2.29 → 0.2.31

package/README.md

@@ -37,6 +37,15 @@ import {
 
 서브패스: `@xfilecom/front-core/atoms`, `@xfilecom/front-core/overlays`.
 
+## Showcase (라이브 갤러리)
+
+`tokens.css`·`base.css`(·앱 테마) 다음에 스타일을 한 줄 더 넣고, 컴포넌트를 import 합니다.
+
+```tsx
+import '@xfilecom/front-core/showcase.css';
+import { DesignSystemShowcase } from '@xfilecom/front-core/showcase';
+```
+
 ## Paper (표면)
 
 MUI `Paper` / RN `Surface`에 대응하는 얇은 래퍼:

package/dist/generatedVersion.d.ts

@@ -1,2 +1,2 @@
 /** Auto-generated by scripts/write-version.js — do not edit by hand */
-export declare const XFRAME_FRONT_CORE_VERSION: "0.2.29";
+export declare const XFRAME_FRONT_CORE_VERSION: "0.2.31";

package/dist/generatedVersion.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XFRAME_FRONT_CORE_VERSION = void 0;
 /** Auto-generated by scripts/write-version.js — do not edit by hand */
-exports.XFRAME_FRONT_CORE_VERSION = "0.2.29";
+exports.XFRAME_FRONT_CORE_VERSION = "0.2.31";

package/dist/showcase/DesignSystemShowcase.d.ts

@@ -0,0 +1,2 @@
+/** front-core 문서형 갤러리 — 사이드 네비 + 섹션 + 라이브 데모 */
+export declare function DesignSystemShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/showcase/DesignSystemShowcase.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesignSystemShowcase = DesignSystemShowcase;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ShowcaseChrome_1 = require("./components/ShowcaseChrome");
+const ShowcaseContext_1 = require("./ShowcaseContext");
+const nav_1 = require("./nav");
+const ActionsSection_1 = require("./sections/ActionsSection");
+const FeedbackSection_1 = require("./sections/FeedbackSection");
+const FormsSection_1 = require("./sections/FormsSection");
+const LayoutSection_1 = require("./sections/LayoutSection");
+const OverlaysSection_1 = require("./sections/OverlaysSection");
+const OverviewSection_1 = require("./sections/OverviewSection");
+const SurfacesSection_1 = require("./sections/SurfacesSection");
+const TypographySection_1 = require("./sections/TypographySection");
+/** front-core 문서형 갤러리 — 사이드 네비 + 섹션 + 라이브 데모 */
+function DesignSystemShowcase() {
+    return ((0, jsx_runtime_1.jsxs)(ShowcaseContext_1.ShowcaseProvider, { children: [(0, jsx_runtime_1.jsx)(ShowcaseChrome_1.ShowcaseChrome, {}), (0, jsx_runtime_1.jsxs)("div", { className: "xfc-ds", children: [(0, jsx_runtime_1.jsxs)("nav", { className: "xfc-ds-nav", "aria-label": "\uB514\uC790\uC778 \uC2DC\uC2A4\uD15C \uC139\uC158", children: [(0, jsx_runtime_1.jsx)("p", { className: "xfc-ds-nav-title", children: "\uC139\uC158" }), (0, jsx_runtime_1.jsx)("ul", { className: "xfc-ds-nav-list", children: nav_1.SHOWCASE_NAV.map((item) => ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("a", { className: "xfc-ds-nav-link", href: `#${item.id}`, children: item.label }) }, item.id))) })] }), (0, jsx_runtime_1.jsxs)("main", { className: "xfc-ds-main", children: [(0, jsx_runtime_1.jsx)(OverviewSection_1.OverviewSection, {}), (0, jsx_runtime_1.jsx)(SurfacesSection_1.SurfacesSection, {}), (0, jsx_runtime_1.jsx)(TypographySection_1.TypographySection, {}), (0, jsx_runtime_1.jsx)(ActionsSection_1.ActionsSection, {}), (0, jsx_runtime_1.jsx)(FormsSection_1.FormsSection, {}), (0, jsx_runtime_1.jsx)(LayoutSection_1.LayoutSection, {}), (0, jsx_runtime_1.jsx)(FeedbackSection_1.FeedbackSection, {}), (0, jsx_runtime_1.jsx)(OverlaysSection_1.OverlaysSection, {})] })] })] }));
+}

package/dist/showcase/ShowcaseContext.d.ts

@@ -0,0 +1,48 @@
+import { type ReactNode } from 'react';
+import type { InlineErrorEntry } from '../components/atoms/InlineErrorList';
+import { type ToastEntry, type ToastSeverity } from '../components/atoms/Toast';
+export type ShowcaseContextValue = {
+    uid: string;
+    toasts: ToastEntry[];
+    errors: InlineErrorEntry[];
+    loading: boolean;
+    badgeClicks: number;
+    interactiveCardClicks: number;
+    btnLoading: boolean;
+    dialogOpen: boolean;
+    dialogRichOpen: boolean;
+    confirmOpen: boolean;
+    confirmDestructiveOpen: boolean;
+    confirmLoadingDemo: boolean;
+    confirmCustomOpen: boolean;
+    sheetOpen: boolean;
+    sheetRichOpen: boolean;
+    fieldBio: string;
+    fieldPlan: string;
+    fieldAgree: boolean;
+    setToasts: React.Dispatch<React.SetStateAction<ToastEntry[]>>;
+    setErrors: React.Dispatch<React.SetStateAction<InlineErrorEntry[]>>;
+    setLoading: React.Dispatch<React.SetStateAction<boolean>>;
+    setBadgeClicks: React.Dispatch<React.SetStateAction<number>>;
+    setInteractiveCardClicks: React.Dispatch<React.SetStateAction<number>>;
+    setBtnLoading: React.Dispatch<React.SetStateAction<boolean>>;
+    setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    setDialogRichOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    setConfirmOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    setConfirmDestructiveOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    setConfirmLoadingDemo: React.Dispatch<React.SetStateAction<boolean>>;
+    setConfirmCustomOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    setSheetOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    setSheetRichOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    setFieldBio: React.Dispatch<React.SetStateAction<string>>;
+    setFieldPlan: React.Dispatch<React.SetStateAction<string>>;
+    setFieldAgree: React.Dispatch<React.SetStateAction<boolean>>;
+    pushToast: (severity: ToastSeverity) => void;
+    pushToastCustomIcon: () => void;
+    addError: () => void;
+    addErrorRich: () => void;
+};
+export declare function ShowcaseProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useShowcase(): ShowcaseContextValue;

package/dist/showcase/ShowcaseContext.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShowcaseProvider = ShowcaseProvider;
+exports.useShowcase = useShowcase;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Toast_1 = require("../components/atoms/Toast");
+const icons_1 = require("./components/icons");
+const ShowcaseContext = (0, react_1.createContext)(null);
+function ShowcaseProvider({ children }) {
+    const uid = (0, react_1.useId)();
+    const toastSeq = (0, react_1.useRef)(0);
+    const errorSeq = (0, react_1.useRef)(0);
+    const [toasts, setToasts] = (0, react_1.useState)([]);
+    const [errors, setErrors] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [badgeClicks, setBadgeClicks] = (0, react_1.useState)(0);
+    const [interactiveCardClicks, setInteractiveCardClicks] = (0, react_1.useState)(0);
+    const [btnLoading, setBtnLoading] = (0, react_1.useState)(false);
+    const [dialogOpen, setDialogOpen] = (0, react_1.useState)(false);
+    const [dialogRichOpen, setDialogRichOpen] = (0, react_1.useState)(false);
+    const [confirmOpen, setConfirmOpen] = (0, react_1.useState)(false);
+    const [confirmDestructiveOpen, setConfirmDestructiveOpen] = (0, react_1.useState)(false);
+    const [confirmLoadingDemo, setConfirmLoadingDemo] = (0, react_1.useState)(false);
+    const [confirmCustomOpen, setConfirmCustomOpen] = (0, react_1.useState)(false);
+    const [sheetOpen, setSheetOpen] = (0, react_1.useState)(false);
+    const [sheetRichOpen, setSheetRichOpen] = (0, react_1.useState)(false);
+    const [fieldBio, setFieldBio] = (0, react_1.useState)('');
+    const [fieldPlan, setFieldPlan] = (0, react_1.useState)('a');
+    const [fieldAgree, setFieldAgree] = (0, react_1.useState)(false);
+    const pushToast = (0, react_1.useCallback)((severity) => {
+        toastSeq.current += 1;
+        const id = `${uid}-t-${toastSeq.current}`;
+        setToasts((prev) => [...prev, { id, severity, message: `${severity} 메시지 예시` }]);
+    }, [uid]);
+    const pushToastCustomIcon = (0, react_1.useCallback)(() => {
+        toastSeq.current += 1;
+        const id = `${uid}-t-${toastSeq.current}`;
+        setToasts((prev) => [
+            ...prev,
+            {
+                id,
+                severity: 'success',
+                message: 'ToastEntry.icon 으로 별 아이콘',
+                icon: (0, jsx_runtime_1.jsx)(icons_1.StarIcon, {}),
+            },
+        ]);
+    }, [uid]);
+    const addError = (0, react_1.useCallback)(() => {
+        errorSeq.current += 1;
+        const id = `${uid}-e-${errorSeq.current}`;
+        setErrors((prev) => [...prev, { id, message: `샘플 에러 #${errorSeq.current}` }]);
+    }, [uid]);
+    const addErrorRich = (0, react_1.useCallback)(() => {
+        errorSeq.current += 1;
+        const id = `${uid}-e-${errorSeq.current}`;
+        setErrors((prev) => [
+            ...prev,
+            {
+                id,
+                message: '아이콘 + 행 클릭(콘솔)',
+                icon: (0, jsx_runtime_1.jsx)(Toast_1.ToastSeverityIcon, { severity: "error" }),
+                onClick: () => {
+                    console.info('[showcase] inline error row click', id);
+                },
+            },
+        ]);
+    }, [uid]);
+    const value = {
+        uid,
+        toasts,
+        errors,
+        loading,
+        badgeClicks,
+        interactiveCardClicks,
+        btnLoading,
+        dialogOpen,
+        dialogRichOpen,
+        confirmOpen,
+        confirmDestructiveOpen,
+        confirmLoadingDemo,
+        confirmCustomOpen,
+        sheetOpen,
+        sheetRichOpen,
+        fieldBio,
+        fieldPlan,
+        fieldAgree,
+        setToasts,
+        setErrors,
+        setLoading,
+        setBadgeClicks,
+        setInteractiveCardClicks,
+        setBtnLoading,
+        setDialogOpen,
+        setDialogRichOpen,
+        setConfirmOpen,
+        setConfirmDestructiveOpen,
+        setConfirmLoadingDemo,
+        setConfirmCustomOpen,
+        setSheetOpen,
+        setSheetRichOpen,
+        setFieldBio,
+        setFieldPlan,
+        setFieldAgree,
+        pushToast,
+        pushToastCustomIcon,
+        addError,
+        addErrorRich,
+    };
+    return (0, jsx_runtime_1.jsx)(ShowcaseContext.Provider, { value: value, children: children });
+}
+function useShowcase() {
+    const v = (0, react_1.useContext)(ShowcaseContext);
+    if (!v)
+        throw new Error('ShowcaseProvider required');
+    return v;
+}

package/dist/showcase/components/CodeBlock.d.ts

@@ -0,0 +1,7 @@
+/** 코드 스니펫 + 캡션 (문서형 갤러리) */
+export declare function CodeBlock({ caption, code, className, variant, }: {
+    caption?: string;
+    code: string;
+    className?: string;
+    variant?: 'default' | 'embedded';
+}): import("react/jsx-runtime").JSX.Element;

package/dist/showcase/components/CodeBlock.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeBlock = CodeBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/** 코드 스니펫 + 캡션 (문서형 갤러리) */
+function CodeBlock({ caption, code, className = '', variant = 'default', }) {
+    const rootClass = ['xfc-ds-code-wrap', variant === 'embedded' ? 'xfc-ds-code-wrap--embedded' : '', className]
+        .filter(Boolean)
+        .join(' ');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: rootClass, children: [caption ? (0, jsx_runtime_1.jsx)("p", { className: "xfc-ds-code-caption", children: caption }) : null, (0, jsx_runtime_1.jsx)("pre", { className: "xfc-ds-code", children: code.trim() })] }));
+}

package/dist/showcase/components/SectionTitle.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+export declare function SectionTitle({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/showcase/components/SectionTitle.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionTitle = SectionTitle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Text_1 = require("../../components/atoms/Text");
+function SectionTitle({ children }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "xfc-ds-section-head", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { as: "h2", variant: "section", style: { margin: 0 }, children: children }) }));
+}

package/dist/showcase/components/ShowcaseChrome.d.ts

@@ -0,0 +1,2 @@
+/** 전역 오버레이·다이얼로그 (포털) */
+export declare function ShowcaseChrome(): import("react/jsx-runtime").JSX.Element;

package/dist/showcase/components/ShowcaseChrome.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShowcaseChrome = ShowcaseChrome;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = require("../../components/atoms/Button");
+const InlineErrorList_1 = require("../../components/atoms/InlineErrorList");
+const LoadingOverlay_1 = require("../../components/atoms/LoadingOverlay");
+const Text_1 = require("../../components/atoms/Text");
+const Toast_1 = require("../../components/atoms/Toast");
+const BottomSheet_1 = require("../../components/overlays/BottomSheet");
+const ConfirmDialog_1 = require("../../components/overlays/ConfirmDialog");
+const Dialog_1 = require("../../components/overlays/Dialog");
+const ShowcaseContext_1 = require("../ShowcaseContext");
+const icons_1 = require("./icons");
+/** 전역 오버레이·다이얼로그 (포털) */
+function ShowcaseChrome() {
+    const s = (0, ShowcaseContext_1.useShowcase)();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InlineErrorList_1.InlineErrorList, { errors: s.errors, onDismiss: (id) => s.setErrors((e) => e.filter((x) => x.id !== id)), dismissAriaLabel: "\uBC30\uB108 \uB2EB\uAE30" }), (0, jsx_runtime_1.jsx)(Toast_1.ToastList, { toasts: s.toasts, onDismiss: (id) => s.setToasts((t) => t.filter((x) => x.id !== id)) }), (0, jsx_runtime_1.jsx)(LoadingOverlay_1.LoadingOverlay, { active: s.loading, title: "\uCC98\uB9AC \uC911", message: "\uB370\uC774\uD130\uB97C \uAC00\uC838\uC635\uB2C8\uB2E4\u2026", ariaLabel: "\uB370\uC774\uD130 \uB85C\uB529 \uC911" }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: s.dialogOpen, onOpenChange: s.setDialogOpen, title: "Dialog", description: "title / description / children \uC870\uD569. \uBC30\uACBD \uD074\uB9AD\u00B7Escape \uB85C \uB2EB\uC744 \uC218 \uC788\uC2B5\uB2C8\uB2E4.", children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "body", children: "children \uC5D0 \uD3FC\u00B7\uB9AC\uC2A4\uD2B8 \uB4F1 \uC790\uC720\uB86D\uAC8C \uB123\uC744 \uC218 \uC788\uC2B5\uB2C8\uB2E4." }), (0, jsx_runtime_1.jsxs)("div", { className: "xfc-dialog-footer", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", variant: "muted", onClick: () => s.setDialogOpen(false), children: "\uCDE8\uC18C" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", variant: "primary", onClick: () => s.setDialogOpen(false), children: "\uD655\uC778" })] })] }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: s.dialogRichOpen, onOpenChange: s.setDialogRichOpen, title: "\uD5E4\uB354 \uCEE4\uC2A4\uD140", titleAdornment: (0, jsx_runtime_1.jsx)(Toast_1.ToastSeverityIcon, { severity: "info" }), headerExtra: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "ghost", type: "button", onClick: () => s.setDialogRichOpen(false), "aria-label": "\uB2EB\uAE30", children: "\u2715" }), description: "titleAdornment \u00B7 headerExtra \u2014 Dialog props \uB85C \uC870\uD569", children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "body", children: "bodyClassName \u00B7 descriptionClassName \uC73C\uB85C \uD328\uB110 \uC601\uC5ED \uD074\uB798\uC2A4\uB3C4 \uC870\uC815 \uAC00\uB2A5\uD569\uB2C8\uB2E4." }), (0, jsx_runtime_1.jsx)("div", { className: "xfc-dialog-footer", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", variant: "primary", onClick: () => s.setDialogRichOpen(false), children: "OK" }) })] }), (0, jsx_runtime_1.jsx)(ConfirmDialog_1.ConfirmDialog, { open: s.confirmOpen, onOpenChange: s.setConfirmOpen, title: "ConfirmDialog", message: "Default labels: OK / Cancel. Cancel runs onCancel then closes.", onConfirm: () => s.setConfirmOpen(false) }), (0, jsx_runtime_1.jsx)(ConfirmDialog_1.ConfirmDialog, { open: s.confirmDestructiveOpen, onOpenChange: s.setConfirmDestructiveOpen, title: "\uC704\uD5D8 \uC791\uC5C5", message: "destructive + \uBE68\uAC04 \uD655\uC778 \uBC84\uD2BC \uC608\uC2DC\uC785\uB2C8\uB2E4.", destructive: true, confirmLabel: "\uC0AD\uC81C", onConfirm: () => s.setConfirmDestructiveOpen(false) }), (0, jsx_runtime_1.jsx)(ConfirmDialog_1.ConfirmDialog, { open: s.confirmLoadingDemo, onOpenChange: s.setConfirmLoadingDemo, title: "\uB85C\uB529 \uC911 \uD655\uC778", message: "confirmLoading \uC2DC \uBC84\uD2BC\uC774 \uC7A0\uAE41\uB2C8\uB2E4.", confirmLoading: true, onConfirm: () => { } }), (0, jsx_runtime_1.jsx)(ConfirmDialog_1.ConfirmDialog, { open: s.confirmCustomOpen, onOpenChange: s.setConfirmCustomOpen, title: "\uBC84\uD2BC props \uD655\uC7A5", message: "confirmButtonProps / cancelButtonProps \uB85C icon\u00B7className \uB4F1 \uC804\uB2EC", confirmLabel: "\uC800\uC7A5", cancelLabel: "\uB2EB\uAE30", onConfirm: () => s.setConfirmCustomOpen(false), confirmButtonProps: {
+                    icon: (0, jsx_runtime_1.jsx)(icons_1.CheckIcon, {}),
+                    iconPosition: 'start',
+                }, cancelButtonProps: {
+                    icon: (0, jsx_runtime_1.jsx)("span", { "aria-hidden": true, children: "\u2190" }),
+                    iconPosition: 'start',
+                } }), (0, jsx_runtime_1.jsxs)(BottomSheet_1.BottomSheet, { open: s.sheetOpen, onOpenChange: s.setSheetOpen, title: "BottomSheet", showHandle: true, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "body", children: "\uD654\uBA74 \uD558\uB2E8\uC5D0\uC11C \uC62C\uB77C\uC624\uB294 \uD328\uB110\uC785\uB2C8\uB2E4." }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: 'var(--xfc-space-md)' }, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", variant: "primary", onClick: () => s.setSheetOpen(false), children: "\uB2EB\uAE30" }) })] }), (0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, { open: s.sheetRichOpen, onOpenChange: s.setSheetRichOpen, title: "\uC561\uC158 \uC2DC\uD2B8", subtitle: "subtitle \u00B7 headerExtra \uB85C \uC0C1\uB2E8 \uAD6C\uC131", headerExtra: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "ghost", type: "button", onClick: () => s.setSheetRichOpen(false), "aria-label": "\uB2EB\uAE30", children: "\uC644\uB8CC" }), showHandle: true, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "body", children: "BottomSheet bodyClassName \uB4F1\uC73C\uB85C \uBCF8\uBB38 \uC601\uC5ED\uB3C4 \uC870\uC815\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4." }) })] }));
+}

package/dist/showcase/components/ShowcaseDemo.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export type ShowcaseDemoProps = {
+    title: string;
+    description?: ReactNode;
+    code: string;
+    codeCaption?: string;
+    children: ReactNode;
+};
+/** 데모 프리뷰 + 접이식 코드 보기 */
+export declare function ShowcaseDemo({ title, description, code, codeCaption, children }: ShowcaseDemoProps): import("react/jsx-runtime").JSX.Element;

package/dist/showcase/components/ShowcaseDemo.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShowcaseDemo = ShowcaseDemo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CodeBlock_1 = require("./CodeBlock");
+/** 데모 프리뷰 + 접이식 코드 보기 */
+function ShowcaseDemo({ title, description, code, codeCaption, children }) {
+    return ((0, jsx_runtime_1.jsxs)("article", { className: "xfc-ds-demo", children: [(0, jsx_runtime_1.jsx)("header", { className: "xfc-ds-demo__header", children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { className: "xfc-ds-demo__title", children: title }), description ? (0, jsx_runtime_1.jsx)("div", { className: "xfc-ds-demo__desc", children: description }) : null] }) }), (0, jsx_runtime_1.jsx)("div", { className: "xfc-ds-demo__preview", children: children }), (0, jsx_runtime_1.jsxs)("details", { className: "xfc-ds-demo__details", children: [(0, jsx_runtime_1.jsx)("summary", { className: "xfc-ds-demo__summary", children: "\uCF54\uB4DC \uBCF4\uAE30" }), (0, jsx_runtime_1.jsx)("div", { className: "xfc-ds-demo__code", children: (0, jsx_runtime_1.jsx)(CodeBlock_1.CodeBlock, { caption: codeCaption, code: code, variant: "embedded" }) })] })] }));
+}

package/dist/showcase/components/icons.d.ts

@@ -0,0 +1,2 @@
+export declare function StarIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function CheckIcon(): import("react/jsx-runtime").JSX.Element;

package/dist/showcase/components/icons.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StarIcon = StarIcon;
+exports.CheckIcon = CheckIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function StarIcon() {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": true, style: { display: 'block' }, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "m8 1.3 1.9 4.2 4.6.4-3.5 3.1 1 4.5L8 11.5l-4 2 1-4.5-3.5-3.1 4.6-.4L8 1.3z" }) }));
+}
+function CheckIcon() {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": true, style: { display: 'block' }, children: (0, jsx_runtime_1.jsx)("path", { fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M3.5 8.5l3 3 6-7" }) }));
+}

package/dist/showcase/index.d.ts

@@ -0,0 +1,4 @@
+export { DesignSystemShowcase } from './DesignSystemShowcase';
+export { ShowcaseProvider, useShowcase } from './ShowcaseContext';
+export type { ShowcaseContextValue } from './ShowcaseContext';
+export { SHOWCASE_NAV, type ShowcaseNavId } from './nav';

package/dist/showcase/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SHOWCASE_NAV = exports.useShowcase = exports.ShowcaseProvider = exports.DesignSystemShowcase = void 0;
+var DesignSystemShowcase_1 = require("./DesignSystemShowcase");
+Object.defineProperty(exports, "DesignSystemShowcase", { enumerable: true, get: function () { return DesignSystemShowcase_1.DesignSystemShowcase; } });
+var ShowcaseContext_1 = require("./ShowcaseContext");
+Object.defineProperty(exports, "ShowcaseProvider", { enumerable: true, get: function () { return ShowcaseContext_1.ShowcaseProvider; } });
+Object.defineProperty(exports, "useShowcase", { enumerable: true, get: function () { return ShowcaseContext_1.useShowcase; } });
+var nav_1 = require("./nav");
+Object.defineProperty(exports, "SHOWCASE_NAV", { enumerable: true, get: function () { return nav_1.SHOWCASE_NAV; } });

package/dist/showcase/nav.d.ts

@@ -0,0 +1,26 @@
+export declare const SHOWCASE_NAV: readonly [{
+    readonly id: "overview";
+    readonly label: "개요 · 문서";
+}, {
+    readonly id: "surfaces";
+    readonly label: "Paper · Card";
+}, {
+    readonly id: "typography";
+    readonly label: "Typography";
+}, {
+    readonly id: "actions";
+    readonly label: "Button · Badge";
+}, {
+    readonly id: "forms";
+    readonly label: "Forms";
+}, {
+    readonly id: "layout";
+    readonly label: "Box · Stack";
+}, {
+    readonly id: "feedback";
+    readonly label: "Toast · Errors";
+}, {
+    readonly id: "overlays";
+    readonly label: "Dialogs";
+}];
+export type ShowcaseNavId = (typeof SHOWCASE_NAV)[number]['id'];

package/dist/showcase/nav.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SHOWCASE_NAV = void 0;
+exports.SHOWCASE_NAV = [
+    { id: 'overview', label: '개요 · 문서' },
+    { id: 'surfaces', label: 'Paper · Card' },
+    { id: 'typography', label: 'Typography' },
+    { id: 'actions', label: 'Button · Badge' },
+    { id: 'forms', label: 'Forms' },
+    { id: 'layout', label: 'Box · Stack' },
+    { id: 'feedback', label: 'Toast · Errors' },
+    { id: 'overlays', label: 'Dialogs' },
+];

package/dist/showcase/sections/ActionsSection.d.ts

@@ -0,0 +1 @@
+export declare function ActionsSection(): import("react/jsx-runtime").JSX.Element;

package/dist/showcase/sections/ActionsSection.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionsSection = ActionsSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const atoms_1 = require("../../components/atoms");
+const icons_1 = require("../components/icons");
+const SectionTitle_1 = require("../components/SectionTitle");
+const ShowcaseDemo_1 = require("../components/ShowcaseDemo");
+const ShowcaseContext_1 = require("../ShowcaseContext");
+function ActionsSection() {
+    const s = (0, ShowcaseContext_1.useShowcase)();
+    return ((0, jsx_runtime_1.jsxs)("section", { id: "actions", className: "xfc-ds-section", children: [(0, jsx_runtime_1.jsx)(SectionTitle_1.SectionTitle, { children: "Button \u00B7 Badge" }), (0, jsx_runtime_1.jsxs)("p", { className: "xfc-ds-section-lead", children: [(0, jsx_runtime_1.jsx)("code", { children: "Badge" }), " \uD1A4\u00B7\uC544\uC774\uCF58\u00B7\uD074\uB9AD(\uBC84\uD2BC \uB80C\uB354), ", (0, jsx_runtime_1.jsx)("code", { children: "Button" }), " variant\u00B7\uB85C\uB529\u00B7\uC544\uC774\uCF58 \uC2AC\uB86F."] }), (0, jsx_runtime_1.jsx)(ShowcaseDemo_1.ShowcaseDemo, { title: "Badge \u2014 tone & state", description: "neutral \u00B7 accent \u00B7 success \u00B7 warn \u00B7 danger, icon, enabled=false", code: `<Badge tone="accent">accent</Badge>
+<Badge tone="success" icon={<StarIcon />}>icon</Badge>
+<Badge tone="neutral" enabled={false}>disabled look</Badge>
+<Badge tone="accent" onClick={…}>button</Badge>`, children: (0, jsx_runtime_1.jsxs)(atoms_1.Stack, { direction: "row", gap: "sm", align: "center", style: { flexWrap: 'wrap' }, children: [(0, jsx_runtime_1.jsx)(atoms_1.Badge, { tone: "neutral", children: "neutral" }), (0, jsx_runtime_1.jsx)(atoms_1.Badge, { tone: "accent", children: "accent" }), (0, jsx_runtime_1.jsx)(atoms_1.Badge, { tone: "success", children: "success" }), (0, jsx_runtime_1.jsx)(atoms_1.Badge, { tone: "warn", children: "warn" }), (0, jsx_runtime_1.jsx)(atoms_1.Badge, { tone: "danger", children: "danger" }), (0, jsx_runtime_1.jsx)(atoms_1.Badge, { tone: "accent", icon: (0, jsx_runtime_1.jsx)(icons_1.StarIcon, {}), children: "icon" }), (0, jsx_runtime_1.jsx)(atoms_1.Badge, { tone: "neutral", enabled: false, children: "enabled=false" }), (0, jsx_runtime_1.jsxs)(atoms_1.Badge, { tone: "accent", icon: (0, jsx_runtime_1.jsx)(icons_1.CheckIcon, {}), onClick: () => s.setBadgeClicks((c) => c + 1), children: ["\uD074\uB9AD ", s.badgeClicks] })] }) }), (0, jsx_runtime_1.jsx)(ShowcaseDemo_1.ShowcaseDemo, { title: "Button \u2014 variants", description: "primary, secondary, outline, muted, ghost, disabled", code: `<Button variant="primary">primary</Button>
+<Button variant="outline">outline</Button>
+<Button variant="primary" disabled>disabled</Button>`, children: (0, jsx_runtime_1.jsxs)(atoms_1.Stack, { direction: "row", gap: "sm", align: "center", style: { flexWrap: 'wrap' }, children: [(0, jsx_runtime_1.jsx)(atoms_1.Button, { variant: "primary", children: "primary" }), (0, jsx_runtime_1.jsx)(atoms_1.Button, { variant: "secondary", children: "secondary" }), (0, jsx_runtime_1.jsx)(atoms_1.Button, { variant: "outline", children: "outline" }), (0, jsx_runtime_1.jsx)(atoms_1.Button, { variant: "muted", children: "muted" }), (0, jsx_runtime_1.jsx)(atoms_1.Button, { variant: "ghost", children: "ghost" }), (0, jsx_runtime_1.jsx)(atoms_1.Button, { variant: "primary", disabled: true, children: "disabled" })] }) }), (0, jsx_runtime_1.jsx)(ShowcaseDemo_1.ShowcaseDemo, { title: "Button \u2014 icon & loading", description: "iconPosition, loading + aria-busy, enabled=false", code: `<Button variant="primary" icon={<Star />} iconPosition="start">앞</Button>
+<Button variant="outline" icon={<Check />} iconPosition="end">뒤</Button>
+<Button variant="secondary" loading={busy} onClick={…}>제출</Button>
+<Button variant="primary" enabled={false}>enabled=false</Button>`, children: (0, jsx_runtime_1.jsxs)(atoms_1.Stack, { direction: "row", gap: "sm", align: "center", style: { flexWrap: 'wrap' }, children: [(0, jsx_runtime_1.jsx)(atoms_1.Button, { variant: "primary", icon: (0, jsx_runtime_1.jsx)(icons_1.StarIcon, {}), iconPosition: "start", children: "\uC544\uC774\uCF58 \uC55E" }), (0, jsx_runtime_1.jsx)(atoms_1.Button, { variant: "outline", icon: (0, jsx_runtime_1.jsx)(icons_1.CheckIcon, {}), iconPosition: "end", children: "\uC544\uC774\uCF58 \uB4A4" }), (0, jsx_runtime_1.jsx)(atoms_1.Button, { variant: "secondary", loading: s.btnLoading, onClick: () => {
+                                s.setBtnLoading(true);
+                                window.setTimeout(() => s.setBtnLoading(false), 1200);
+                            }, children: "loading \uB370\uBAA8" }), (0, jsx_runtime_1.jsx)(atoms_1.Button, { variant: "primary", enabled: false, children: "enabled=false" })] }) })] }));
+}

package/dist/showcase/sections/FeedbackSection.d.ts

@@ -0,0 +1 @@
+export declare function FeedbackSection(): import("react/jsx-runtime").JSX.Element;

package/dist/showcase/sections/FeedbackSection.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeedbackSection = FeedbackSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const atoms_1 = require("../../components/atoms");
+const SectionTitle_1 = require("../components/SectionTitle");
+const ShowcaseDemo_1 = require("../components/ShowcaseDemo");
+const ShowcaseContext_1 = require("../ShowcaseContext");
+function FeedbackSection() {
+    const s = (0, ShowcaseContext_1.useShowcase)();
+    return ((0, jsx_runtime_1.jsxs)("section", { id: "feedback", className: "xfc-ds-section", children: [(0, jsx_runtime_1.jsx)(SectionTitle_1.SectionTitle, { children: "Toast \u00B7 Inline errors \u00B7 Loading" }), (0, jsx_runtime_1.jsxs)("p", { className: "xfc-ds-section-lead", children: [(0, jsx_runtime_1.jsx)("code", { children: "ToastList" }), " / ", (0, jsx_runtime_1.jsx)("code", { children: "InlineErrorList" }), " / ", (0, jsx_runtime_1.jsx)("code", { children: "LoadingOverlay" }), " \uB294 \uD3EC\uD138 \uACE0\uC815 \uB808\uC774\uC5B4\uC785\uB2C8\uB2E4. \uC544\uB798\uC5D0\uC11C \uC815\uC801 UI\uC640 \uD2B8\uB9AC\uAC70\uB97C \uB098\uB215\uB2C8\uB2E4."] }), (0, jsx_runtime_1.jsx)(ShowcaseDemo_1.ShowcaseDemo, { title: "ToastSeverityIcon", description: "info, success, warn, error", code: `<ToastSeverityIcon severity="info" />
+<ToastSeverityIcon severity="success" />`, children: (0, jsx_runtime_1.jsxs)(atoms_1.Stack, { direction: "row", gap: "lg", align: "center", style: { color: 'var(--xfc-fg)' }, children: [(0, jsx_runtime_1.jsx)(atoms_1.ToastSeverityIcon, { severity: "info" }), (0, jsx_runtime_1.jsx)(atoms_1.ToastSeverityIcon, { severity: "success" }), (0, jsx_runtime_1.jsx)(atoms_1.ToastSeverityIcon, { severity: "warn" }), (0, jsx_runtime_1.jsx)(atoms_1.ToastSeverityIcon, { severity: "error" })] }) }), (0, jsx_runtime_1.jsx)(ShowcaseDemo_1.ShowcaseDemo, { title: "Toast (\uB2E8\uC77C \uD589)", description: "onDismiss, icon=null, dismissible=false", code: `<Toast severity="info" message="…" onDismiss={…} />
+<Toast severity="warn" icon={null} onDismiss={…} />
+<Toast severity="error" dismissible={false} />`, children: (0, jsx_runtime_1.jsxs)(atoms_1.Stack, { direction: "column", gap: "sm", align: "stretch", children: [(0, jsx_runtime_1.jsx)(atoms_1.Toast, { severity: "info", message: "\uAE30\uBCF8 \uB2EB\uAE30 \uBC84\uD2BC", onDismiss: () => { } }), (0, jsx_runtime_1.jsx)(atoms_1.Toast, { severity: "warn", message: "\uC544\uC774\uCF58 \uC228\uAE40 (icon=null)", icon: null, onDismiss: () => { } }), (0, jsx_runtime_1.jsx)(atoms_1.Toast, { severity: "error", message: "\uB2EB\uAE30 \uC5C6\uC74C", dismissible: false })] }) }), (0, jsx_runtime_1.jsx)(ShowcaseDemo_1.ShowcaseDemo, { title: "\uC804\uC5ED \uB808\uC774\uC5B4 \uD2B8\uB9AC\uAC70", description: "ToastList \u00B7 InlineErrorList \u00B7 LoadingOverlay \u2014 ShowcaseChrome \uC5D0 \uB9C8\uC6B4\uD2B8\uB41C \uC608\uC2DC", code: `<ToastList toasts={entries} onDismiss={remove} />
+<InlineErrorList errors={…} onDismiss={…} />
+<LoadingOverlay active={…} title="…" message="…" />`, children: (0, jsx_runtime_1.jsxs)(atoms_1.Stack, { direction: "column", gap: "md", align: "stretch", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(atoms_1.Text, { variant: "small", style: { margin: '0 0 var(--xfc-space-sm)', color: 'var(--xfc-fg-muted)' }, children: "Toast" }), (0, jsx_runtime_1.jsxs)(atoms_1.Stack, { direction: "row", gap: "sm", align: "center", style: { flexWrap: 'wrap' }, children: [(0, jsx_runtime_1.jsx)(atoms_1.Button, { type: "button", variant: "secondary", onClick: () => s.pushToast('info'), children: "info" }), (0, jsx_runtime_1.jsx)(atoms_1.Button, { type: "button", variant: "secondary", onClick: () => s.pushToast('success'), children: "success" }), (0, jsx_runtime_1.jsx)(atoms_1.Button, { type: "button", variant: "secondary", onClick: () => s.pushToast('warn'), children: "warn" }), (0, jsx_runtime_1.jsx)(atoms_1.Button, { type: "button", variant: "secondary", onClick: () => s.pushToast('error'), children: "error" }), (0, jsx_runtime_1.jsx)(atoms_1.Button, { type: "button", variant: "secondary", onClick: s.pushToastCustomIcon, children: "\uCEE4\uC2A4\uD140 icon" })] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(atoms_1.Text, { variant: "small", style: { margin: '0 0 var(--xfc-space-sm)', color: 'var(--xfc-fg-muted)' }, children: "Inline error \u00B7 Loading" }), (0, jsx_runtime_1.jsxs)(atoms_1.Stack, { direction: "row", gap: "sm", align: "center", style: { flexWrap: 'wrap' }, children: [(0, jsx_runtime_1.jsx)(atoms_1.Button, { type: "button", variant: "outline", onClick: s.addError, children: "\uC5D0\uB7EC \uBC30\uB108 \uCD94\uAC00" }), (0, jsx_runtime_1.jsx)(atoms_1.Button, { type: "button", variant: "outline", onClick: s.addErrorRich, children: "\uC5D0\uB7EC (icon\u00B7onClick)" }), (0, jsx_runtime_1.jsxs)(atoms_1.Button, { type: "button", variant: "outline", onClick: () => s.setLoading((v) => !v), children: ["\uB85C\uB529 \uC624\uBC84\uB808\uC774 ", s.loading ? '끄기' : '켜기'] })] })] })] }) })] }));
+}

package/dist/showcase/sections/FormsSection.d.ts

@@ -0,0 +1 @@
+export declare function FormsSection(): import("react/jsx-runtime").JSX.Element;

package/dist/showcase/sections/FormsSection.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormsSection = FormsSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const atoms_1 = require("../../components/atoms");
+const SectionTitle_1 = require("../components/SectionTitle");
+const ShowcaseDemo_1 = require("../components/ShowcaseDemo");
+const ShowcaseContext_1 = require("../ShowcaseContext");
+function FormsSection() {
+    const s = (0, ShowcaseContext_1.useShowcase)();
+    return ((0, jsx_runtime_1.jsxs)("section", { id: "forms", className: "xfc-ds-section", children: [(0, jsx_runtime_1.jsx)(SectionTitle_1.SectionTitle, { children: "Forms" }), (0, jsx_runtime_1.jsxs)("p", { className: "xfc-ds-section-lead", children: [(0, jsx_runtime_1.jsx)("code", { children: "Input" }), ", ", (0, jsx_runtime_1.jsx)("code", { children: "Field" }), " \uB798\uD551, ", (0, jsx_runtime_1.jsx)("code", { children: "Select" }), ", ", (0, jsx_runtime_1.jsx)("code", { children: "Checkbox" }), " \uC870\uD569 \uC608\uC2DC\uC785\uB2C8\uB2E4."] }), (0, jsx_runtime_1.jsx)(ShowcaseDemo_1.ShowcaseDemo, { title: "Input \u2014 states", description: "invalid + description, enabled=false, disabled", code: `<Input type="email" placeholder="you@example.com" />
+<Input invalid description="형식을 확인하세요" />
+<Input enabled={false} placeholder="enabled=false" />
+<Input disabled placeholder="native disabled" />`, children: (0, jsx_runtime_1.jsxs)(atoms_1.Stack, { direction: "column", gap: "md", align: "stretch", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: `${s.uid}-email`, children: (0, jsx_runtime_1.jsx)(atoms_1.Text, { as: "span", variant: "labelBlock", children: "\uC774\uBA54\uC77C" }) }), (0, jsx_runtime_1.jsx)(atoms_1.Input, { id: `${s.uid}-email`, type: "email", placeholder: "you@example.com", autoComplete: "email" }), (0, jsx_runtime_1.jsx)(atoms_1.Input, { placeholder: "\uD615\uC2DD \uC624\uB958 \uC608\uC2DC", invalid: true, description: "invalid + description (aria-describedby \uC790\uB3D9)", defaultValue: "not-an-email" }), (0, jsx_runtime_1.jsx)(atoms_1.Input, { placeholder: "enabled=false", enabled: false }), (0, jsx_runtime_1.jsx)(atoms_1.Input, { placeholder: "\uBE44\uD65C\uC131(disabled)", disabled: true })] }) }), (0, jsx_runtime_1.jsx)(ShowcaseDemo_1.ShowcaseDemo, { title: "Field + Textarea", description: "label, hint, error, invalid \u2014 \uC81C\uC5B4 \uCEF4\uD3EC\uB10C\uD2B8\uB85C \uAE38\uC774 \uAC80\uC99D", code: `<Field htmlFor="bio" label="Bio" hint="Short" error={err} invalid={!!err}>
+  <Textarea id="bio" rows={3} value={v} onChange={…} />
+</Field>`, children: (0, jsx_runtime_1.jsx)(atoms_1.Field, { htmlFor: `${s.uid}-field-bio`, label: "Bio", hint: "12\uC790 \uC774\uD558", error: s.fieldBio.length > 12 ? 'Keep it under 12 characters' : undefined, invalid: s.fieldBio.length > 12, children: (0, jsx_runtime_1.jsx)(atoms_1.Textarea, { id: `${s.uid}-field-bio`, rows: 3, placeholder: "Type here\u2026", value: s.fieldBio, onChange: (e) => s.setFieldBio(e.target.value) }) }) }), (0, jsx_runtime_1.jsx)(ShowcaseDemo_1.ShowcaseDemo, { title: "Select & Checkbox", description: "Field \uB85C Select \uB798\uD551, \uB2E8\uB3C5 Checkbox", code: `<Field htmlFor="plan" label="Plan">
+  <Select id="plan" value={v} onChange={…}>…</Select>
+</Field>
+<Checkbox label="I agree" checked={c} onChange={…} />`, children: (0, jsx_runtime_1.jsxs)(atoms_1.Stack, { direction: "column", gap: "md", align: "stretch", children: [(0, jsx_runtime_1.jsx)(atoms_1.Field, { htmlFor: `${s.uid}-field-plan`, label: "Plan", children: (0, jsx_runtime_1.jsxs)(atoms_1.Select, { id: `${s.uid}-field-plan`, value: s.fieldPlan, onChange: (e) => s.setFieldPlan(e.target.value), children: [(0, jsx_runtime_1.jsx)("option", { value: "a", children: "Plan A" }), (0, jsx_runtime_1.jsx)("option", { value: "b", children: "Plan B" })] }) }), (0, jsx_runtime_1.jsx)(atoms_1.Checkbox, { label: "I agree to the terms", checked: s.fieldAgree, onChange: (e) => s.setFieldAgree(e.target.checked) })] }) })] }));
+}

package/dist/showcase/sections/LayoutSection.d.ts

@@ -0,0 +1 @@
+export declare function LayoutSection(): import("react/jsx-runtime").JSX.Element;

package/dist/showcase/sections/LayoutSection.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutSection = LayoutSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const atoms_1 = require("../../components/atoms");
+const SectionTitle_1 = require("../components/SectionTitle");
+const ShowcaseDemo_1 = require("../components/ShowcaseDemo");
+function LayoutSection() {
+    return ((0, jsx_runtime_1.jsxs)("section", { id: "layout", className: "xfc-ds-section", children: [(0, jsx_runtime_1.jsx)(SectionTitle_1.SectionTitle, { children: "Box \u00B7 Stack" }), (0, jsx_runtime_1.jsxs)("p", { className: "xfc-ds-section-lead", children: ["\uB808\uC774\uC544\uC6C3 \uD504\uB9AC\uBBF8\uD2F0\uBE0C \u2014 padding, ", (0, jsx_runtime_1.jsx)("code", { children: "as" }), ", flex gap\u00B7justify\u00B7wrap."] }), (0, jsx_runtime_1.jsx)(ShowcaseDemo_1.ShowcaseDemo, { title: "Box", description: "as \uB85C \uC2DC\uB9E8\uD2F1 \uD0DC\uADF8, padding \uD1A0\uD070", code: `<Box as="section" padding="md" aria-label="…">
+  …
+</Box>
+<Box padding="md">…</Box>`, children: (0, jsx_runtime_1.jsx)(atoms_1.Stack, { direction: "column", gap: "md", align: "stretch", children: (0, jsx_runtime_1.jsx)(atoms_1.Box, { as: "section", padding: "md", style: { border: '1px dashed var(--xfc-border-strong)', borderRadius: 'var(--xfc-radius-xs)' }, "aria-label": "\uC139\uC158 \uBC15\uC2A4 \uC608\uC2DC", children: (0, jsx_runtime_1.jsx)(atoms_1.Text, { variant: "small", children: "Box as=\"section\" + padding=\"md\"" }) }) }) }), (0, jsx_runtime_1.jsx)(ShowcaseDemo_1.ShowcaseDemo, { title: "Stack \u2014 row justify", description: "direction=\"row\", justify=\"between\", align", code: `<Stack direction="row" justify="between" align="center" gap="md">
+  <Text variant="small">왼쪽</Text>
+  <Text variant="small">오른쪽</Text>
+</Stack>`, children: (0, jsx_runtime_1.jsxs)(atoms_1.Stack, { direction: "row", justify: "between", align: "center", wrap: false, gap: "md", children: [(0, jsx_runtime_1.jsx)(atoms_1.Text, { variant: "small", children: "justify=\"between\"" }), (0, jsx_runtime_1.jsx)(atoms_1.Text, { variant: "small", children: "\uC624\uB978\uCABD \uC815\uB82C" })] }) }), (0, jsx_runtime_1.jsx)(ShowcaseDemo_1.ShowcaseDemo, { title: "Stack \u2014 gap & wrap", description: "align=\"stretch\", flexWrap \uC740 style \uB85C \uBCF4\uC644 \uAC00\uB2A5", code: `<Stack direction="row" gap="md" align="stretch" style={{ flexWrap: 'wrap' }}>
+  <Box padding="md">…</Box>
+  <Card style={{ flex: '1 1 140px' }}>…</Card>
+</Stack>`, children: (0, jsx_runtime_1.jsxs)(atoms_1.Stack, { direction: "row", gap: "md", align: "stretch", style: { flexWrap: 'wrap' }, children: [(0, jsx_runtime_1.jsx)(atoms_1.Box, { padding: "md", style: { border: '1px dashed var(--xfc-border-strong)', borderRadius: 'var(--xfc-radius-xs)' }, children: (0, jsx_runtime_1.jsx)(atoms_1.Text, { variant: "small", children: "\uCCAB \uCE78" }) }), (0, jsx_runtime_1.jsx)(atoms_1.Card, { style: { flex: '1 1 140px', minWidth: 0 }, children: (0, jsx_runtime_1.jsx)(atoms_1.Text, { variant: "small", children: "\uC911\uCCA9 Card (flex-grow)" }) })] }) })] }));
+}

package/dist/showcase/sections/OverlaysSection.d.ts

@@ -0,0 +1 @@
+export declare function OverlaysSection(): import("react/jsx-runtime").JSX.Element;

package/dist/showcase/sections/OverlaysSection.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverlaysSection = OverlaysSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const atoms_1 = require("../../components/atoms");
+const SectionTitle_1 = require("../components/SectionTitle");
+const ShowcaseDemo_1 = require("../components/ShowcaseDemo");
+const ShowcaseContext_1 = require("../ShowcaseContext");
+function OverlaysSection() {
+    const s = (0, ShowcaseContext_1.useShowcase)();
+    return ((0, jsx_runtime_1.jsxs)("section", { id: "overlays", className: "xfc-ds-section", children: [(0, jsx_runtime_1.jsx)(SectionTitle_1.SectionTitle, { children: "Dialog \u00B7 Confirm \u00B7 BottomSheet" }), (0, jsx_runtime_1.jsxs)("p", { className: "xfc-ds-section-lead", children: [(0, jsx_runtime_1.jsx)("code", { children: "document.body" }), " \uD3EC\uD138 \u00B7 \uB192\uC740 z-index. \uD3EC\uCEE4\uC2A4 \uD2B8\uB7A9\u00B7\uBC30\uACBD \uCC98\uB9AC\uB294 base.css / overlay \uD6C5\uC744 \uB530\uB985\uB2C8\uB2E4."] }), (0, jsx_runtime_1.jsx)(ShowcaseDemo_1.ShowcaseDemo, { title: "Dialog", description: "\uAE30\uBCF8 \uD328\uB110 \u00B7 titleAdornment \u00B7 headerExtra", code: `<Dialog open={open} onOpenChange={setOpen} title="…" description="…">
+  …
+</Dialog>
+<Dialog titleAdornment={…} headerExtra={…} … />`, children: (0, jsx_runtime_1.jsxs)(atoms_1.Stack, { direction: "column", gap: "sm", align: "stretch", children: [(0, jsx_runtime_1.jsx)(atoms_1.Text, { variant: "small", style: { margin: 0, color: 'var(--xfc-fg-muted)' }, children: "\uBC84\uD2BC\uC73C\uB85C \uC5F4\uAE30" }), (0, jsx_runtime_1.jsxs)(atoms_1.Stack, { direction: "row", gap: "sm", align: "center", style: { flexWrap: 'wrap' }, children: [(0, jsx_runtime_1.jsx)(atoms_1.Button, { type: "button", variant: "secondary", onClick: () => s.setDialogOpen(true), children: "Dialog" }), (0, jsx_runtime_1.jsx)(atoms_1.Button, { type: "button", variant: "secondary", onClick: () => s.setDialogRichOpen(true), children: "Dialog (\uD5E4\uB354 \uCEE4\uC2A4\uD140)" })] })] }) }), (0, jsx_runtime_1.jsx)(ShowcaseDemo_1.ShowcaseDemo, { title: "ConfirmDialog", description: "destructive, confirmLoading, confirmButtonProps", code: `<ConfirmDialog
+  open={open}
+  onOpenChange={setOpen}
+  title="삭제"
+  message="진행할까요?"
+  destructive
+  confirmLabel="삭제"
+  onConfirm={handleDelete}
+/>`, children: (0, jsx_runtime_1.jsxs)(atoms_1.Stack, { direction: "row", gap: "sm", align: "center", style: { flexWrap: 'wrap' }, children: [(0, jsx_runtime_1.jsx)(atoms_1.Button, { type: "button", variant: "secondary", onClick: () => s.setConfirmOpen(true), children: "Confirm" }), (0, jsx_runtime_1.jsx)(atoms_1.Button, { type: "button", variant: "secondary", onClick: () => s.setConfirmDestructiveOpen(true), children: "destructive" }), (0, jsx_runtime_1.jsx)(atoms_1.Button, { type: "button", variant: "secondary", onClick: () => s.setConfirmLoadingDemo(true), children: "loading" }), (0, jsx_runtime_1.jsx)(atoms_1.Button, { type: "button", variant: "secondary", onClick: () => s.setConfirmCustomOpen(true), children: "\uBC84\uD2BC props" })] }) }), (0, jsx_runtime_1.jsx)(ShowcaseDemo_1.ShowcaseDemo, { title: "BottomSheet", description: "showHandle, subtitle, headerExtra", code: `<BottomSheet open={open} onOpenChange={setOpen} title="…" showHandle>
+  …
+</BottomSheet>`, children: (0, jsx_runtime_1.jsxs)(atoms_1.Stack, { direction: "row", gap: "sm", align: "center", style: { flexWrap: 'wrap' }, children: [(0, jsx_runtime_1.jsx)(atoms_1.Button, { type: "button", variant: "secondary", onClick: () => s.setSheetOpen(true), children: "BottomSheet" }), (0, jsx_runtime_1.jsx)(atoms_1.Button, { type: "button", variant: "secondary", onClick: () => s.setSheetRichOpen(true), children: "subtitle \u00B7 extra" })] }) })] }));
+}

package/dist/showcase/sections/OverviewSection.d.ts

@@ -0,0 +1 @@
+export declare function OverviewSection(): import("react/jsx-runtime").JSX.Element;

package/dist/showcase/sections/OverviewSection.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverviewSection = OverviewSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const atoms_1 = require("../../components/atoms");
+const SectionTitle_1 = require("../components/SectionTitle");
+const ShowcaseDemo_1 = require("../components/ShowcaseDemo");
+function OverviewSection() {
+    return ((0, jsx_runtime_1.jsxs)("section", { id: "overview", className: "xfc-ds-section", children: [(0, jsx_runtime_1.jsx)(SectionTitle_1.SectionTitle, { children: "\uAC1C\uC694 \u00B7 \uBB38\uC11C" }), (0, jsx_runtime_1.jsxs)("p", { className: "xfc-ds-section-lead", children: ["\uC774 \uAC24\uB7EC\uB9AC\uB294 ", (0, jsx_runtime_1.jsx)("strong", { children: "@xfilecom/front-core" }), "\uC758 \uD45C\uBA74\u00B7\uD1A0\uD070\u00B7\uC6D0\uC790 \uCEF4\uD3EC\uB10C\uD2B8\uB97C \uD55C \uD654\uBA74\uC5D0\uC11C \uC0B4\uD3B4\uBCF4\uAE30 \uC704\uD55C \uCC38\uACE0\uC6A9 UI\uC785\uB2C8\uB2E4. \uD328\uD0A4\uC9C0\uC5D0 \uD3EC\uD568\uB41C \uB9C8\uD06C\uB2E4\uC6B4\uC740 npm \uC124\uCE58 \uD6C4", ' ', (0, jsx_runtime_1.jsx)("code", { children: "node_modules/@xfilecom/front-core/docs/" }), "\uC5D0\uC11C\uB3C4 \uC5F4 \uC218 \uC788\uC2B5\uB2C8\uB2E4."] }), (0, jsx_runtime_1.jsxs)("div", { className: "xfc-ds-demo-grid xfc-ds-demo-grid--2", children: [(0, jsx_runtime_1.jsx)(ShowcaseDemo_1.ShowcaseDemo, { title: "CSS \uB85C\uB4DC \uC21C\uC11C", description: "\uC571 \uC5D4\uD2B8\uB9AC\uC5D0\uC11C design tokens \u2192 base \uB9AC\uC14B\u00B7\uC720\uD2F8 \u2192 (\uC120\uD0DD) \uC571/\uBE0C\uB79C\uB4DC \uD14C\uB9C8 \uC21C\uC73C\uB85C import \uD558\uC138\uC694.", code: `import '@xfilecom/front-core/tokens.css';
+import '@xfilecom/front-core/base.css';
+// 그 다음 앱 전용 테마·레이아웃 CSS`, children: (0, jsx_runtime_1.jsx)(atoms_1.Paper, { elevation: 1, style: { padding: 'var(--xfc-space-md)' }, children: (0, jsx_runtime_1.jsx)(atoms_1.Text, { variant: "small", style: { margin: 0, color: 'var(--xfc-fg-muted)' }, children: "\uAD8C\uC7A5 \uC21C\uC11C: README \u2192 docs/DESIGN_SYSTEM.md \u2192 docs/COMPONENTS.md" }) }) }), (0, jsx_runtime_1.jsx)(ShowcaseDemo_1.ShowcaseDemo, { title: "React \u2014 Paper \uD45C\uBA74", description: "\uBC94\uC6A9 \uD45C\uBA74 \uCEF4\uD3EC\uB10C\uD2B8\uB85C elevation\u00B7outlined variant \uB97C \uC0AC\uC6A9\uD569\uB2C8\uB2E4.", code: `import { Paper, Text } from '@xfilecom/front-core';
+
+<Paper elevation={2} style={{ padding: 'var(--xfc-space-lg)' }}>
+  <Text variant="body">콘텐츠</Text>
+</Paper>`, children: (0, jsx_runtime_1.jsx)(atoms_1.Paper, { elevation: 2, style: { padding: 'var(--xfc-space-lg)' }, children: (0, jsx_runtime_1.jsx)(atoms_1.Text, { variant: "body", style: { margin: 0 }, children: "elevation \uACFC padding \uC744 \uC870\uD569\uD55C \uC608\uC2DC\uC785\uB2C8\uB2E4." }) }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: 'var(--xfc-space-lg)' }, children: (0, jsx_runtime_1.jsx)(ShowcaseDemo_1.ShowcaseDemo, { title: "\uC18C\uC2A4 \uD0D0\uC0C9", description: "\uBAA8\uB178\uB808\uD3EC\uC5D0\uC11C\uB294 packages/front-core/src/components/atoms \uB4F1\uC5D0\uC11C props\u00B7\uAD6C\uD604\uC744 \uC9C1\uC811 \uD655\uC778\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.", code: `// 예: Button, Card, Dialog
+import { Button } from '@xfilecom/front-core';`, children: (0, jsx_runtime_1.jsx)(atoms_1.Card, { children: (0, jsx_runtime_1.jsxs)(atoms_1.Text, { variant: "small", style: { margin: 0 }, children: ["TypeScript \uC0AC\uC6A9\uC790\uB294 \uC5D0\uB514\uD130\uC5D0\uC11C ", (0, jsx_runtime_1.jsx)("code", { children: "ButtonProps" }), " \uB4F1 \uD0C0\uC785 \uC815\uC758\uB85C \uBC14\uB85C \uC774\uB3D9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4."] }) }) }) })] }));
+}

package/dist/showcase/sections/SurfacesSection.d.ts

@@ -0,0 +1 @@
+export declare function SurfacesSection(): import("react/jsx-runtime").JSX.Element;

package/dist/showcase/sections/SurfacesSection.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SurfacesSection = SurfacesSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const atoms_1 = require("../../components/atoms");
+const SectionTitle_1 = require("../components/SectionTitle");
+const ShowcaseDemo_1 = require("../components/ShowcaseDemo");
+const ShowcaseContext_1 = require("../ShowcaseContext");
+function SurfacesSection() {
+    const s = (0, ShowcaseContext_1.useShowcase)();
+    return ((0, jsx_runtime_1.jsxs)("section", { id: "surfaces", className: "xfc-ds-section", children: [(0, jsx_runtime_1.jsx)(SectionTitle_1.SectionTitle, { children: "Paper \u00B7 Card" }), (0, jsx_runtime_1.jsxs)("p", { className: "xfc-ds-section-lead", children: [(0, jsx_runtime_1.jsx)("code", { children: "Paper" }), "\uB294 \uBC94\uC6A9 \uD45C\uBA74(elevation). ", (0, jsx_runtime_1.jsx)("code", { children: "Card" }), "\uB294 \uD5E4\uB354\u00B7\uD478\uD130 \uC2AC\uB86F\uC774 \uC788\uB294 \uD328\uD134\uC785\uB2C8\uB2E4."] }), (0, jsx_runtime_1.jsx)(ShowcaseDemo_1.ShowcaseDemo, { title: "Paper \u2014 elevation 0\u20134", description: "\uADF8\uB9BC\uC790 \uB2E8\uACC4\uB97C \uB098\uB780\uD788 \uBE44\uAD50\uD569\uB2C8\uB2E4.", code: `import { Paper, Text } from '@xfilecom/front-core';
+
+{[0, 1, 2, 3, 4].map((e) => (
+  <Paper key={e} elevation={e as 0 | 1 | 2 | 3 | 4} style={{ padding: 16 }}>
+    <Text variant="small">elevation {e}</Text>
+  </Paper>
+))}`, children: (0, jsx_runtime_1.jsx)("div", { className: "xfc-ds-paper-row", children: [0, 1, 2, 3, 4].map((e) => ((0, jsx_runtime_1.jsx)(atoms_1.Paper, { elevation: e, style: { padding: 'var(--xfc-space-md)', minWidth: 112 }, children: (0, jsx_runtime_1.jsxs)(atoms_1.Text, { variant: "small", style: { margin: 0 }, children: ["elevation ", e] }) }, e))) }) }), (0, jsx_runtime_1.jsx)(ShowcaseDemo_1.ShowcaseDemo, { title: "Paper \u2014 outlined", description: "\uADF8\uB9BC\uC790 \uB300\uC2E0 \uD14C\uB450\uB9AC\uB9CC \uC4F0\uB294 variant \uC785\uB2C8\uB2E4.", code: `<Paper variant="outlined" style={{ padding: 16 }}>…</Paper>`, children: (0, jsx_runtime_1.jsx)(atoms_1.Paper, { variant: "outlined", style: { padding: 'var(--xfc-space-md)', maxWidth: 240 }, children: (0, jsx_runtime_1.jsx)(atoms_1.Text, { variant: "small", style: { margin: 0 }, children: "variant=\"outlined\"" }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "xfc-ds-demo-grid xfc-ds-demo-grid--2", style: { marginTop: 'var(--xfc-space-md)' }, children: [(0, jsx_runtime_1.jsx)(ShowcaseDemo_1.ShowcaseDemo, { title: "Card \u2014 interactive", description: "\uD638\uBC84 \uC2DC \uC0B4\uC9DD \uB5A0\uC624\uB974\uB294 \uD074\uB9AD \uAC00\uB2A5 \uCE74\uB4DC(role=button, \uD0A4\uBCF4\uB4DC \uC9C0\uC6D0).", code: `<Card
+  interactive
+  role="button"
+  tabIndex={0}
+  onClick={…}
+  onKeyDown={(e) => {
+    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); … }
+  }}
+>
+  …
+</Card>`, children: (0, jsx_runtime_1.jsxs)(atoms_1.Card, { interactive: true, role: "button", tabIndex: 0, onClick: () => s.setInteractiveCardClicks((n) => n + 1), onKeyDown: (e) => {
+                                if (e.key === 'Enter' || e.key === ' ') {
+                                    e.preventDefault();
+                                    s.setInteractiveCardClicks((n) => n + 1);
+                                }
+                            }, children: [(0, jsx_runtime_1.jsx)(atoms_1.Text, { variant: "section", style: { margin: '0 0 var(--xfc-space-sm)' }, children: "Interactive" }), (0, jsx_runtime_1.jsxs)(atoms_1.Text, { variant: "small", style: { margin: 0 }, children: ["\uD074\uB9AD ", s.interactiveCardClicks, "\uD68C"] })] }) }), (0, jsx_runtime_1.jsx)(ShowcaseDemo_1.ShowcaseDemo, { title: "Card \u2014 title / footer", description: "title\u00B7footer \uAC00 \uC788\uC73C\uBA74 \uBCF8\uBB38\uC774 \uCE74\uB4DC body \uC601\uC5ED\uC73C\uB85C \uAC10\uC2F8\uC9D1\uB2C8\uB2E4.", code: `<Card
+  title="제목"
+  footer={<Stack direction="row" justify="end" gap="sm">…</Stack>}
+>
+  <Text variant="body">본문</Text>
+</Card>`, children: (0, jsx_runtime_1.jsx)(atoms_1.Card, { title: "\uC124\uC815", footer: (0, jsx_runtime_1.jsxs)(atoms_1.Stack, { direction: "row", justify: "end", gap: "sm", align: "center", children: [(0, jsx_runtime_1.jsx)(atoms_1.Button, { variant: "ghost", type: "button", children: "\uCDE8\uC18C" }), (0, jsx_runtime_1.jsx)(atoms_1.Button, { variant: "primary", type: "button", children: "\uC800\uC7A5" })] }), children: (0, jsx_runtime_1.jsx)(atoms_1.Text, { variant: "body", style: { margin: 0 }, children: "\uD478\uD130\uC5D0 \uC8FC\u00B7\uBCF4\uC870 \uC561\uC158\uC744 \uBC30\uCE58\uD558\uB294 \uC77C\uBC18\uC801\uC778 \uD328\uD134\uC785\uB2C8\uB2E4." }) }) })] })] }));
+}

package/dist/showcase/sections/TypographySection.d.ts

@@ -0,0 +1 @@
+export declare function TypographySection(): import("react/jsx-runtime").JSX.Element;

package/dist/showcase/sections/TypographySection.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypographySection = TypographySection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const atoms_1 = require("../../components/atoms");
+const SectionTitle_1 = require("../components/SectionTitle");
+const ShowcaseDemo_1 = require("../components/ShowcaseDemo");
+function TypographySection() {
+    return ((0, jsx_runtime_1.jsxs)("section", { id: "typography", className: "xfc-ds-section", children: [(0, jsx_runtime_1.jsx)(SectionTitle_1.SectionTitle, { children: "Typography" }), (0, jsx_runtime_1.jsxs)("p", { className: "xfc-ds-section-lead", children: [(0, jsx_runtime_1.jsx)("code", { children: "Text" }), " \uCEF4\uD3EC\uB10C\uD2B8\uC758 variant\u00B7", (0, jsx_runtime_1.jsx)("code", { children: "as" }), "\u00B7", (0, jsx_runtime_1.jsx)("code", { children: "truncate" }), " \uC870\uD569\uC785\uB2C8\uB2E4."] }), (0, jsx_runtime_1.jsx)(ShowcaseDemo_1.ShowcaseDemo, { title: "Display & section scale", description: "title, appbar, section, subtitle, lead, body", code: `<Text variant="title">title</Text>
+<Text variant="appbar">appbar</Text>
+<Text variant="section">section</Text>
+<Text variant="subtitle">subtitle</Text>
+<Text variant="lead">lead</Text>
+<Text variant="body">body</Text>`, children: (0, jsx_runtime_1.jsxs)(atoms_1.Stack, { direction: "column", gap: "sm", align: "stretch", children: [(0, jsx_runtime_1.jsx)(atoms_1.Text, { variant: "title", children: "title" }), (0, jsx_runtime_1.jsx)(atoms_1.Text, { variant: "appbar", children: "appbar" }), (0, jsx_runtime_1.jsx)(atoms_1.Text, { variant: "section", children: "section" }), (0, jsx_runtime_1.jsx)(atoms_1.Text, { variant: "subtitle", children: "subtitle" }), (0, jsx_runtime_1.jsx)(atoms_1.Text, { variant: "lead", children: "lead \u2014 \uB9AC\uB4DC/\uD788\uC5B4\uB85C \uBB38\uB2E8" }), (0, jsx_runtime_1.jsx)(atoms_1.Text, { variant: "body", children: "body \u2014 \uBCF8\uBB38" })] }) }), (0, jsx_runtime_1.jsx)(ShowcaseDemo_1.ShowcaseDemo, { title: "Supporting & accent", description: "muted, small, label, labelBlock, accent", code: `<Text variant="muted">muted</Text>
+<Text variant="small">small</Text>
+<Text variant="label">label (인라인 힌트)</Text>
+<Text variant="labelBlock">labelBlock (폼 라벨)</Text>
+<Text variant="accent">accent</Text>`, children: (0, jsx_runtime_1.jsxs)(atoms_1.Stack, { direction: "column", gap: "sm", align: "stretch", children: [(0, jsx_runtime_1.jsx)(atoms_1.Text, { variant: "muted", children: "muted" }), (0, jsx_runtime_1.jsx)(atoms_1.Text, { variant: "small", children: "small" }), (0, jsx_runtime_1.jsx)(atoms_1.Text, { variant: "label", children: "label \u2014 \uC778\uB77C\uC778 \uBCF4\uC870" }), (0, jsx_runtime_1.jsx)(atoms_1.Text, { variant: "labelBlock", children: "labelBlock \u2014 \uBE14\uB85D \uB77C\uBCA8" }), (0, jsx_runtime_1.jsx)(atoms_1.Text, { variant: "accent", children: "accent" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "xfc-ds-demo-grid xfc-ds-demo-grid--2", style: { marginTop: 'var(--xfc-space-md)' }, children: [(0, jsx_runtime_1.jsx)(ShowcaseDemo_1.ShowcaseDemo, { title: "Semantic element (as)", description: "\uAC19\uC740 \uC2A4\uD0C0\uC77C\uC744 \uB2E4\uB978 HTML \uD0DC\uADF8\uB85C \uB80C\uB354\uD569\uB2C8\uB2E4.", code: `<Text as="h3" variant="section">페이지 소제목</Text>
+<Text as="span" variant="body">인라인 본문</Text>`, children: (0, jsx_runtime_1.jsxs)(atoms_1.Stack, { direction: "column", gap: "md", align: "stretch", children: [(0, jsx_runtime_1.jsx)(atoms_1.Text, { as: "h3", variant: "section", style: { margin: 0 }, children: "as=\"h3\" + section" }), (0, jsx_runtime_1.jsx)(atoms_1.Text, { as: "span", variant: "body", children: "as=\"span\" \uC778\uB77C\uC778" })] }) }), (0, jsx_runtime_1.jsx)(ShowcaseDemo_1.ShowcaseDemo, { title: "Truncate", description: "\uD55C \uC904 \uB9D0\uC904\uC784 \u2014 \uC804\uCCB4 \uBB38\uC790\uC5F4\uC740 title \uB85C \uD234\uD301\uC5D0.", code: `<div style={{ maxWidth: 200 }}>
+  <Text variant="body" truncate title="전체 텍스트">
+    아주 긴 한 줄…
+  </Text>
+</div>`, children: (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: 200 }, children: (0, jsx_runtime_1.jsx)(atoms_1.Text, { variant: "body", truncate: true, title: "\uB9D0\uC904\uC784 \uC804\uCCB4\uB294 title \uC18D\uC131", children: "\uC544\uC8FC \uAE34 \uD55C \uC904 \uD14D\uC2A4\uD2B8\uB294 truncate \uB85C \uB9D0\uC904\uC784 \uCC98\uB9AC\uD569\uB2C8\uB2E4." }) }) })] })] }));
+}

package/dist/showcase.css

@@ -0,0 +1,235 @@
+/**
+ * @xfilecom/front-core — 디자인 시스템 쇼케이스 (npm: @xfilecom/front-core/showcase.css)
+ */
+
+.xfc-ds {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--xfc-space-xl);
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 0 var(--xfc-space-lg) var(--xfc-space-2xl);
+}
+
+.xfc-ds-nav {
+  position: sticky;
+  top: var(--xfc-space-md);
+  flex: 0 0 200px;
+  max-height: calc(100dvh - var(--xfc-space-xl));
+  overflow: auto;
+  padding: var(--xfc-space-md);
+  border-radius: var(--xfc-radius-md);
+  background: var(--xfc-bg-elevated);
+  border: 1px solid var(--xfc-border);
+  box-shadow: var(--xfc-shadow-xs);
+}
+
+.xfc-ds-nav-title {
+  margin: 0 0 var(--xfc-space-sm);
+  font-size: var(--xfc-text-small);
+  font-weight: 700;
+  color: var(--xfc-fg-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.xfc-ds-nav-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.xfc-ds-nav-list li {
+  margin: 0;
+}
+
+.xfc-ds-nav-link {
+  display: block;
+  padding: var(--xfc-space-xs) var(--xfc-space-sm);
+  margin: 2px 0;
+  font-size: var(--xfc-text-small);
+  font-weight: 500;
+  color: var(--xfc-fg-label);
+  text-decoration: none;
+  border-radius: var(--xfc-radius-xs);
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.xfc-ds-nav-link:hover {
+  background: var(--xfc-accent-soft);
+  color: var(--xfc-accent);
+}
+
+.xfc-ds-main {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.xfc-ds-section {
+  scroll-margin-top: var(--xfc-space-xl);
+  margin-bottom: var(--xfc-space-2xl);
+}
+
+.xfc-ds-section-head {
+  margin-bottom: var(--xfc-space-md);
+  padding-bottom: var(--xfc-space-sm);
+  border-bottom: 1px solid var(--xfc-border);
+}
+
+.xfc-ds-section-lead {
+  margin: 0 0 var(--xfc-space-lg);
+  font-size: var(--xfc-text-small);
+  line-height: 1.55;
+  color: var(--xfc-fg-muted);
+  max-width: 52rem;
+}
+
+.xfc-ds-demo-grid {
+  display: grid;
+  gap: var(--xfc-space-lg);
+  margin-top: var(--xfc-space-md);
+}
+
+@media (min-width: 720px) {
+  .xfc-ds-demo-grid--2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.xfc-ds-demo {
+  margin-bottom: var(--xfc-space-lg);
+  border: 1px solid var(--xfc-border);
+  border-radius: var(--xfc-radius-md);
+  background: var(--xfc-bg-elevated);
+  box-shadow: var(--xfc-shadow-xs);
+  overflow: hidden;
+}
+
+.xfc-ds-demo:last-child {
+  margin-bottom: 0;
+}
+
+.xfc-ds-demo__header {
+  padding: var(--xfc-space-md) var(--xfc-space-lg);
+  border-bottom: 1px solid var(--xfc-border);
+  background: linear-gradient(180deg, var(--xfc-bg-muted) 0%, var(--xfc-bg-elevated) 100%);
+}
+
+.xfc-ds-demo__title {
+  margin: 0;
+  font-size: var(--xfc-text-small);
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: var(--xfc-fg-label);
+}
+
+.xfc-ds-demo__desc {
+  margin-top: var(--xfc-space-xs);
+  font-size: var(--xfc-text-small);
+  line-height: 1.5;
+  color: var(--xfc-fg-muted);
+}
+
+.xfc-ds-demo__preview {
+  padding: var(--xfc-space-lg);
+  background: var(--xfc-bg);
+  min-height: 3rem;
+}
+
+.xfc-ds-demo__details {
+  border-top: 1px solid var(--xfc-border);
+}
+
+.xfc-ds-demo__summary {
+  list-style: none;
+  cursor: pointer;
+  padding: var(--xfc-space-sm) var(--xfc-space-lg);
+  font-size: var(--xfc-text-small);
+  font-weight: 600;
+  color: var(--xfc-accent);
+  background: var(--xfc-bg-elevated);
+  transition: background 0.15s ease;
+}
+
+.xfc-ds-demo__summary::-webkit-details-marker {
+  display: none;
+}
+
+.xfc-ds-demo__summary::before {
+  content: '';
+  display: inline-block;
+  width: 0.35em;
+  height: 0.35em;
+  margin-right: var(--xfc-space-sm);
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: rotate(-45deg);
+  vertical-align: 0.15em;
+  transition: transform 0.2s ease;
+}
+
+details[open] > .xfc-ds-demo__summary::before {
+  transform: rotate(45deg);
+  vertical-align: 0.05em;
+}
+
+.xfc-ds-demo__summary:hover {
+  background: var(--xfc-accent-soft);
+}
+
+.xfc-ds-demo__code {
+  padding: 0 var(--xfc-space-lg) var(--xfc-space-lg);
+  background: var(--xfc-bg-muted);
+}
+
+.xfc-ds-code-wrap--embedded .xfc-ds-code {
+  margin-top: var(--xfc-space-sm);
+}
+
+.xfc-ds-code-wrap .xfc-ds-code-caption {
+  margin-top: var(--xfc-space-sm);
+}
+
+.xfc-ds-code {
+  margin: var(--xfc-space-md) 0 0;
+  padding: var(--xfc-space-md) var(--xfc-space-lg);
+  font-family: var(--xfc-font-mono);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: var(--xfc-fg-label);
+  background: var(--xfc-bg-muted);
+  border: 1px solid var(--xfc-border);
+  border-radius: var(--xfc-radius-sm);
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.xfc-ds-code-caption {
+  margin: 0 0 var(--xfc-space-xs);
+  font-size: var(--xfc-text-small);
+  font-weight: 600;
+  color: var(--xfc-fg-muted);
+}
+
+.xfc-ds-paper-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--xfc-space-md);
+  align-items: flex-start;
+}
+
+@media (max-width: 840px) {
+  .xfc-ds {
+    flex-direction: column;
+    padding-inline: var(--xfc-space-md);
+  }
+
+  .xfc-ds-nav {
+    position: relative;
+    top: 0;
+    flex: none;
+    width: 100%;
+    max-height: none;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xfilecom/front-core",
-  "version": "0.2.29",
+  "version": "0.2.31",
   "description": "Shared design tokens, base CSS, and atomic React components (browser-only; no Nest dependency)",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -18,7 +18,12 @@
     "./overlays": {
       "types": "./dist/components/overlays/index.d.ts",
       "default": "./dist/components/overlays/index.js"
-    }
+    },
+    "./showcase": {
+      "types": "./dist/showcase/index.d.ts",
+      "default": "./dist/showcase/index.js"
+    },
+    "./showcase.css": "./dist/showcase.css"
   },
   "files": [
     "dist",
@@ -29,7 +34,7 @@
     "prepublishOnly": "npm run build",
     "build": "node scripts/write-version.js && npm run build:ts && npm run build:css",
     "build:ts": "tsc",
-    "build:css": "cp src/tokens.css dist/tokens.css && cp src/base.css dist/base.css"
+    "build:css": "cp src/tokens.css dist/tokens.css && cp src/base.css dist/base.css && cp src/showcase/showcase.css dist/showcase.css"
   },
   "peerDependencies": {
     "react": ">=18.0.0",