@xfilecom/front-core 0.2.32 → 0.2.33

package/README.md

@@ -46,6 +46,8 @@ import '@xfilecom/front-core/showcase.css';
 import { DesignSystemShowcase } from '@xfilecom/front-core/showcase';
 ```
 
+데모마다 **코드 보기**(TSX)와, 해당하는 경우 **CSS 보기**(`:root`·`base.css` 클래스·토큰 예시)를 접어서 볼 수 있습니다.
+
 ## 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.32";
+export declare const XFRAME_FRONT_CORE_VERSION: "0.2.33";

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.32";
+exports.XFRAME_FRONT_CORE_VERSION = "0.2.33";

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

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

package/dist/showcase/components/CodeBlock.js

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeBlock = CodeBlock;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /** 코드 스니펫 + 캡션 (문서형 갤러리) */
-function CodeBlock({ caption, code, className = '', variant = 'default', }) {
+function CodeBlock({ caption, code, className = '', variant = 'default', language, }) {
     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() })] }));
+    const preClass = ['xfc-ds-code', language === 'css' ? 'xfc-ds-code--css' : ''].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: preClass, children: code.trim() })] }));
 }

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

@@ -4,7 +4,10 @@ export type ShowcaseDemoProps = {
     description?: ReactNode;
     code: string;
     codeCaption?: string;
+    /** 있으면 두 번째 접이식 블록으로 CSS 스니펫 표시 */
+    css?: string;
+    cssCaption?: string;
     children: ReactNode;
 };
-/** 데모 프리뷰 + 접이식 코드 보기 */
-export declare function ShowcaseDemo({ title, description, code, codeCaption, children }: ShowcaseDemoProps): import("react/jsx-runtime").JSX.Element;
+/** 데모 프리뷰 + 접이식 코드/CSS 보기 */
+export declare function ShowcaseDemo({ title, description, code, codeCaption, css, cssCaption, children, }: ShowcaseDemoProps): import("react/jsx-runtime").JSX.Element;

package/dist/showcase/components/ShowcaseDemo.js

@@ -3,7 +3,7 @@ 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" }) })] })] }));
+/** 데모 프리뷰 + 접이식 코드/CSS 보기 */
+function ShowcaseDemo({ title, description, code, codeCaption, css, cssCaption, 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" }) })] }), css ? ((0, jsx_runtime_1.jsxs)("details", { className: "xfc-ds-demo__details", children: [(0, jsx_runtime_1.jsx)("summary", { className: "xfc-ds-demo__summary xfc-ds-demo__summary--css", children: "CSS \uBCF4\uAE30" }), (0, jsx_runtime_1.jsx)("div", { className: "xfc-ds-demo__code", children: (0, jsx_runtime_1.jsx)(CodeBlock_1.CodeBlock, { caption: cssCaption, code: css, variant: "embedded", language: "css" }) })] })) : null] }));
 }

package/dist/showcase/sections/ActionsSection.js

@@ -12,9 +12,28 @@ function ActionsSection() {
     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>
+<Badge tone="accent" onClick={…}>button</Badge>`, cssCaption: "base.css \u2014 tone \uC740 .xfc-badge--neutral | accent | success | warn | danger", css: `/* React <Badge tone="accent" /> → .xfc-badge.xfc-badge--accent */
+
+/* 커스텀 배지 (토큰만 공유) */
+.badge-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--xfc-space-xs);
+  padding: 0.15rem 0.5rem;
+  border-radius: var(--xfc-radius-full);
+  font-size: var(--xfc-text-small);
+  background: var(--xfc-accent-soft);
+  color: var(--xfc-accent);
+}`, 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="primary" disabled>disabled</Button>`, cssCaption: "base.css \u2014 variant \uB294 .xfc-btn--primary | secondary | outline | muted | ghost", css: `/* React variant → .xfc-btn--primary 등 (base.css 정의) */
+
+/* 테마에서 primary 만 강조 (example xfc-theme.css 패턴) */
+.xfc-btn--primary:hover:not(:disabled) {
+  box-shadow:
+    0 2px 0 color-mix(in srgb, #000 22%, transparent),
+    0 10px 28px color-mix(in srgb, var(--xfc-accent) 48%, transparent);
+}`, 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: () => {

package/dist/showcase/sections/OverviewSection.js

@@ -8,10 +8,35 @@ 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';
+// 그 다음 앱 테마·레이아웃 CSS (경로는 프로젝트마다 다름)`, cssCaption: "example \uD504\uB85C\uC81D\uD2B8: xfc-theme.css \uC5D0\uC11C :root\u00B7atoms \uB36E\uC5B4\uC4F0\uAE30 (base.css \uC774\uD6C4 \uB85C\uB4DC)", css: `/* web/shared/src/styles/xfc-theme.css — tokens·base 다음에 import */
+
+:root {
+  --xfc-accent: #143c38;
+  --xfc-accent-hover: #0f766e;
+  --xfc-accent-fg: #ffffff;
+  --xfc-radius-xs: 10px;
+  --xfc-focus-ring: 0 0 0 3px color-mix(in srgb, var(--xfc-accent) 30%, transparent);
+}
+
+/* base.css 의 .xfc-btn--primary 를 앱 브랜드에 맞게 보강 */
+.xfc-btn--primary {
+  border: 1px solid color-mix(in srgb, var(--xfc-accent-fg) 35%, transparent);
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--xfc-accent) 40%, transparent);
+}`, 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
+</Paper>`, cssCaption: "\uB3D9\uC77C\uD55C \uD1A0\uD070\uB9CC\uC73C\uB85C \uC21C\uC218 CSS \uD328\uB110\uC744 \uB9CC\uB4E4 \uB54C", css: `.surface-panel {
+  padding: var(--xfc-space-lg);
+  border-radius: var(--xfc-radius-md);
+  background: var(--xfc-bg-elevated);
+  box-shadow: var(--xfc-shadow-sm);
+  color: var(--xfc-fg);
+}
+
+.surface-panel--outlined {
+  box-shadow: none;
+  border: 1px solid var(--xfc-border);
+}`, 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.js

@@ -14,7 +14,10 @@ function SurfacesSection() {
   <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
+))}`, cssCaption: "Paper \uB294 \uB0B4\uBD80\uC801\uC73C\uB85C elevation \uC5D0 \uB9DE\uB294 \uADF8\uB9BC\uC790\u00B7\uBC30\uACBD \uD1A0\uD070\uC744 \uC501\uB2C8\uB2E4. \uC21C\uC218 CSS\uB85C \uB2E8\uACC4\uB97C \uB9DE\uCD9C \uB54C\uB294 shadow \uD1A0\uD070\uC744 \uC9C1\uC811.", css: `.elev-0 { box-shadow: none; background: var(--xfc-bg); }
+.elev-1 { box-shadow: var(--xfc-shadow-xs); background: var(--xfc-bg-elevated); }
+.elev-2 { box-shadow: var(--xfc-shadow-sm); }
+/* tokens.css 의 --xfc-shadow-md, --xfc-shadow-lg 로 3·4 단계 확장 */`, 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}

package/dist/showcase.css

@@ -177,6 +177,14 @@ details[open] > .xfc-ds-demo__summary::before {
   background: var(--xfc-accent-soft);
 }
 
+.xfc-ds-demo__summary--css {
+  color: var(--xfc-fg-label);
+}
+
+.xfc-ds-demo__summary--css:hover {
+  background: var(--xfc-bg-muted);
+}
+
 .xfc-ds-demo__code {
   padding: 0 var(--xfc-space-lg) var(--xfc-space-lg);
   background: var(--xfc-bg-muted);
@@ -205,6 +213,11 @@ details[open] > .xfc-ds-demo__summary::before {
   word-break: break-word;
 }
 
+.xfc-ds-code--css {
+  border-left: 3px solid color-mix(in srgb, var(--xfc-accent) 55%, var(--xfc-border));
+  background: color-mix(in srgb, var(--xfc-bg-muted) 92%, var(--xfc-accent-soft));
+}
+
 .xfc-ds-code-caption {
   margin: 0 0 var(--xfc-space-xs);
   font-size: var(--xfc-text-small);

package/package.json

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