@xfilecom/front-core 0.1.0 → 0.2.2

package/dist/base.css

@@ -0,0 +1,294 @@
+/**
+ * Global base + atomic classes for @xfilecom/front-core components.
+ * Import after tokens.css.
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100dvh;
+  font-family: var(--xfc-font-sans);
+  font-size: var(--xfc-text-body);
+  line-height: var(--xfc-leading-normal);
+  color: var(--xfc-fg);
+  background: var(--xfc-bg);
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  color: var(--xfc-accent);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+}
+
+a:hover {
+  color: var(--xfc-accent-hover);
+}
+
+/* —— Typography atoms —— */
+
+.xfc-text {
+  margin: 0;
+  color: var(--xfc-fg);
+}
+
+.xfc-text--title {
+  font-size: var(--xfc-text-display);
+  font-weight: 700;
+  line-height: var(--xfc-leading-tight);
+  letter-spacing: -0.02em;
+}
+
+.xfc-text--appbar {
+  font-size: var(--xfc-text-appbar);
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--xfc-fg-strong);
+}
+
+.xfc-text--section {
+  font-size: var(--xfc-text-section);
+  font-weight: 700;
+  line-height: 1.3;
+  color: var(--xfc-fg-label);
+}
+
+.xfc-text--subtitle {
+  font-size: var(--xfc-text-section);
+  font-weight: 600;
+  line-height: var(--xfc-leading-tight);
+}
+
+.xfc-text--body {
+  font-size: var(--xfc-text-body);
+}
+
+.xfc-text--small {
+  font-size: var(--xfc-text-small);
+}
+
+.xfc-text--muted {
+  color: var(--xfc-fg-muted);
+}
+
+.xfc-text--accent {
+  color: var(--xfc-accent);
+}
+
+.xfc-text--label-block {
+  font-size: var(--xfc-text-body);
+  line-height: var(--xfc-leading-label);
+  color: var(--xfc-fg-label);
+}
+
+/* —— Layout —— */
+
+.xfc-stack {
+  display: flex;
+}
+
+.xfc-stack--column {
+  flex-direction: column;
+}
+
+.xfc-stack--row {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.xfc-stack--gap-none {
+  gap: 0;
+}
+.xfc-stack--gap-sm {
+  gap: var(--xfc-space-sm);
+}
+.xfc-stack--gap-md {
+  gap: var(--xfc-space-md);
+}
+.xfc-stack--gap-lg {
+  gap: var(--xfc-space-lg);
+}
+
+.xfc-stack--align-start {
+  align-items: flex-start;
+}
+.xfc-stack--align-center {
+  align-items: center;
+}
+.xfc-stack--align-stretch {
+  align-items: stretch;
+}
+
+.xfc-box {
+  display: block;
+}
+
+.xfc-box--p-sm {
+  padding: var(--xfc-space-sm);
+}
+.xfc-box--p-md {
+  padding: var(--xfc-space-md);
+}
+.xfc-box--p-lg {
+  padding: var(--xfc-space-lg);
+}
+
+.xfc-card {
+  background: var(--xfc-bg-elevated);
+  color: var(--xfc-fg);
+  border: 1px solid var(--xfc-border);
+  border-radius: var(--xfc-radius-md);
+  box-shadow: var(--xfc-card-shadow);
+}
+
+/* —— Buttons (피그마: 80×34 primary, radius 5) —— */
+
+.xfc-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--xfc-space-xs);
+  min-height: 34px;
+  padding: 0 var(--xfc-space-lg);
+  font: inherit;
+  font-size: var(--xfc-text-body);
+  font-weight: 700;
+  line-height: 1;
+  border-radius: var(--xfc-radius-xs);
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.xfc-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--xfc-focus-ring);
+}
+
+.xfc-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.xfc-btn--primary {
+  background: var(--xfc-accent);
+  color: var(--xfc-accent-fg);
+}
+
+.xfc-btn--primary:hover:not(:disabled) {
+  background: var(--xfc-accent-hover);
+}
+
+.xfc-btn--secondary {
+  background: var(--xfc-bg-elevated);
+  color: var(--xfc-fg);
+  border-color: var(--xfc-border-strong);
+}
+
+.xfc-btn--secondary:hover:not(:disabled) {
+  border-color: var(--xfc-fg-muted);
+}
+
+.xfc-btn--outline {
+  background: var(--xfc-bg-elevated);
+  color: var(--xfc-accent);
+  border-color: var(--xfc-accent);
+}
+
+.xfc-btn--outline:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--xfc-accent) 6%, transparent);
+}
+
+.xfc-btn--muted {
+  background: var(--xfc-bg-disabled);
+  color: var(--xfc-fg-muted);
+  border-color: transparent;
+}
+
+.xfc-btn--muted:hover:not(:disabled) {
+  filter: brightness(0.97);
+}
+
+.xfc-btn--ghost {
+  background: transparent;
+  color: var(--xfc-accent);
+}
+
+.xfc-btn--ghost:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--xfc-accent) 8%, transparent);
+}
+
+/* —— Inputs (로그인 필드 48px, border #D4D4D4) —— */
+
+.xfc-input {
+  display: block;
+  width: 100%;
+  min-height: 48px;
+  padding: 0 var(--xfc-space-lg);
+  font: inherit;
+  font-size: var(--xfc-text-input);
+  color: var(--xfc-fg);
+  background: var(--xfc-bg-elevated);
+  border: 1px solid var(--xfc-border-strong);
+  border-radius: var(--xfc-radius-xs);
+  box-shadow: var(--xfc-input-shadow);
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.xfc-input::placeholder {
+  color: var(--xfc-fg-placeholder);
+}
+
+.xfc-input:focus {
+  outline: none;
+  border-color: var(--xfc-accent);
+  box-shadow: var(--xfc-input-shadow), var(--xfc-focus-ring);
+}
+
+.xfc-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* —— Badges —— */
+
+.xfc-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px var(--xfc-space-sm);
+  font-size: var(--xfc-text-small);
+  font-weight: 600;
+  line-height: 1.3;
+  border-radius: var(--xfc-radius-xs);
+}
+
+.xfc-badge--neutral {
+  background: var(--xfc-border);
+  color: var(--xfc-fg);
+}
+
+.xfc-badge--accent {
+  background: color-mix(in srgb, var(--xfc-accent) 18%, transparent);
+  color: var(--xfc-accent-hover);
+}
+
+.xfc-badge--success {
+  background: var(--xfc-success-bg);
+  color: var(--xfc-success);
+}
+
+.xfc-badge--danger {
+  background: color-mix(in srgb, var(--xfc-danger) 15%, transparent);
+  color: var(--xfc-danger);
+}

package/dist/components/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/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/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/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/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/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/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/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/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/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/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/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/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/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/index.d.ts

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

package/dist/components/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = exports.Stack = exports.Input = exports.Card = exports.Button = exports.Box = exports.Badge = void 0;
+var Badge_1 = require("./Badge");
+Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return Badge_1.Badge; } });
+var Box_1 = require("./Box");
+Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return Box_1.Box; } });
+var Button_1 = require("./Button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
+var Card_1 = require("./Card");
+Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.Card; } });
+var Input_1 = require("./Input");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });
+var Stack_1 = require("./Stack");
+Object.defineProperty(exports, "Stack", { enumerable: true, get: function () { return Stack_1.Stack; } });
+var Text_1 = require("./Text");
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });

package/dist/index.d.ts

@@ -1,12 +1,38 @@
 /**
- * @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 (앱 엔트리에서 순서대로):
+ *   import '@xfilecom/front-core/tokens.css';
+ *   import '@xfilecom/front-core/base.css';
  */
-export declare const XFRAME_FRONT_CORE_VERSION = "0.1.0";
+export declare const XFRAME_FRONT_CORE_VERSION = "0.2.1";
+/** 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";
 };
+export { Badge, Box, Button, Card, Input, Stack, Text, type BadgeProps, type BoxProps, type ButtonProps, type CardProps, type InputProps, type StackProps, type TextProps, type TextVariant, } from './components';

package/dist/index.js

@@ -1,15 +1,48 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.tokenVars = exports.XFRAME_FRONT_CORE_VERSION = void 0;
+exports.Text = exports.Stack = exports.Input = 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 (앱 엔트리에서 순서대로):
+ *   import '@xfilecom/front-core/tokens.css';
+ *   import '@xfilecom/front-core/base.css';
  */
-exports.XFRAME_FRONT_CORE_VERSION = '0.1.0';
+exports.XFRAME_FRONT_CORE_VERSION = '0.2.1';
+/** 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',
 };
+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, "Input", { enumerable: true, get: function () { return components_1.Input; } });
+Object.defineProperty(exports, "Stack", { enumerable: true, get: function () { return components_1.Stack; } });
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return components_1.Text; } });

package/dist/tokens.css

@@ -1,7 +1,75 @@
+/**
+ * Design tokens — `xframe/html/html` (business-promotion Figma export) 기준.
+ * 참고: main.html, navi_default.html, login_01.html 등 인라인 스타일에서 추출.
+ */
 :root {
-  --xfc-bg: #0f1419;
-  --xfc-fg: #e7ecf3;
-  --xfc-accent: #3b82f6;
-  --xfc-radius-sm: 6px;
+  /* Surfaces */
+  --xfc-bg: #ffffff;
+  --xfc-bg-elevated: #ffffff;
+  --xfc-bg-muted: #f8f8f8;
+  --xfc-bg-disabled: #eaeaea;
+
+  /* Text */
+  --xfc-fg: #1c252f;
+  --xfc-fg-strong: #000000;
+  --xfc-fg-label: #1d2125;
+  --xfc-fg-muted: #777777;
+  --xfc-fg-placeholder: #c7c7c7;
+  --xfc-fg-icon: #464c50;
+
+  /* Lines */
+  --xfc-border: #ededed;
+  --xfc-border-strong: #d4d4d4;
+  --xfc-border-header: #e9e8e6;
+
+  /* Brand */
+  --xfc-accent: #2a5bff;
+  --xfc-accent-hover: #2248e6;
+  --xfc-accent-fg: #ffffff;
+
+  /* Status */
+  --xfc-danger: #f43b3c;
+  --xfc-success: #059669;
+  --xfc-success-bg: #d1fae5;
+  --xfc-warning: #d97706;
+  --xfc-warning-bg: #fef3c7;
+
+  /* Effects */
+  --xfc-input-shadow: 0 7px 64px rgba(0, 0, 0, 0.07);
+  --xfc-card-shadow: 0 1px 2px rgba(28, 37, 47, 0.06);
+
+  /* Radius (px 그대로 — 디자인 5 / 10 / pill) */
+  --xfc-radius-xs: 5px;
+  --xfc-radius-sm: 5px;
+  --xfc-radius-md: 10px;
+  --xfc-radius-lg: 10px;
+  --xfc-radius-full: 9999px;
+
+  /* Space */
+  --xfc-space-xs: 4px;
+  --xfc-space-sm: 8px;
   --xfc-space-md: 12px;
+  --xfc-space-lg: 16px;
+  --xfc-space-xl: 24px;
+  --xfc-space-2xl: 32px;
+
+  /* Typography — Pretendard Variable (+ 로고용 Poppins 는 앱에서 별도) */
+  --xfc-font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
+    Roboto, 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
+  --xfc-font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, monospace;
+
+  --xfc-text-display: 2.5rem;
+  --xfc-text-appbar: 1.375rem;
+  --xfc-text-section: 1.125rem;
+  --xfc-text-body: 1rem;
+  --xfc-text-small: 0.875rem;
+  --xfc-text-input: 0.9375rem;
+
+  --xfc-leading-tight: 1.25;
+  --xfc-leading-normal: 1.5;
+  --xfc-leading-label: 22px;
+  --xfc-leading-menu: 50px;
+
+  /* Focus */
+  --xfc-focus-ring: 0 0 0 3px color-mix(in srgb, var(--xfc-accent) 35%, transparent);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xfilecom/front-core",
-  "version": "0.1.0",
-  "description": "Shared React tokens (browser-only; no Nest dependency)",
+  "version": "0.2.2",
+  "description": "Shared design tokens, base CSS, and atomic React components (browser-only; no Nest dependency)",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -9,22 +9,29 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./tokens.css": "./dist/tokens.css"
+    "./tokens.css": "./dist/tokens.css",
+    "./base.css": "./dist/base.css"
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "prepublishOnly": "npm run build",
     "build": "npm run build:ts && npm run build:css",
     "build:ts": "tsc",
-    "build:css": "cp src/tokens.css dist/tokens.css"
+    "build:css": "cp src/tokens.css dist/tokens.css && cp src/base.css dist/base.css"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "peerDependenciesMeta": {
-    "react": { "optional": true },
-    "react-dom": { "optional": true }
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@types/react": "^18.2.0",