@loword/loword-design-system 0.0.10 → 0.0.13

package/dist/components/LDMenuBar/LDMenuBar.d.ts

@@ -1,21 +1,35 @@
-import type { ComponentProps } from 'react';
-import MenuBarBase from './MenuBarBase.js';
-declare const LDMenuBar: {
-    Root: ({ className, ...props }: ComponentProps<typeof MenuBarBase.Root>) => import("react/jsx-runtime").JSX.Element;
-    Logo: ({ className, ...props }: ComponentProps<typeof MenuBarBase.Logo>) => import("react/jsx-runtime").JSX.Element;
-    Nav: ({ className, ...props }: ComponentProps<typeof MenuBarBase.Nav>) => import("react/jsx-runtime").JSX.Element;
-    Item: ({ className, ...props }: ComponentProps<typeof MenuBarBase.Item>) => import("react/jsx-runtime").JSX.Element;
-    Trigger: ({ className, ...props }: ComponentProps<typeof MenuBarBase.Trigger>) => import("react/jsx-runtime").JSX.Element;
-    Content: {
-        ({ className, ...props }: ComponentProps<typeof MenuBarBase.Content>): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    MegaContent: {
-        ({ className, ...props }: ComponentProps<typeof MenuBarBase.Content>): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Actions: ({ className, ...props }: ComponentProps<typeof MenuBarBase.Actions>) => import("react/jsx-runtime").JSX.Element;
-    Separator: ({ className, }: ComponentProps<typeof MenuBarBase.Separator>) => import("react/jsx-runtime").JSX.Element;
-};
+import type { ElementType, ReactNode } from 'react';
+/** 메뉴바 항목 */
+export interface LDMenuBarItem {
+    /** 항목 구분 값 (열림 상태 식별) */
+    value: string;
+    /** Trigger에 표시할 라벨/아이콘 */
+    label: ReactNode;
+    /** 드롭다운 내용. 있으면 드롭다운 항목, 없으면 단순 링크가 된다 */
+    content?: ReactNode;
+    /** content를 헤더 전체 폭(mega) 패널 + 딤으로 표시 */
+    mega?: boolean;
+    /** 단순 링크일 때 Trigger 렌더 엘리먼트 (라우터 Link 주입용, 기본 'button') */
+    as?: ElementType;
+    /** 단순 링크 href */
+    href?: string;
+}
+export interface LDMenuBarProps {
+    /** 메뉴바 항목 목록 */
+    items: LDMenuBarItem[];
+    /** 드롭다운 열림 트리거 방식. 기본 'hover' */
+    trigger?: 'hover' | 'click';
+    /** 좌측 로고 슬롯 */
+    logo?: ReactNode;
+    /** 우측 액션 슬롯 (알림·아바타 등) */
+    actions?: ReactNode;
+    /** Root에 적용할 추가 className */
+    className?: string;
+}
+/**
+ * 가로 헤더형 메뉴바. items로 네비게이션을 구성하고 logo/actions 슬롯에 임의 콘텐츠를 주입한다.
+ * item.content가 있으면 드롭다운, 없으면 단순 링크. item.mega면 헤더 전체 폭 패널로 열린다.
+ */
+declare const LDMenuBar: ({ items, trigger, logo, actions, className, }: LDMenuBarProps) => import("react/jsx-runtime").JSX.Element;
 export default LDMenuBar;
 //# sourceMappingURL=LDMenuBar.d.ts.map

package/dist/components/LDMenuBar/LDMenuBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LDMenuBar.d.ts","sourceRoot":"","sources":["../../../src/components/LDMenuBar/LDMenuBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,WAAW,MAAM,eAAe,CAAC;AAkHxC,QAAA,MAAM,SAAS;oCA1GZ,cAAc,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC;oCAcvC,cAAc,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC;mCAUvC,cAAc,CAAC,OAAO,WAAW,CAAC,GAAG,CAAC;oCAUtC,cAAc,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC;uCAOvC,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC;;kCAgB1C,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC;;;;kCAgB1C,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC;;;uCAoB1C,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC;gCAS1C,cAAc,CAAC,OAAO,WAAW,CAAC,SAAS,CAAC;CAc9C,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"LDMenuBar.d.ts","sourceRoot":"","sources":["../../../src/components/LDMenuBar/LDMenuBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOpD,aAAa;AACb,MAAM,WAAW,aAAa;IAC5B,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yCAAyC;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2DAA2D;IAC3D,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,gBAAgB;IAChB,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,iCAAiC;IACjC,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC5B,eAAe;IACf,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsBD;;;GAGG;AACH,QAAA,MAAM,SAAS,GAAI,+CAMhB,cAAc,4CAuDhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/LDMenuBar/LDMenuBar.js

@@ -1,33 +1,19 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from '../../utils/cn.js';
 import MenuBarBase from './MenuBarBase.js';
-// 스타일 래퍼: Base 골격에 디자인 토큰 클래스를 입혀 재노출.
-// className을 주면 cn으로 머지되어 소비측 오버라이드 우선.
-const Root = ({ className, ...props }) => (_jsx(MenuBarBase.Root, { className: cn('relative flex items-center justify-between w-full h-[64px] min-h-[64px]', 'px-md gap-10 bg-white border-b border-mono100 sticky top-0 z-50', className), ...props }));
-const Logo = ({ className, ...props }) => (_jsx(MenuBarBase.Logo, { className: cn('flex items-center shrink-0', className), ...props }));
-const Nav = ({ className, ...props }) => (_jsx(MenuBarBase.Nav, { className: cn('flex flex-1 items-center justify-start gap-xs', className), ...props }));
-const Item = ({ className, ...props }) => (_jsx(MenuBarBase.Item, { className: className, ...props }));
-const Trigger = ({ className, ...props }) => (_jsx(MenuBarBase.Trigger, { className: cn('flex items-center gap-xs px-sm py-xs rounded-[5px] cursor-pointer', 'display16 bold text-mono700 hover:bg-mono100 hover:text-mono900 ld-transition', 'aria-expanded:bg-tintBlue aria-expanded:text-blue400', className), ...props }));
+const TRIGGER_CLASS = cn('flex items-center gap-xs px-sm py-xs rounded-[5px] cursor-pointer', 'display16 bold text-mono700 hover:bg-mono100 hover:text-mono900 ld-transition', 'aria-expanded:bg-tintBlue aria-expanded:text-blue400');
 // item 모드: 항목 바로 아래 작은 드롭다운
-const Content = ({ className, ...props }) => (_jsx(MenuBarBase.Content, { className: cn('absolute top-full left-0 mt-xs min-w-[180px] z-50', 'flex flex-col gap-xs p-xs rounded-[8px] bg-white border border-mono100 shadow-lg', className), ...props }));
-// mega 모드: 헤더 전체 폭 패널 + 뒤쪽 딤(클릭 시 닫기)
-// fixed로 부모 li(relative)를 벗어나 뷰포트(=헤더) 전체 폭을 차지. top-16 = 헤더 높이 64px.
-const MegaContent = ({ className, ...props }) => (_jsx(MenuBarBase.Content, { backdrop: true, backdropClassName: "fixed left-0 right-0 top-16 bottom-0 z-40 bg-black/40", className: cn('fixed left-0 right-0 top-16 z-50', 'p-lg bg-white border-b border-mono100 shadow-lg', className), ...props }));
-// Item의 드롭다운 자동 판정이 래퍼를 통과하도록 Base와 동일한 displayName 부여
-Content.displayName = MenuBarBase.Content.displayName;
-MegaContent.displayName = MenuBarBase.Content.displayName;
-const Actions = ({ className, ...props }) => (_jsx(MenuBarBase.Actions, { className: cn('flex items-center gap-sm shrink-0', className), ...props }));
-const Separator = ({ className, }) => (_jsx(MenuBarBase.Separator, { className: cn('w-px h-5 bg-mono200', className) }));
-const LDMenuBar = {
-    Root,
-    Logo,
-    Nav,
-    Item,
-    Trigger,
-    Content,
-    MegaContent,
-    Actions,
-    Separator,
+const DROPDOWN_CLASS = cn('absolute top-full left-0 mt-xs min-w-[180px] z-50', 'flex flex-col gap-xs p-xs rounded-[8px] bg-white border border-mono100 shadow-lg');
+// mega 모드: fixed로 부모 li(relative)를 벗어나 헤더 전체 폭 차지. top-16 = 헤더 높이 64px.
+const MEGA_CLASS = cn('fixed left-0 right-0 top-16 z-50', 'p-lg bg-white border-b border-mono100 shadow-lg');
+const MEGA_BACKDROP_CLASS = 'fixed left-0 right-0 top-16 bottom-0 z-40 bg-black/40';
+/**
+ * 가로 헤더형 메뉴바. items로 네비게이션을 구성하고 logo/actions 슬롯에 임의 콘텐츠를 주입한다.
+ * item.content가 있으면 드롭다운, 없으면 단순 링크. item.mega면 헤더 전체 폭 패널로 열린다.
+ */
+const LDMenuBar = ({ items, trigger = 'hover', logo, actions, className, }) => {
+    return (_jsxs(MenuBarBase.Root, { trigger: trigger, className: cn('relative flex items-center justify-between w-full h-[64px] min-h-[64px]', 'px-md gap-10 bg-white border-b border-mono100 sticky top-0 z-50', className), children: [logo && (_jsx(MenuBarBase.Logo, { className: "flex items-center shrink-0", children: logo })), _jsx(MenuBarBase.Nav, { className: "flex flex-1 items-center justify-start gap-xs", children: items.map((item) => (_jsxs(MenuBarBase.Item, { value: item.value, hasDropdown: !!item.content, children: [_jsx(MenuBarBase.Trigger, { as: item.content ? undefined : item.as, href: item.content ? undefined : item.href, className: TRIGGER_CLASS, children: item.label }), item.content &&
+                            (item.mega ? (_jsx(MenuBarBase.Content, { backdrop: true, backdropClassName: MEGA_BACKDROP_CLASS, className: MEGA_CLASS, children: item.content })) : (_jsx(MenuBarBase.Content, { className: DROPDOWN_CLASS, children: item.content })))] }, item.value))) }), actions && (_jsx(MenuBarBase.Actions, { className: "flex items-center gap-sm shrink-0", children: actions }))] }));
 };
 export default LDMenuBar;

package/dist/components/LDMenuBar/MenuBarBase.d.ts

@@ -10,6 +10,8 @@ interface SlotProps {
 }
 interface ItemProps {
     value: string;
+    /** 드롭다운(Content/MegaContent)을 가진 항목이면 true. 지정 시 hover/click으로 열리고 Trigger가 토글로 동작한다. 없으면 단순 링크. */
+    hasDropdown?: boolean;
     children: ReactNode;
     className?: string;
 }
@@ -28,12 +30,9 @@ declare const MenuBarBase: {
     Root: ({ children, className, trigger }: RootProps) => import("react/jsx-runtime").JSX.Element;
     Logo: ({ children, className }: SlotProps) => import("react/jsx-runtime").JSX.Element;
     Nav: ({ children, className }: SlotProps) => import("react/jsx-runtime").JSX.Element;
-    Item: ({ value, children, className }: ItemProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ value, hasDropdown, children, className, }: ItemProps) => import("react/jsx-runtime").JSX.Element;
     Trigger: ({ as: Comp, children, className, ...rest }: TriggerProps) => import("react/jsx-runtime").JSX.Element;
-    Content: {
-        ({ children, className, backdrop, backdropClassName, }: ContentProps): import("react/jsx-runtime").JSX.Element | null;
-        displayName: string;
-    };
+    Content: ({ children, className, backdrop, backdropClassName, }: ContentProps) => import("react/jsx-runtime").JSX.Element;
     Actions: ({ children, className }: SlotProps) => import("react/jsx-runtime").JSX.Element;
     Separator: ({ className }: {
         className?: string;

package/dist/components/LDMenuBar/MenuBarBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuBarBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDMenuBar/MenuBarBase.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA0CpD,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC7B;AAqBD,UAAU,SAAS;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmBD,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0BD,UAAU,YAAY;IACpB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAuCD,UAAU,YAAa,SAAQ,SAAS;IACtC,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AA0BD,QAAA,MAAM,WAAW;6CAjJyC,SAAS;oCAwB5B,SAAS;mCAIV,SAAS;2CAmBD,SAAS;0DAoCpD,YAAY;;gEA2CZ,YAAY;;;uCA9F2B,SAAS;+BAIjB;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE;CAsHvD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MenuBarBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDMenuBar/MenuBarBase.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAwCpD,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC7B;AAqBD,UAAU,SAAS;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmBD,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,oGAAoG;IACpG,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyBD,UAAU,YAAY;IACpB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAuCD,UAAU,YAAa,SAAQ,SAAS;IACtC,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAmCD,QAAA,MAAM,WAAW;6CA3JyC,SAAS;oCAwB5B,SAAS;mCAIV,SAAS;yDA0B5C,SAAS;0DA8BT,YAAY;qEA2CZ,YAAY;uCA/F2B,SAAS;+BAIjB;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE;CAgIvD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/LDMenuBar/MenuBarBase.js

@@ -1,8 +1,7 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, createContext, isValidElement, useContext, useState, } from 'react';
+import { createContext, useContext, useState } from 'react';
 import cn from '../../utils/cn.js';
-const CONTENT_NAME = 'MenuBarContent';
 const MenuBarContext = createContext(null);
 const useMenuBarContext = () => {
     const ctx = useContext(MenuBarContext);
@@ -26,21 +25,18 @@ const Logo = ({ children, className }) => (_jsx("div", { className: className, c
 const Nav = ({ children, className }) => (_jsx("ul", { className: className, children: children }));
 const Actions = ({ children, className }) => (_jsx("div", { className: className, children: children }));
 const Separator = ({ className }) => (_jsx("span", { "aria-hidden": true, className: className }));
-const Item = ({ value, children, className }) => {
+const Item = ({ value, hasDropdown = false, children, className, }) => {
     const { trigger, setOpenValue } = useMenuBarContext();
-    // Content 존재 여부로 드롭다운 항목인지 자동 판정 (스타일 래퍼도 같은 displayName을 가짐)
-    const hasContent = Children.toArray(children).some((c) => isValidElement(c) &&
-        c.type?.displayName === CONTENT_NAME);
-    const hoverProps = trigger === 'hover' && hasContent
+    const hoverProps = trigger === 'hover' && hasDropdown
         ? { onMouseEnter: () => setOpenValue(value) }
         : {};
-    return (_jsx(ItemContext, { value: { value, hasContent }, children: _jsx("li", { className: cn('relative', className), ...hoverProps, children: children }) }));
+    return (_jsx(ItemContext, { value: { value, hasDropdown }, children: _jsx("li", { className: cn('relative', className), ...hoverProps, children: children }) }));
 };
 const Trigger = ({ as: Comp = 'button', children, className, ...rest }) => {
     const { trigger, setOpenValue, isOpen } = useMenuBarContext();
-    const { value, hasContent } = useItemContext();
+    const { value, hasDropdown } = useItemContext();
     // 드롭다운 없는 항목 → 순수 링크/버튼 (토글 안 함)
-    if (!hasContent) {
+    if (!hasDropdown) {
         return (_jsx(Comp, { className: className, ...rest, children: children }));
     }
     const handleClick = trigger === 'click'
@@ -51,11 +47,13 @@ const Trigger = ({ as: Comp = 'button', children, className, ...rest }) => {
 const Content = ({ children, className, backdrop, backdropClassName, }) => {
     const { isOpen, setOpenValue } = useMenuBarContext();
     const { value } = useItemContext();
-    if (!isOpen(value))
-        return null;
-    return (_jsxs(_Fragment, { children: [backdrop && (_jsx("div", { "aria-hidden": true, onClick: () => setOpenValue(null), className: backdropClassName })), _jsx("div", { className: className, children: children })] }));
+    const open = isOpen(value);
+    // 항상 마운트해두고 data-open으로 opacity를 300ms 전환(열림 fade-in / 닫힘 fade-out).
+    // 닫힘 상태에선 inert로 클릭·포커스·스크린리더에서 제외한다 — 안 그러면 opacity:0인
+    // mega 딤이 화면 전체 클릭을 가로챈다.
+    const fade = 'ld-transition data-[open=false]:opacity-0';
+    return (_jsxs(_Fragment, { children: [backdrop && (_jsx("div", { "aria-hidden": true, "data-open": open, inert: !open, onClick: () => setOpenValue(null), className: cn(fade, backdropClassName) })), _jsx("div", { "data-open": open, inert: !open, className: cn(fade, className), children: children })] }));
 };
-Content.displayName = CONTENT_NAME;
 const MenuBarBase = {
     Root,
     Logo,

package/dist/components/LDModal/LDModal.d.ts

@@ -1,51 +1,31 @@
-import { type ReactNode } from 'react';
-export type ModalSize = 'small' | 'medium' | 'large' | 'xlarge';
-export interface ModalButtons {
-    direction?: 'row' | 'column';
-    list?: ModalButton[];
-}
-export interface ModalButton<T = unknown> {
-    /** 버튼 텍스트 */
-    label: string;
-    /** 버튼 식별 값 (onButtonClick에 전달) */
-    value: T;
-    /** 버튼 스타일 유형 */
-    variant?: 'solid' | 'outline' | 'ghost';
-    /** 버튼 색상 테마 */
-    color?: 'neutral' | 'point' | 'danger';
-    /** 클릭 핸들러 (false 반환 시 모달 닫힘 방지) */
-    onClick?: () => void | boolean | Promise<void | boolean>;
-}
-export interface LDModalProps {
-    /** 모달 열림 상태 (제어 컴포넌트) */
-    open?: boolean;
-    /** 초기 열림 상태 (비제어 컴포넌트) */
-    defaultOpen?: boolean;
-    /** 열림 상태 변경 시 호출되는 콜백 */
-    onOpenChange?: (open: boolean) => void;
-    /** 서브 타이틀 (title 위에 표시) */
+import { TModalClassNames, type ModalSize } from './LDModalView.js';
+export interface LDModalOptions<T = undefined> {
     name?: string;
-    /** 모달 제목 */
     title?: string;
-    /** 모달 설명 텍스트 */
     description?: string;
-    /** 본문 콘텐츠 */
-    children?: ReactNode;
-    /** 모달 너비 프리셋 */
+    content?: React.ReactNode | ((args: {
+        onClose: (value?: T) => void;
+    }) => React.ReactNode);
+    buttons?: {
+        value: T;
+        label: string;
+        variant?: 'solid' | 'outline' | 'ghost';
+        color?: 'neutral' | 'point' | 'danger';
+        onClick?: () => void | boolean | Promise<void | boolean>;
+    }[];
+    /** 버튼 배치 방향 */
+    buttonsDirection?: 'row' | 'column';
     size?: ModalSize;
-    /** 너비 직접 지정 (size보다 우선) */
     icon?: 'success' | 'fail';
-    /** 하단 버튼 목록 */
-    buttons?: ModalButtons;
-    /** 스크롤 동작 */
+    /** 스크롤 동작 (LDModalView와 동일) */
     scrollBehavior?: 'inside' | 'outside';
-    /** 추가 CSS 클래스 (모달 패널에 적용) */
+    /** 모달 패널에 적용할 추가 CSS 클래스 */
     className?: string;
-    /** 인라인 스타일 (모달 패널에 적용) */
+    /** 모달 패널 인라인 스타일 (자유 width/height 등) */
     style?: React.CSSProperties;
-    /** 버튼 클릭 시 해당 버튼의 value를 전달하는 콜백 */
-    onButtonClick?: (value: unknown) => void;
+    onBeforeClose?: () => Promise<boolean> | boolean;
+    classNames?: TModalClassNames;
 }
-declare const LDModal: ({ open, defaultOpen, onOpenChange, name, title, description, children, size, icon, buttons, scrollBehavior, className, style, onButtonClick, }: LDModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const LDModal: <T = undefined>(options: LDModalOptions<T>) => Promise<T | undefined>;
 export default LDModal;
 //# sourceMappingURL=LDModal.d.ts.map

package/dist/components/LDModal/LDModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LDModal.d.ts","sourceRoot":"","sources":["../../../src/components/LDModal/LDModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAO/C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEhE,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,OAAO;IACtC,aAAa;IACb,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,KAAK,EAAE,CAAC,CAAC;IACT,gBAAgB;IAChB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACxC,eAAe;IACf,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;IACvC,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,CAAC;CAC1D;AAED,MAAM,WAAW,YAAY;IAC3B,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0BAA0B;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yBAAyB;IACzB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa;IACb,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gBAAgB;IAChB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,eAAe;IACf,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,aAAa;IACb,cAAc,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACtC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AA6CD,QAAA,MAAM,OAAO,GAAI,gJAed,YAAY,4CA0Jd,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"LDModal.d.ts","sourceRoot":"","sources":["../../../src/components/LDModal/LDModal.tsx"],"names":[],"mappings":"AAIA,OAAoB,EAClB,gBAAgB,EAEhB,KAAK,SAAS,EACf,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,SAAS;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EACJ,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,IAAI,EAAE;QAAE,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAClE,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,CAAC,CAAC;QACT,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;QACxC,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;QACvC,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,CAAC;KAC1D,EAAE,CAAC;IACJ,eAAe;IACf,gBAAgB,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACpC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,+BAA+B;IAC/B,cAAc,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACtC,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;IACjD,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B;AAED,QAAA,MAAM,OAAO,GAAI,CAAC,GAAG,SAAS,EAC5B,SAAS,cAAc,CAAC,CAAC,CAAC,KACzB,OAAO,CAAC,CAAC,GAAG,SAAS,CA2EvB,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/LDModal/LDModal.js

@@ -1,72 +1,58 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
-import ModalBase from './ModalBase.js';
-import LucideIcon from '../Icon/LucideIcon.js';
-import cn from '../../utils/cn.js';
-import LDButton from '../LDButton/LDButton.js';
-// ── 스타일 매핑 ──
-const sizeClasses = {
-    small: 'modal-sm',
-    medium: 'modal-md',
-    large: 'modal-lg',
-    xlarge: 'modal-xl',
-};
-const buttonSizeClasses = {
-    small: 'medium',
-    medium: 'large',
-    large: 'large',
-    xlarge: 'large',
-};
-const buttonsGapSizeClasses = {
-    small: 'gap-xs',
-    medium: 'gap-sm',
-    large: 'gap-sm',
-    xlarge: 'gap-sm',
-};
-const layoutGapSizeClasses = {
-    small: 'gap-lg',
-    medium: 'gap-xl',
-    large: 'gap-xl',
-    xlarge: 'gap-xl',
-};
-const noHeaderPaddingTopSizeClasses = {
-    small: 'pt-lg',
-    medium: 'pt-xl',
-    large: 'pt-xl',
-    xlarge: 'pt-xl',
-};
-const statusIconSizeClasses = {
-    small: 'size-10',
-    medium: 'size-12.5',
-    large: 'size-12.5',
-    xlarge: 'size-12.5',
-};
-const LDModal = ({ open, defaultOpen, onOpenChange, name, title, description, children, size = 'small', icon, buttons, scrollBehavior = 'inside', className, style, onButtonClick, }) => {
-    const overlayRef = useRef(false);
-    const hasHeader = name || title || description || icon;
-    const handleClick = async (button) => {
-        if (button.onClick) {
-            const res = await button.onClick();
-            if (res === false)
-                return;
-        }
-        onButtonClick?.(button.value);
-        onOpenChange?.(false);
-    };
-    return (_jsxs(ModalBase.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [_jsx(ModalBase.Overlay, {}), _jsx(ModalBase.Content, { className: cn({
-                    ['top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2']: scrollBehavior === 'inside',
-                    ['inset-0 overflow-y-auto flex justify-center items-start py-20']: scrollBehavior === 'outside',
-                }), onMouseDown: (e) => (overlayRef.current = e.target === e.currentTarget), onClick: (e) => {
-                    if (scrollBehavior === 'outside' &&
-                        e.target === e.currentTarget &&
-                        overlayRef.current)
-                        onOpenChange?.(false);
-                    overlayRef.current = false;
-                }, children: _jsxs("div", { className: cn('relative bg-white rounded-2xl p-5', sizeClasses[size], 'mobile:max-w-[calc(100vw-40px)]', scrollBehavior === 'inside' &&
-                        'flex flex-col overflow-y-auto max-h-[90dvh]', className), style: style, onClick: (e) => e.stopPropagation(), children: [_jsx(ModalBase.Close, { className: "absolute top-4 right-5 text-neutral500 cursor-pointer outline-hidden", children: _jsx(LDButton, { variant: "ghost", color: "neutral", leftIcon: "x", compact: true }) }), _jsxs("div", { className: cn('w-full flex flex-col shrink-0', scrollBehavior === 'inside' && 'flex-1 min-h-0', layoutGapSizeClasses[size], !hasHeader && noHeaderPaddingTopSizeClasses[size]), children: [hasHeader && (_jsxs("div", { className: "w-full flex gap-5 py-5 items-center flex-col text-center shrink-0", children: [icon === 'success' && (_jsx("div", { className: cn('flex items-center justify-center rounded-full bg-hyper-blue', statusIconSizeClasses[size]), children: _jsx(LucideIcon, { name: "check", className: "text-white" }) })), icon === 'fail' && (_jsx("div", { className: cn('flex items-center justify-center rounded-full bg-danger600', statusIconSizeClasses[size]), children: _jsx(LucideIcon, { name: "circleAlert", className: "text-white" }) })), name && (_jsx("span", { className: "display16 bold text-neutral500 whitespace-pre-wrap", children: name })), title && (_jsx(ModalBase.Title, { className: "display28 bold whitespace-pre-wrap text-center", children: title })), description && (_jsx(ModalBase.Description, { className: "display14 text-neutral500 whitespace-pre-wrap text-center", children: description }))] })), children && (_jsx("div", { className: cn(scrollBehavior === 'inside' &&
-                                        'flex-1 min-h-10 overflow-y-auto'), children: children })), buttons?.list && buttons?.list?.length > 0 && (_jsx("div", { className: cn('flex mobile:flex-1 mobile:flex-col mobile:items-center', buttons.direction === 'column' ? 'flex-col' : 'flex-row', buttonsGapSizeClasses[size]), children: buttons?.list?.map((button, index) => {
-                                        const isFirst = index === 0;
-                                        return (_jsx("div", { className: "flex flex-1 w-full", children: _jsx(LDButton, { type: "button", onClick: () => handleClick(button), variant: button.variant ?? (isFirst ? 'solid' : 'outline'), color: button.color ?? (isFirst ? 'point' : 'neutral'), size: buttonSizeClasses[size], block: true, children: button.label }) }, String(button.value)));
-                                    }) }))] })] }) })] }));
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import LDModalView from './LDModalView.js';
+const LDModal = (options) => {
+    return new Promise((resolve) => {
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+        const root = createRoot(container);
+        const closeModal = () => {
+            root.unmount();
+            container.remove();
+        };
+        const ModalHost = () => {
+            const [open, setOpen] = useState(true);
+            const closingRef = useRef(false);
+            const close = async (value) => {
+                if (closingRef.current)
+                    return;
+                if (options.onBeforeClose) {
+                    const canClose = await options.onBeforeClose();
+                    if (!canClose)
+                        return;
+                }
+                closingRef.current = true;
+                setOpen(false);
+                resolve(value);
+                setTimeout(closeModal, 300);
+            };
+            const list = options.buttons?.map((btn) => ({
+                ...btn,
+                value: btn.value,
+                onClick: async () => {
+                    let shouldClose = true;
+                    if (btn.onClick) {
+                        const res = await btn.onClick();
+                        if (res === false)
+                            shouldClose = false;
+                    }
+                    if (shouldClose) {
+                        close(btn.value);
+                    }
+                    return false; // LDModalView 내부의 기본 닫기 동작 방지
+                },
+            }));
+            const content = typeof options.content === 'function'
+                ? options.content({ onClose: close })
+                : options.content;
+            return (_jsx(LDModalView, { open: open, onOpenChange: (next) => {
+                    if (!next)
+                        close(undefined);
+                }, name: options.name, title: options.title, description: options.description, size: options.size, icon: options.icon, scrollBehavior: options.scrollBehavior, style: options.style, buttons: list ? { direction: options.buttonsDirection, list } : undefined, classNames: options.classNames, children: content }));
+        };
+        root.render(_jsx(ModalHost, {}));
+    });
 };
 export default LDModal;

package/dist/components/LDModal/LDModalView.d.ts

@@ -0,0 +1,59 @@
+import { type ReactNode } from 'react';
+export type ModalSize = 'small' | 'medium' | 'large' | 'xlarge';
+export type TModalClassNames = {
+    overlay?: string;
+    content?: string;
+    layout?: string;
+    panel?: string;
+    close?: string;
+    title?: string;
+    description?: string;
+};
+export interface ModalButtons {
+    direction?: 'row' | 'column';
+    list?: ModalButton[];
+}
+export interface ModalButton<T = unknown> {
+    /** 버튼 텍스트 */
+    label: string;
+    /** 버튼 식별 값 (onButtonClick에 전달) */
+    value: T;
+    /** 버튼 스타일 유형 */
+    variant?: 'solid' | 'outline' | 'ghost';
+    /** 버튼 색상 테마 */
+    color?: 'neutral' | 'point' | 'danger';
+    /** 클릭 핸들러 (false 반환 시 모달 닫힘 방지) */
+    onClick?: () => void | boolean | Promise<void | boolean>;
+}
+export interface LDModalViewProps {
+    /** 모달 열림 상태 (제어 컴포넌트) */
+    open?: boolean;
+    /** 초기 열림 상태 (비제어 컴포넌트) */
+    defaultOpen?: boolean;
+    /** 열림 상태 변경 시 호출되는 콜백 */
+    onOpenChange?: (open: boolean) => void;
+    /** 서브 타이틀 (title 위에 표시) */
+    name?: string;
+    /** 모달 제목 */
+    title?: string;
+    /** 모달 설명 텍스트 */
+    description?: string;
+    /** 본문 콘텐츠 */
+    children?: ReactNode;
+    /** 모달 너비 프리셋 */
+    size?: ModalSize;
+    /** 너비 직접 지정 (size보다 우선) */
+    icon?: 'success' | 'fail';
+    /** 하단 버튼 목록 */
+    buttons?: ModalButtons;
+    /** 스크롤 동작 */
+    scrollBehavior?: 'inside' | 'outside';
+    /** 인라인 스타일 (모달 패널에 적용) */
+    style?: React.CSSProperties;
+    /** 버튼 클릭 시 해당 버튼의 value를 전달하는 콜백 */
+    onButtonClick?: (value: unknown) => void;
+    classNames?: TModalClassNames;
+}
+declare const LDModalView: ({ open, defaultOpen, onOpenChange, name, title, description, children, size, icon, buttons, scrollBehavior, classNames, style, onButtonClick, }: LDModalViewProps) => import("react/jsx-runtime").JSX.Element;
+export default LDModalView;
+//# sourceMappingURL=LDModalView.d.ts.map

package/dist/components/LDModal/LDModalView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LDModalView.d.ts","sourceRoot":"","sources":["../../../src/components/LDModal/LDModalView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAO/C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEhE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,OAAO;IACtC,aAAa;IACb,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,KAAK,EAAE,CAAC,CAAC;IACT,gBAAgB;IAChB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACxC,eAAe;IACf,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;IACvC,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,CAAC;CAC1D;AAED,MAAM,WAAW,gBAAgB;IAC/B,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0BAA0B;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yBAAyB;IACzB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa;IACb,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gBAAgB;IAChB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,eAAe;IACf,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,aAAa;IACb,cAAc,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACtC,0BAA0B;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B;AA6CD,QAAA,MAAM,WAAW,GAAI,iJAelB,gBAAgB,4CAmLlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/LDModal/LDModalView.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import ModalBase from './ModalBase.js';
+import cn from '../../utils/cn.js';
+import LDButton from '../LDButton/LDButton.js';
+import { Check, CircleAlert, X } from 'lucide-react';
+// ── 스타일 매핑 ──
+const sizeClasses = {
+    small: 'modal-sm',
+    medium: 'modal-md',
+    large: 'modal-lg',
+    xlarge: 'modal-xl',
+};
+const buttonSizeClasses = {
+    small: 'medium',
+    medium: 'large',
+    large: 'large',
+    xlarge: 'large',
+};
+const buttonsGapSizeClasses = {
+    small: 'gap-xs',
+    medium: 'gap-sm',
+    large: 'gap-sm',
+    xlarge: 'gap-sm',
+};
+const layoutGapSizeClasses = {
+    small: 'gap-lg',
+    medium: 'gap-xl',
+    large: 'gap-xl',
+    xlarge: 'gap-xl',
+};
+const noHeaderPaddingTopSizeClasses = {
+    small: 'pt-lg',
+    medium: 'pt-xl',
+    large: 'pt-xl',
+    xlarge: 'pt-xl',
+};
+const statusIconSizeClasses = {
+    small: 'size-10',
+    medium: 'size-12.5',
+    large: 'size-12.5',
+    xlarge: 'size-12.5',
+};
+const LDModalView = ({ open, defaultOpen, onOpenChange, name, title, description, children, size = 'small', icon, buttons, scrollBehavior = 'inside', classNames, style, onButtonClick, }) => {
+    const overlayRef = useRef(false);
+    const hasHeader = name || title || description || icon;
+    const handleClick = async (button) => {
+        if (button.onClick) {
+            const res = await button.onClick();
+            if (res === false)
+                return;
+        }
+        onButtonClick?.(button.value);
+        onOpenChange?.(false);
+    };
+    return (_jsxs(ModalBase.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [_jsx(ModalBase.Overlay, { className: classNames?.overlay }), _jsx(ModalBase.Content, { className: cn({
+                    ['top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2']: scrollBehavior === 'inside',
+                    ['inset-0 overflow-y-auto flex justify-center items-start py-20']: scrollBehavior === 'outside',
+                }, classNames?.content), onMouseDown: (e) => (overlayRef.current = e.target === e.currentTarget), onClick: (e) => {
+                    if (scrollBehavior === 'outside' &&
+                        e.target === e.currentTarget &&
+                        overlayRef.current)
+                        onOpenChange?.(false);
+                    overlayRef.current = false;
+                }, children: _jsxs("div", { className: cn('relative bg-white rounded-2xl p-5', sizeClasses[size], 'mobile:max-w-[calc(100vw-40px)]', scrollBehavior === 'inside' &&
+                        'flex flex-col overflow-y-auto max-h-[90dvh]', classNames?.layout), style: style, onClick: (e) => e.stopPropagation(), children: [_jsx(ModalBase.Close, { asChild: true, className: cn('absolute top-4 right-5 text-neutral500 cursor-pointer outline-hidden', classNames?.close), children: _jsx(LDButton, { variant: "ghost", color: "neutral", leftIcon: _jsx(X, {}), compact: true }) }), _jsxs("div", { className: cn('w-full flex flex-col shrink-0', scrollBehavior === 'inside' && 'flex-1 min-h-0', layoutGapSizeClasses[size], !hasHeader && noHeaderPaddingTopSizeClasses[size], classNames?.panel), children: [hasHeader && (_jsxs("div", { className: "w-full flex gap-5 py-5 items-center flex-col text-center shrink-0", children: [icon === 'success' && (_jsx("div", { className: cn('flex items-center justify-center rounded-full bg-hyper-blue', statusIconSizeClasses[size]), children: _jsx(Check, { className: "text-white" }) })), icon === 'fail' && (_jsx("div", { className: cn('flex items-center justify-center rounded-full bg-danger600', statusIconSizeClasses[size]), children: _jsx(CircleAlert, { className: "text-white" }) })), name && (_jsx("span", { className: "display16 bold text-neutral500 whitespace-pre-wrap", children: name })), title && (_jsx(ModalBase.Title, { className: cn('display28 bold whitespace-pre-wrap text-center', classNames?.title), children: title })), description && (_jsx(ModalBase.Description, { className: cn('display14 text-neutral500 whitespace-pre-wrap text-center', classNames?.description), children: description }))] })), children && (_jsx("div", { className: cn(scrollBehavior === 'inside' &&
+                                        'flex-1 min-h-10 overflow-y-auto'), children: children })), buttons?.list && buttons?.list?.length > 0 && (_jsx("div", { className: cn('flex mobile:flex-1 mobile:flex-col mobile:items-center', buttons.direction === 'column' ? 'flex-col' : 'flex-row', buttonsGapSizeClasses[size]), children: buttons?.list?.map((button, index) => {
+                                        const isFirst = index === 0;
+                                        return (_jsx("div", { className: "flex flex-1 w-full", children: _jsx(LDButton, { type: "button", onClick: () => handleClick(button), variant: button.variant ?? (isFirst ? 'solid' : 'outline'), color: button.color ?? (isFirst ? 'point' : 'neutral'), size: buttonSizeClasses[size], block: true, children: button.label }) }, String(button.value)));
+                                    }) }))] })] }) })] }));
+};
+export default LDModalView;

package/dist/components/LDNotification/LDNotification.d.ts

@@ -0,0 +1,40 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type NotificationType } from './NotificationBase.js';
+export type NotificationSize = 'small' | 'medium' | 'large';
+export interface LDNotificationProps {
+    /** 트리거로 사용할 노드 — 벨 아이콘, 아바타 등 임의의 ReactNode */
+    children: ReactNode;
+    /** 배지 표시 방식 — 'dot'이면 점만, 'count'면 숫자로 표시 (기본값 'count') */
+    type?: NotificationType;
+    /** type='dot'일 때 점을 보여줄지 여부 (기본값 false). type='count'일 땐 사용되지 않음 */
+    dot?: boolean;
+    /** type='count'일 때 표시할 알림 개수 (기본값 0) */
+    count?: number;
+    /** type='count'일 때, count가 이 값을 초과하면 `${overflowCount}+`로 표시 (기본값 99) */
+    overflowCount?: number;
+    /** type='count'일 때, count가 0이어도 배지를 표시할지 여부 (기본값 false) */
+    showZero?: boolean;
+    /** 기본 위치(우측 상단 모서리)에서 [x, y]만큼 px 이동. x는 오른쪽, y는 아래쪽이 + 방향 */
+    offset?: [number, number];
+    /** 배지 크기 — 'small' | 'medium' | 'large' (기본값 'medium') */
+    size?: NotificationSize;
+    /** 트리거와 배지를 함께 감싸는 Root wrapper에 적용할 className */
+    className?: string;
+    /** 배지(Indicator) 자체에 적용할 className — 색상 등 기본 스타일을 덮어쓸 때 사용 */
+    indicatorClassName?: string;
+    /**
+     * count가 증가하는 순간 트리거(children) wrapper에 잠깐 추가되는 className.
+     * 예: `"animate-bell"` — 새 알림이 왔을 때 트리거를 흔드는 등 강조 효과를 주고 싶을 때 사용
+     */
+    triggerHighlightClassName?: string;
+    /**
+     * count가 증가하는 순간 배지(Indicator)에 추가되는 className.
+     * 예: `"animate-bounce"`
+     */
+    indicatorHighlightClassName?: string;
+    /** Root wrapper에 적용할 인라인 스타일 */
+    style?: CSSProperties;
+}
+declare const LDNotification: ({ children, type, dot, count, overflowCount, showZero, offset, size, className, indicatorClassName, triggerHighlightClassName, indicatorHighlightClassName, style, }: LDNotificationProps) => import("react/jsx-runtime").JSX.Element;
+export default LDNotification;
+//# sourceMappingURL=LDNotification.d.ts.map

package/dist/components/LDNotification/LDNotification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LDNotification.d.ts","sourceRoot":"","sources":["../../../src/components/LDNotification/LDNotification.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAyB,EAAE,KAAK,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAE7E,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE5D,MAAM,WAAW,mBAAmB;IAClC,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,oEAAoE;IACpE,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,0DAA0D;IAC1D,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC;;;OAGG;IACH,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,gCAAgC;IAChC,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAiID,QAAA,MAAM,cAAc,GAAI,sKAcrB,mBAAmB,4CA4BrB,CAAC;AAEF,eAAe,cAAc,CAAC"}