@xfilecom/front-core 0.2.14 → 0.2.15

package/dist/base.css

@@ -516,3 +516,156 @@ a:hover {
   box-shadow: var(--xfc-focus-ring);
   border-radius: var(--xfc-radius-xs);
 }
+
+/* —— Dialog / Bottom sheet (toast·inline error 위, loading 과 겹치면 이쪽이 위) —— */
+
+@keyframes xfc-dialog-backdrop-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes xfc-dialog-panel-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes xfc-bottom-sheet-in {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.xfc-dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 10050;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--xfc-space-lg);
+  box-sizing: border-box;
+  background: color-mix(in srgb, var(--xfc-fg) 42%, transparent);
+  animation: xfc-dialog-backdrop-in 0.18s ease-out;
+}
+
+.xfc-dialog-backdrop--bottom {
+  align-items: flex-end;
+  padding: 0;
+}
+
+.xfc-dialog-panel {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: min(440px, 100%);
+  max-height: min(88dvh, 720px);
+  overflow: auto;
+  box-sizing: border-box;
+  padding: var(--xfc-space-xl);
+  border-radius: var(--xfc-radius-md);
+  background: var(--xfc-bg-elevated);
+  color: var(--xfc-fg);
+  border: 1px solid var(--xfc-border);
+  box-shadow:
+    0 24px 48px color-mix(in srgb, var(--xfc-fg) 12%, transparent),
+    var(--xfc-card-shadow);
+  font-family: var(--xfc-font-sans);
+  animation: xfc-dialog-panel-in 0.22s ease-out;
+}
+
+.xfc-dialog-panel__title {
+  font-size: var(--xfc-text-section);
+  font-weight: 700;
+  line-height: var(--xfc-leading-tight);
+  margin: 0 0 var(--xfc-space-md);
+  color: var(--xfc-fg-strong);
+}
+
+.xfc-dialog-panel__description {
+  font-size: var(--xfc-text-body);
+  line-height: var(--xfc-leading-normal);
+  margin: 0 0 var(--xfc-space-lg);
+  color: var(--xfc-fg);
+}
+
+.xfc-dialog-panel__body {
+  min-width: 0;
+}
+
+.xfc-dialog-footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--xfc-space-sm);
+  margin-top: var(--xfc-space-lg);
+}
+
+.xfc-confirm-dialog .xfc-dialog-panel__description:last-of-type {
+  margin-bottom: 0;
+}
+
+.xfc-confirm-dialog .xfc-dialog-footer {
+  margin-top: var(--xfc-space-xl);
+}
+
+button.xfc-btn.xfc-btn--primary.xfc-confirm-dialog__confirm--danger {
+  background: var(--xfc-danger);
+  color: var(--xfc-accent-fg);
+  border-color: transparent;
+}
+
+button.xfc-btn.xfc-btn--primary.xfc-confirm-dialog__confirm--danger:hover:not(:disabled) {
+  filter: brightness(0.94);
+}
+
+.xfc-bottom-sheet-panel {
+  width: 100%;
+  max-width: 100%;
+  max-height: min(92dvh, 900px);
+  margin: 0;
+  padding: var(--xfc-space-md) var(--xfc-space-xl) calc(var(--xfc-space-xl) + env(safe-area-inset-bottom, 0px));
+  border-radius: var(--xfc-radius-lg) var(--xfc-radius-lg) 0 0;
+  animation: xfc-bottom-sheet-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.xfc-bottom-sheet-handle {
+  width: 40px;
+  height: 4px;
+  margin: 0 auto var(--xfc-space-md);
+  border-radius: var(--xfc-radius-full);
+  background: var(--xfc-border-strong);
+  flex-shrink: 0;
+}
+
+.xfc-bottom-sheet-panel__title {
+  font-size: var(--xfc-text-section);
+  font-weight: 700;
+  margin: 0 0 var(--xfc-space-md);
+  color: var(--xfc-fg-strong);
+}
+
+.xfc-bottom-sheet-panel__body {
+  min-width: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xfc-dialog-backdrop,
+  .xfc-dialog-panel,
+  .xfc-bottom-sheet-panel {
+    animation: none;
+  }
+}

package/dist/components/index.d.ts

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

package/dist/components/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./atoms"), exports);
+__exportStar(require("./overlays"), exports);

package/dist/components/overlays/BottomSheet.d.ts

@@ -0,0 +1,14 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type BottomSheetProps = {
+    open: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+    title?: ReactNode;
+    /** 상단 드래그 핸들 막대(시각용) */
+    showHandle?: boolean;
+    closeOnBackdropClick?: boolean;
+    closeOnEscape?: boolean;
+    backdropClassName?: string;
+    panelClassName?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'>;
+export declare function BottomSheet({ open, onOpenChange, children, title, showHandle, closeOnBackdropClick, closeOnEscape, backdropClassName, panelClassName, className, onMouseDown: onPanelMouseDown, ...panelRest }: BottomSheetProps): import("react").ReactPortal | null;

package/dist/components/overlays/BottomSheet.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BottomSheet = BottomSheet;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const overlayHooks_1 = require("./overlayHooks");
+function BottomSheet({ open, onOpenChange, children, title, showHandle = true, closeOnBackdropClick = true, closeOnEscape = true, backdropClassName = '', panelClassName = '', className = '', onMouseDown: onPanelMouseDown, ...panelRest }) {
+    const titleId = (0, react_1.useId)();
+    const panelRef = (0, react_1.useRef)(null);
+    const prevFocusRef = (0, react_1.useRef)(null);
+    const requestClose = (0, react_1.useCallback)(() => {
+        onOpenChange?.(false);
+    }, [onOpenChange]);
+    (0, overlayHooks_1.useBodyScrollLock)(open);
+    (0, overlayHooks_1.useEscapeKey)(open && closeOnEscape, requestClose);
+    (0, react_1.useEffect)(() => {
+        if (!open || typeof document === 'undefined')
+            return;
+        prevFocusRef.current = document.activeElement;
+        const t = window.setTimeout(() => {
+            panelRef.current?.focus();
+        }, 0);
+        return () => {
+            window.clearTimeout(t);
+            prevFocusRef.current?.focus?.();
+            prevFocusRef.current = null;
+        };
+    }, [open]);
+    if (!open || typeof document === 'undefined')
+        return null;
+    const backdropCls = ['xfc-dialog-backdrop', 'xfc-dialog-backdrop--bottom', backdropClassName]
+        .filter(Boolean)
+        .join(' ');
+    const panelCls = [
+        'xfc-dialog-panel',
+        'xfc-bottom-sheet-panel',
+        panelClassName,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: backdropCls, role: "presentation", onMouseDown: (e) => {
+            if (e.target === e.currentTarget && closeOnBackdropClick)
+                requestClose();
+        }, children: (0, jsx_runtime_1.jsxs)("div", { ref: panelRef, ...panelRest, className: panelCls, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, tabIndex: -1, onMouseDown: (e) => {
+                onPanelMouseDown?.(e);
+                e.stopPropagation();
+            }, children: [showHandle ? (0, jsx_runtime_1.jsx)("div", { className: "xfc-bottom-sheet-handle", "aria-hidden": true }) : null, title ? ((0, jsx_runtime_1.jsx)("div", { id: titleId, className: "xfc-bottom-sheet-panel__title", children: title })) : null, (0, jsx_runtime_1.jsx)("div", { className: "xfc-bottom-sheet-panel__body", children: children })] }) }), document.body);
+}

package/dist/components/overlays/ConfirmDialog.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+export type ConfirmDialogProps = {
+    open: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    title?: ReactNode;
+    message?: ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** true 이면 확인 버튼을 위험 액션 스타일로 */
+    destructive?: boolean;
+    confirmLoading?: boolean;
+    closeOnBackdropClick?: boolean;
+    panelClassName?: string;
+};
+export declare function ConfirmDialog({ open, onOpenChange, onConfirm, onCancel, title, message, confirmLabel, cancelLabel, destructive, confirmLoading, closeOnBackdropClick, panelClassName, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/overlays/ConfirmDialog.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfirmDialog = ConfirmDialog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = require("../atoms/Button");
+const Dialog_1 = require("./Dialog");
+function ConfirmDialog({ open, onOpenChange, onConfirm, onCancel, title, message, confirmLabel = '확인', cancelLabel = '취소', destructive = false, confirmLoading = false, closeOnBackdropClick = true, panelClassName = '', }) {
+    const handleCancel = () => {
+        onCancel?.();
+        onOpenChange?.(false);
+    };
+    const handleConfirm = () => {
+        if (confirmLoading)
+            return;
+        onConfirm?.();
+    };
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { open: open, onOpenChange: onOpenChange, title: title, description: message, closeOnBackdropClick: closeOnBackdropClick, panelClassName: ['xfc-confirm-dialog', panelClassName].filter(Boolean).join(' '), children: (0, jsx_runtime_1.jsxs)("div", { className: "xfc-dialog-footer", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", variant: "muted", onClick: handleCancel, disabled: confirmLoading, children: cancelLabel }), (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", variant: "primary", className: destructive ? 'xfc-confirm-dialog__confirm--danger' : '', onClick: handleConfirm, disabled: confirmLoading, "aria-busy": confirmLoading, children: confirmLoading ? '…' : confirmLabel })] }) }));
+}

package/dist/components/overlays/Dialog.d.ts

@@ -0,0 +1,15 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type DialogProps = {
+    open: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+    /** 보이는 제목(패널 상단). 스크린 리더용 id 자동 연결 */
+    title?: ReactNode;
+    /** 부가 설명 */
+    description?: ReactNode;
+    closeOnBackdropClick?: boolean;
+    closeOnEscape?: boolean;
+    backdropClassName?: string;
+    panelClassName?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'>;
+export declare function Dialog({ open, onOpenChange, children, title, description, closeOnBackdropClick, closeOnEscape, backdropClassName, panelClassName, className, onMouseDown: onPanelMouseDown, ...panelRest }: DialogProps): import("react").ReactPortal | null;

package/dist/components/overlays/Dialog.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dialog = Dialog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const overlayHooks_1 = require("./overlayHooks");
+function Dialog({ open, onOpenChange, children, title, description, closeOnBackdropClick = true, closeOnEscape = true, backdropClassName = '', panelClassName = '', className = '', onMouseDown: onPanelMouseDown, ...panelRest }) {
+    const titleId = (0, react_1.useId)();
+    const descriptionId = (0, react_1.useId)();
+    const panelRef = (0, react_1.useRef)(null);
+    const prevFocusRef = (0, react_1.useRef)(null);
+    const requestClose = (0, react_1.useCallback)(() => {
+        onOpenChange?.(false);
+    }, [onOpenChange]);
+    (0, overlayHooks_1.useBodyScrollLock)(open);
+    (0, overlayHooks_1.useEscapeKey)(open && closeOnEscape, requestClose);
+    (0, react_1.useEffect)(() => {
+        if (!open || typeof document === 'undefined')
+            return;
+        prevFocusRef.current = document.activeElement;
+        const t = window.setTimeout(() => {
+            panelRef.current?.focus();
+        }, 0);
+        return () => {
+            window.clearTimeout(t);
+            prevFocusRef.current?.focus?.();
+            prevFocusRef.current = null;
+        };
+    }, [open]);
+    if (!open || typeof document === 'undefined')
+        return null;
+    const backdropCls = ['xfc-dialog-backdrop', backdropClassName].filter(Boolean).join(' ');
+    const panelCls = ['xfc-dialog-panel', panelClassName, className].filter(Boolean).join(' ');
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: backdropCls, role: "presentation", onMouseDown: (e) => {
+            if (e.target === e.currentTarget && closeOnBackdropClick)
+                requestClose();
+        }, children: (0, jsx_runtime_1.jsxs)("div", { ref: panelRef, ...panelRest, className: panelCls, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, "aria-describedby": description ? descriptionId : undefined, tabIndex: -1, onMouseDown: (e) => {
+                onPanelMouseDown?.(e);
+                e.stopPropagation();
+            }, children: [title ? ((0, jsx_runtime_1.jsx)("div", { id: titleId, className: "xfc-dialog-panel__title", children: title })) : null, description ? ((0, jsx_runtime_1.jsx)("div", { id: descriptionId, className: "xfc-dialog-panel__description", children: description })) : null, (0, jsx_runtime_1.jsx)("div", { className: "xfc-dialog-panel__body", children: children })] }) }), document.body);
+}

package/dist/components/overlays/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 오버레이·다이얼로그 — atoms 위 레벨. `base.css` 의 `.xfc-dialog-*` / `.xfc-bottom-sheet-*` 와 짝.
+ * 패키지 루트 또는 `@xfilecom/front-core/overlays`.
+ */
+export { BottomSheet, type BottomSheetProps } from './BottomSheet';
+export { ConfirmDialog, type ConfirmDialogProps } from './ConfirmDialog';
+export { Dialog, type DialogProps } from './Dialog';

package/dist/components/overlays/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dialog = exports.ConfirmDialog = exports.BottomSheet = void 0;
+/**
+ * 오버레이·다이얼로그 — atoms 위 레벨. `base.css` 의 `.xfc-dialog-*` / `.xfc-bottom-sheet-*` 와 짝.
+ * 패키지 루트 또는 `@xfilecom/front-core/overlays`.
+ */
+var BottomSheet_1 = require("./BottomSheet");
+Object.defineProperty(exports, "BottomSheet", { enumerable: true, get: function () { return BottomSheet_1.BottomSheet; } });
+var ConfirmDialog_1 = require("./ConfirmDialog");
+Object.defineProperty(exports, "ConfirmDialog", { enumerable: true, get: function () { return ConfirmDialog_1.ConfirmDialog; } });
+var Dialog_1 = require("./Dialog");
+Object.defineProperty(exports, "Dialog", { enumerable: true, get: function () { return Dialog_1.Dialog; } });

package/dist/components/overlays/overlayHooks.d.ts

@@ -0,0 +1,2 @@
+export declare function useBodyScrollLock(active: boolean): void;
+export declare function useEscapeKey(active: boolean, onEscape: () => void): void;

package/dist/components/overlays/overlayHooks.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBodyScrollLock = useBodyScrollLock;
+exports.useEscapeKey = useEscapeKey;
+const react_1 = require("react");
+function useBodyScrollLock(active) {
+    (0, react_1.useEffect)(() => {
+        if (!active || typeof document === 'undefined')
+            return;
+        const { body } = document;
+        const prev = body.style.overflow;
+        body.style.overflow = 'hidden';
+        return () => {
+            body.style.overflow = prev;
+        };
+    }, [active]);
+}
+function useEscapeKey(active, onEscape) {
+    (0, react_1.useEffect)(() => {
+        if (!active || typeof document === 'undefined')
+            return;
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                onEscape();
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [active, onEscape]);
+}

package/dist/index.d.ts

@@ -7,7 +7,7 @@
  *   import '<shared>/styles/xfc-theme.css';   // :root + .xfc-* (base 이후, 선택)
  *   import '<shared>/styles/app.css';         // 레이아웃 + 추가 오버라이드
  *
- * React atoms: 패키지 루트 또는 `@xfilecom/front-core/atoms`.
+ * React: atoms `@xfilecom/front-core/atoms`, 오버레이 `@xfilecom/front-core/overlays` 또는 루트 export.
  */
 export declare const XFRAME_FRONT_CORE_VERSION = "0.2.4";
 /** CSS 커스텀 프로퍼티 이름 (-- 제외 시 var()와 함께 사용) */
@@ -43,4 +43,4 @@ export declare const tokenVars: {
     readonly toastWarnBg: "--xfc-toast-warn-bg";
     readonly toastErrorBg: "--xfc-toast-error-bg";
 };
-export { Badge, Box, Button, Card, InlineErrorList, Input, LoadingOverlay, Stack, Text, Toast, ToastList, ToastSeverityIcon, type BadgeProps, type BoxProps, type ButtonProps, type CardProps, type InlineErrorEntry, type InlineErrorListProps, type InputProps, type LoadingOverlayProps, type StackProps, type TextProps, type TextVariant, type ToastEntry, type ToastListProps, type ToastProps, type ToastSeverity, } from './components';
+export { Badge, BottomSheet, Box, Button, Card, ConfirmDialog, Dialog, InlineErrorList, Input, LoadingOverlay, Stack, Text, Toast, ToastList, ToastSeverityIcon, type BadgeProps, type BottomSheetProps, type BoxProps, type ButtonProps, type CardProps, type ConfirmDialogProps, type DialogProps, type InlineErrorEntry, type InlineErrorListProps, type InputProps, type LoadingOverlayProps, type StackProps, type TextProps, type TextVariant, type ToastEntry, type ToastListProps, type ToastProps, type ToastSeverity, } from './components';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToastSeverityIcon = exports.ToastList = exports.Toast = exports.Text = exports.Stack = exports.LoadingOverlay = exports.Input = exports.InlineErrorList = exports.Card = exports.Button = exports.Box = exports.Badge = exports.tokenVars = exports.XFRAME_FRONT_CORE_VERSION = void 0;
+exports.ToastSeverityIcon = exports.ToastList = exports.Toast = exports.Text = exports.Stack = exports.LoadingOverlay = exports.Input = exports.InlineErrorList = exports.Dialog = exports.ConfirmDialog = exports.Card = exports.Button = exports.Box = exports.BottomSheet = exports.Badge = exports.tokenVars = exports.XFRAME_FRONT_CORE_VERSION = void 0;
 /**
  * @xfilecom/front-core — design tokens + atomic React components (browser-only).
  *
@@ -10,7 +10,7 @@ exports.ToastSeverityIcon = exports.ToastList = exports.Toast = exports.Text = e
  *   import '<shared>/styles/xfc-theme.css';   // :root + .xfc-* (base 이후, 선택)
  *   import '<shared>/styles/app.css';         // 레이아웃 + 추가 오버라이드
  *
- * React atoms: 패키지 루트 또는 `@xfilecom/front-core/atoms`.
+ * React: atoms `@xfilecom/front-core/atoms`, 오버레이 `@xfilecom/front-core/overlays` 또는 루트 export.
  */
 exports.XFRAME_FRONT_CORE_VERSION = '0.2.4';
 /** CSS 커스텀 프로퍼티 이름 (-- 제외 시 var()와 함께 사용) */
@@ -48,9 +48,12 @@ exports.tokenVars = {
 };
 var components_1 = require("./components");
 Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return components_1.Badge; } });
+Object.defineProperty(exports, "BottomSheet", { enumerable: true, get: function () { return components_1.BottomSheet; } });
 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, "ConfirmDialog", { enumerable: true, get: function () { return components_1.ConfirmDialog; } });
+Object.defineProperty(exports, "Dialog", { enumerable: true, get: function () { return components_1.Dialog; } });
 Object.defineProperty(exports, "InlineErrorList", { enumerable: true, get: function () { return components_1.InlineErrorList; } });
 Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return components_1.Input; } });
 Object.defineProperty(exports, "LoadingOverlay", { enumerable: true, get: function () { return components_1.LoadingOverlay; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xfilecom/front-core",
-  "version": "0.2.14",
+  "version": "0.2.15",
   "description": "Shared design tokens, base CSS, and atomic React components (browser-only; no Nest dependency)",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -14,6 +14,10 @@
     "./atoms": {
       "types": "./dist/components/atoms/index.d.ts",
       "default": "./dist/components/atoms/index.js"
+    },
+    "./overlays": {
+      "types": "./dist/components/overlays/index.d.ts",
+      "default": "./dist/components/overlays/index.js"
     }
   },
   "files": [
@@ -39,6 +43,7 @@
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "typescript": "^5.0.0"
   },
   "publishConfig": {