@xfilecom/front-core 0.1.0 → 0.2.5

package/dist/base.css

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

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

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

package/dist/components/InlineErrorList.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineErrorList = InlineErrorList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/** 상단 고정 에러 배너 목록 (business-promotion `ErrorList` UI, MobX 없음). */
+function InlineErrorList({ errors, onDismiss, className = '' }) {
+    if (!errors.length)
+        return null;
+    const listCls = ['xfc-inline-error-list', className].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsx)("div", { className: listCls, "aria-live": "assertive", role: "alert", children: errors.map((e) => ((0, jsx_runtime_1.jsxs)("div", { className: "xfc-inline-error-item", children: [(0, jsx_runtime_1.jsx)("span", { children: e.message }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "xfc-inline-error-dismiss", onClick: () => onDismiss(e.id), "aria-label": "\uB2EB\uAE30", children: "\u00D7" })] }, e.id))) }));
+}

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

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

package/dist/components/LoadingOverlay.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingOverlay = LoadingOverlay;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/** 전역 로딩 오버레이 (business-promotion `GlobalIndicator` UI, 상태는 부모에서 주입). */
+function LoadingOverlay({ active, message, className = '' }) {
+    if (!active)
+        return null;
+    const root = ['xfc-loading-overlay', className].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: root, role: "status", "aria-live": "polite", "aria-busy": "true", children: [(0, jsx_runtime_1.jsx)("span", { className: "xfc-loading-overlay-spinner", "aria-hidden": true }), message ? (0, jsx_runtime_1.jsx)("p", { className: "xfc-loading-overlay-message", children: message }) : null] }));
+}

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