@idbrnd/design-system 4.1.1 → 4.2.0

package/README.md

@@ -1,6 +1,6 @@
 # @idbrnd/design-system
 
-![Version](https://img.shields.io/static/v1?label=version&message=4.1.1&color=blue&style=flat-square) <!-- x-release-please-version -->
+![Version](https://img.shields.io/static/v1?label=version&message=4.2.0&color=blue&style=flat-square) <!-- x-release-please-version -->
 ![React](https://img.shields.io/badge/React-18.3.1-61DAFB?style=flat-square&logo=react&logoColor=white)
 ![Vite](https://img.shields.io/badge/Vite-7.3.0-646CFF?style=flat-square&logo=vite&logoColor=white)
 ![TypeScript](https://img.shields.io/badge/TypeScript-5.9.3-3178C6?style=flat-square&logo=typescript&logoColor=white)
@@ -874,7 +874,7 @@ const [open, setOpen] = useState(false);
 | `navLeadingSlot`   | `ReactNode`                          | —          | 헤더 좌측 슬롯                                                    |
 | `navTrailingSlot`  | `ReactNode`                          | —          | 헤더 우측 슬롯 (닫기 버튼 왼쪽에 배치)                            |
 | `mainAction`       | `ModalAction`                        | —          | 메인 액션 — `FillButton`(primary/medium)으로 렌더링               |
-| `subAction`        | `ModalAction`                        | —          | 서브 액션 — `OutlineButton`(assistive/medium)으로 렌더링, 메인 액션 좌측 |
+| `subAction`        | `ModalAction`                        | —          | 서브 액션 — `OutlineButton`(secondary/medium)으로 렌더링, 메인 액션 좌측 |
 | `actionSlot`       | `ReactNode`                          | —          | 지정 시 `mainAction`/`subAction` 대신 액션 영역을 통째로 교체       |
 | `closeOnEsc`       | `boolean`                            | `true`     | ESC 키로 닫기 허용                                                |
 | `closeOnDimClick`  | `boolean`                            | `false`    | 딤 클릭으로 닫기 허용                                             |

package/dist/components/Feedback/Popup/Popup.d.ts

@@ -0,0 +1,3 @@
+import type { PopupProps } from "./Popup.types";
+declare function Popup({ open, onClose, platform, variant, heading, body, mainAction, subAction, actionSlot, closeOnEsc, closeOnDimClick, customStyle, className, }: PopupProps): import("react").ReactPortal | null;
+export default Popup;

package/dist/components/Feedback/Popup/Popup.types.d.ts

@@ -0,0 +1,52 @@
+import type { CSSProperties, ReactNode } from "react";
+export type PopupPlatform = "web" | "mobile";
+export type PopupVariant = "basic" | "text";
+export type PopupActionVariant = "primary" | "error";
+export interface PopupAction {
+    label: string;
+    onClick: () => void;
+    /**
+     * 메인 액션 색상 — 데이터 삭제 등 파괴적 행동 확인에는 `error`(빨강)를 사용.
+     * 서브 액션에는 적용되지 않음.
+     * @defaultValue 'primary'
+     */
+    variant?: PopupActionVariant;
+    loading?: boolean;
+    disabled?: boolean;
+}
+export interface PopupProps {
+    /** 팝업 표시 여부 (controlled) */
+    open: boolean;
+    /** ESC 키·딤 클릭으로 닫힐 때 호출 */
+    onClose: () => void;
+    /**
+     * 플랫폼별 크기 프리셋
+     * - `web`: 버튼 medium, basic 액션 우측 정렬
+     * - `mobile`: 버튼 large, basic 액션 동일 너비 분할
+     * @defaultValue 'web'
+     */
+    platform?: PopupPlatform;
+    /**
+     * 액션 버튼 형태
+     * - `basic`: FillButton(메인) + OutlineButton(서브)
+     * - `text`: TextButton, 우측 정렬
+     * @defaultValue 'basic'
+     */
+    variant?: PopupVariant;
+    /** 타이틀 — 문자열 또는 임의의 ReactNode. 미지정 시 미노출 (body와 둘 중 하나는 필수) */
+    heading?: ReactNode;
+    /** 본문 — 문자열 또는 임의의 ReactNode. 미지정 시 미노출 (heading과 둘 중 하나는 필수) */
+    body?: ReactNode;
+    /** 메인 액션 — 우측 배치, 시각적 위계 최상위 */
+    mainAction?: PopupAction;
+    /** 서브 액션 — 메인 액션 좌측 배치 */
+    subAction?: PopupAction;
+    /** 지정 시 mainAction/subAction 대신 액션 영역을 통째로 교체 */
+    actionSlot?: ReactNode;
+    /** ESC 키로 닫기 허용 @defaultValue true */
+    closeOnEsc?: boolean;
+    /** 딤 클릭으로 닫기 허용 @defaultValue false */
+    closeOnDimClick?: boolean;
+    customStyle?: CSSProperties;
+    className?: string;
+}

package/dist/components/Feedback/shared/overlayStack.d.ts

@@ -0,0 +1,3 @@
+export declare function lockBackgroundScroll(id: symbol): void;
+export declare function unlockBackgroundScroll(id: symbol): void;
+export declare function isTopOverlay(id: symbol): boolean;

package/dist/index.d.ts

@@ -31,6 +31,8 @@ export type { ToggleSwitchProps, ToggleSwitchSize, } from "./components/Control/
 export { default as EmptyState } from "./components/Feedback/EmptyState/EmptyState";
 export { default as Modal } from "./components/Feedback/Modal/Modal";
 export type { ModalProps, ModalSize, ModalType, ModalAction, } from "./components/Feedback/Modal/Modal.types";
+export { default as Popup } from "./components/Feedback/Popup/Popup";
+export type { PopupProps, PopupPlatform, PopupVariant, PopupAction, PopupActionVariant, } from "./components/Feedback/Popup/Popup.types";
 export { default as PushBadge } from "./components/Feedback/PushBadge/PushBadge";
 export { dismissToast, showToast } from "./components/Feedback/Toast/Toast";
 export { dismissSnackbar, showSnackbar, } from "./components/Feedback/Snackbar/Snackbar";