@loword/loword-design-system 0.0.11 → 0.0.13

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,4 +1,4 @@
-import { type ModalSize } from './LDModalView.js';
+import { TModalClassNames, type ModalSize } from './LDModalView.js';
 export interface LDModalOptions<T = undefined> {
     name?: string;
     title?: string;
@@ -24,6 +24,7 @@ export interface LDModalOptions<T = undefined> {
     /** 모달 패널 인라인 스타일 (자유 width/height 등) */
     style?: React.CSSProperties;
     onBeforeClose?: () => Promise<boolean> | boolean;
+    classNames?: TModalClassNames;
 }
 declare const LDModal: <T = undefined>(options: LDModalOptions<T>) => Promise<T | undefined>;
 export default LDModal;

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":"AAIA,OAAoB,EAAoB,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAE9E,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;CAClD;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"}
+{"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

@@ -50,7 +50,7 @@ const LDModal = (options) => {
             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, className: options.className, style: options.style, buttons: list ? { direction: options.buttonsDirection, list } : undefined, children: content }));
+                }, 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, {}));
     });

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

@@ -1,5 +1,14 @@
 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[];
@@ -39,13 +48,12 @@ export interface LDModalViewProps {
     buttons?: ModalButtons;
     /** 스크롤 동작 */
     scrollBehavior?: 'inside' | 'outside';
-    /** 추가 CSS 클래스 (모달 패널에 적용) */
-    className?: string;
     /** 인라인 스타일 (모달 패널에 적용) */
     style?: React.CSSProperties;
     /** 버튼 클릭 시 해당 버튼의 value를 전달하는 콜백 */
     onButtonClick?: (value: unknown) => void;
+    classNames?: TModalClassNames;
 }
-declare const LDModalView: ({ open, defaultOpen, onOpenChange, name, title, description, children, size, icon, buttons, scrollBehavior, className, style, onButtonClick, }: LDModalViewProps) => import("react/jsx-runtime").JSX.Element;
+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

@@ -1 +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,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,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,WAAW,GAAI,gJAelB,gBAAgB,4CAkKlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"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

@@ -41,7 +41,7 @@ const statusIconSizeClasses = {
     large: 'size-12.5',
     xlarge: 'size-12.5',
 };
-const LDModalView = ({ open, defaultOpen, onOpenChange, name, title, description, children, size = 'small', icon, buttons, scrollBehavior = 'inside', className, style, onButtonClick, }) => {
+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) => {
@@ -53,17 +53,17 @@ const LDModalView = ({ open, defaultOpen, onOpenChange, name, title, description
         onButtonClick?.(button.value);
         onOpenChange?.(false);
     };
-    return (_jsxs(ModalBase.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [_jsx(ModalBase.Overlay, {}), _jsx(ModalBase.Content, { className: cn({
+    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',
-                }), onMouseDown: (e) => (overlayRef.current = e.target === e.currentTarget), onClick: (e) => {
+                }, 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]', className), style: style, onClick: (e) => e.stopPropagation(), children: [_jsx(ModalBase.Close, { asChild: true, className: "absolute top-4 right-5 text-neutral500 cursor-pointer outline-hidden", 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]), 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: "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 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)));

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"}

package/dist/components/LDNotification/LDNotification.js

@@ -0,0 +1,76 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState, } from 'react';
+import cn from '../../utils/cn.js';
+import NotificationBase from './NotificationBase.js';
+// dot 자체 지름(px) — count 박스와 무관한, 훨씬 작은 순수 점 표시용 크기
+const DOT_SIZE_PX = {
+    small: 4,
+    medium: 6,
+    large: 8,
+};
+// count 박스 높이(px). Tailwind h-3.5/h-4/h-5과 동일한 값
+const COUNT_HEIGHT_PX = {
+    small: 14,
+    medium: 16,
+    large: 20,
+};
+// 좌우 패딩(px, 한쪽 기준). Tailwind px-3xs/px-2xs와 동일한 값
+const SIZE_PADDING_X_PX = {
+    small: 2,
+    medium: 4,
+    large: 4,
+};
+const SIZE_CLASSES = {
+    small: 'px-3xs display10 bold',
+    medium: 'px-2xs display10 bold',
+    large: 'px-2xs display12 bold',
+};
+// 표시값 얼리기·텍스트 폭 측정 state를 Indicator 전용으로 분리 — 이 값들이 바뀌어도
+// 트리거 wrapper/Root는 리렌더되지 않고 이 컴포넌트만 리렌더된다.
+const IndicatorContent = ({ type, dot, count, overflowCount, showZero, size, offset, isHighlight, indicatorClassName, indicatorHighlightClassName, }) => {
+    const isDot = type === 'dot';
+    const isShown = isDot ? dot : count > 0 || (count === 0 && showZero);
+    const isOverflow = !isDot && count > overflowCount;
+    const liveDisplay = isOverflow ? `${overflowCount}+` : count;
+    const [frozenDisplay, setFrozenDisplay] = useState(liveDisplay);
+    const textRef = useRef(null);
+    const [textWidth, setTextWidth] = useState(0);
+    // count가 실제로 보이는 중일 때만 표시값을 갱신하고, dot이거나 숨겨지는 중엔 마지막
+    // 표시값을 그대로 얼려둔다 — count→dot 전환 시 "99+"가 raw count로 풀리거나,
+    // showZero=false에서 count가 0으로 바뀌며 사라질 때 "0"으로 스냅되는 걸 막는다.
+    useEffect(() => {
+        if (!isDot && isShown) {
+            setFrozenDisplay(liveDisplay);
+        }
+    }, [isDot, isShown, liveDisplay]);
+    // count일 때 너비는 실제 텍스트 너비를 측정해 결정한다 — Tailwind 정적 클래스로는
+    // count의 실제 내용 너비만큼 부드럽게 트랜지션하기 어렵기 때문
+    useLayoutEffect(() => {
+        if (isDot)
+            return;
+        const el = textRef.current;
+        if (el)
+            setTextWidth(el.scrollWidth);
+    }, [frozenDisplay, isDot, size]);
+    const heightPx = isDot ? DOT_SIZE_PX[size] : COUNT_HEIGHT_PX[size];
+    const widthPx = isDot
+        ? DOT_SIZE_PX[size]
+        : Math.max(COUNT_HEIGHT_PX[size], textWidth + SIZE_PADDING_X_PX[size] * 2);
+    const scale = isShown ? 1 : 0;
+    const indicatorTransform = [
+        offset && `translate(${offset[0]}px, ${offset[1]}px)`,
+        `scale(${scale})`,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx(NotificationBase.Indicator, { count: count, type: type, isShown: isShown, className: cn('absolute top-0 right-0 ld-transition rounded-full bg-danger600 text-white flex items-center justify-center leading-none', SIZE_CLASSES[size], isDot && 'px-0', isShown ? 'opacity-100' : 'opacity-0', indicatorClassName, isHighlight && indicatorHighlightClassName), style: {
+            transform: indicatorTransform,
+            width: widthPx,
+            height: heightPx,
+        }, children: _jsx("span", { ref: textRef, className: cn('ld-transition', isDot ? 'scale-0 opacity-0' : 'scale-100 opacity-100'), children: frozenDisplay }) }));
+};
+const LDNotification = ({ children, type = 'count', dot = false, count = 0, overflowCount = 99, showZero = false, offset, size = 'medium', className, indicatorClassName, triggerHighlightClassName, indicatorHighlightClassName, style, }) => {
+    return (_jsx(NotificationBase.Root, { className: cn('relative inline-block', className), style: style, count: count, children: (isHighlight) => (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(isHighlight && triggerHighlightClassName), children: children }), _jsx(IndicatorContent, { type: type, dot: dot, count: count, overflowCount: overflowCount, showZero: showZero, size: size, offset: offset, isHighlight: isHighlight, indicatorClassName: indicatorClassName, indicatorHighlightClassName: indicatorHighlightClassName })] })) }));
+};
+export default LDNotification;

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

@@ -0,0 +1,29 @@
+import { type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
+interface RootProps {
+    /**
+     * count가 증가하는 순간 true가 되는 isHighlight 값을 받는 render-prop.
+     * 어디에(트리거·인디케이터) 어떤 className을 적용할지는 전부 Custom이 결정한다.
+     */
+    children?: (isHighlight: boolean) => ReactNode;
+    /** 증가 감지 대상 알림 개수 (기본값 0). 이 값이 이전보다 커지면 isHighlight가 true가 된다 */
+    count?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+export type NotificationType = 'dot' | 'count';
+interface IndicatorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** aria-label 문구에 쓰일 알림 개수 (기본값 0) */
+    count?: number;
+    /** 'dot'이면 aria-label을 "새 알림 있음"으로, 그 외엔 "알림 N개" 문구로 표시 */
+    type?: NotificationType;
+    /** 배지가 실제로 표시 중인지 여부 — false면 aria-hidden 처리(기본값 true) */
+    isShown?: boolean;
+    /** 렌더링할 내용(포맷된 count 등). 스타일은 Custom이 결정 */
+    children?: ReactNode;
+}
+export declare const NotificationBase: {
+    Root: ({ children, count, className, style }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: ({ count, type, isShown, children, ...props }: IndicatorProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default NotificationBase;
+//# sourceMappingURL=NotificationBase.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDNotification/NotificationBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,UAAU,SAAS;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,SAAS,CAAC;IAC/C,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AA+BD,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,OAAO,CAAC;AAE/C,UAAU,cAAe,SAAQ,IAAI,CACnC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAsBD,eAAO,MAAM,gBAAgB;kDAjE4B,SAAS;8DAmD/D,cAAc;CAiBhB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/LDNotification/NotificationBase.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from 'react';
+const Root = ({ children, count = 0, className, style }) => {
+    const [isHighlight, setIsHighlight] = useState(false);
+    const prevCountRef = useRef(count);
+    const handleAnimationEnd = () => {
+        setIsHighlight(false);
+    };
+    useEffect(() => {
+        const prevCount = prevCountRef.current;
+        if (count > prevCount) {
+            setIsHighlight(true);
+        }
+        prevCountRef.current = count;
+    }, [count]);
+    return (_jsx("div", { className: className, style: style, onAnimationEnd: handleAnimationEnd, children: children?.(isHighlight) }));
+};
+const Indicator = ({ count = 0, type = 'count', isShown = true, children, ...props }) => {
+    const isDot = type === 'dot';
+    return (_jsx("div", { role: "status", "aria-label": isDot ? '새 알림 있음' : `알림 ${count}개`, "aria-hidden": !isShown, ...props, children: children }));
+};
+export const NotificationBase = {
+    Root,
+    Indicator,
+};
+export default NotificationBase;

package/dist/components/LDOTPInput/LDFormOTPInput.d.ts

@@ -0,0 +1,15 @@
+import { type Ref } from 'react';
+import { type RegisterOptions } from 'react-hook-form';
+import { type LDOTPInputProps } from './LDOTPInput.js';
+interface LDFormOTPInputProps extends Omit<LDOTPInputProps, 'value' | 'onChange' | 'isInvalid'> {
+    /** react-hook-form 필드 이름 */
+    name: string;
+    /** react-hook-form 유효성 규칙 */
+    options?: RegisterOptions;
+    ref?: Ref<HTMLInputElement>;
+    /** 커스텀 에러 메시지 (지정 시 RHF 메시지 대신 사용) */
+    customErrorMessage?: string;
+}
+declare const LDFormOTPInput: ({ name, options, variant, size, disabled, ref, customErrorMessage, children, ...props }: LDFormOTPInputProps) => import("react/jsx-runtime").JSX.Element;
+export default LDFormOTPInput;
+//# sourceMappingURL=LDFormOTPInput.d.ts.map

package/dist/components/LDOTPInput/LDFormOTPInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LDFormOTPInput.d.ts","sourceRoot":"","sources":["../../../src/components/LDOTPInput/LDFormOTPInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAGhE,UAAU,mBAAoB,SAAQ,IAAI,CACxC,eAAe,EACf,OAAO,GAAG,UAAU,GAAG,WAAW,CACnC;IACC,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,6BAA6B;IAC7B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,sCAAsC;IACtC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,QAAA,MAAM,cAAc,GAAI,yFAUrB,mBAAmB,4CAwBrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/LDOTPInput/LDFormOTPInput.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import LDOTPInput from './LDOTPInput.js';
+import LDFormField from '../LDForm/LDFormField.js';
+const LDFormOTPInput = ({ name, options, variant = 'outline', size = 'medium', disabled = false, ref, customErrorMessage = '', children, ...props }) => {
+    return (_jsx(LDFormField, { name: name, options: options, customErrorMessage: customErrorMessage, disabled: disabled, ref: ref, children: ({ field, fieldState }) => (_jsx(LDOTPInput, { ...props, value: field.value ?? '', onChange: field.onChange, isInvalid: fieldState.hasError, variant: variant, size: size, disabled: disabled, children: children })) }));
+};
+export default LDFormOTPInput;

package/dist/components/LDOTPInput/LDOTPInput.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-export type OTPInputSize = 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge';
-export type OTPInputVariant = 'filled' | 'outline' | 'ghost';
+import { type ReactNode } from 'react';
+export type OTPInputSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export type OTPInputVariant = 'filled' | 'outline';
 export interface LDOTPInputProps {
     maxLength: number;
     value: string;
@@ -10,34 +10,22 @@ export interface LDOTPInputProps {
     isInvalid?: boolean;
     variant?: OTPInputVariant;
     size?: OTPInputSize;
+    /** 그룹별 칸 수(예: [3, 3]). 지정 시 구분선으로 나눠 렌더한다. 합은 maxLength와 일치해야 함. */
+    groups?: number[];
     className?: string;
-    children: React.ReactNode;
+    /** 커스텀 레이아웃. 생략 시 groups/maxLength로 슬롯을 자동 생성한다. */
+    children?: ReactNode;
 }
-/**
- * LDOTPInput (Root)
- * 실제 입력을 처리하는 Hidden LDInput과 상태를 관리합니다.
- */
-declare const LDOTPInput: ({ maxLength, value, onChange, onComplete, disabled, isInvalid, variant, size, className, children, }: LDOTPInputProps) => import("react/jsx-runtime").JSX.Element;
-/**
- * OTPInputGroup
- * 슬롯들을 묶어주는 컨테이너입니다.
- */
+/** OTP 입력 루트 — Base.Root에 size/variant 스타일 컨텍스트를 덧씌운다. */
+declare const LDOTPInput: ({ variant, size, maxLength, groups, children, ...rest }: LDOTPInputProps) => import("react/jsx-runtime").JSX.Element;
 declare const OTPInputGroup: ({ className, children, }: {
     className?: string;
-    children: React.ReactNode;
+    children: ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
-/**
- * OTPInputSlot
- * 개별 글자를 보여주는 칸입니다.
- */
 declare const OTPInputSlot: ({ index, className, }: {
     index: number;
     className?: string;
 }) => import("react/jsx-runtime").JSX.Element;
-/**
- * OTPInputSeparator
- * 그룹 사이의 구분선입니다.
- */
 declare const OTPInputSeparator: ({ className }: {
     className?: string;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"LDOTPInput.d.ts","sourceRoot":"","sources":["../../../src/components/LDOTPInput/LDOTPInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAMN,MAAM,OAAO,CAAC;AA2Bf,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC9E,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AAE7D,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAqBD;;;GAGG;AACH,QAAA,MAAM,UAAU,GAAI,sGAWjB,eAAe,4CA4DjB,CAAC;AAEF;;;GAGG;AACH,QAAA,MAAM,aAAa,GAAI,0BAGpB;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,4CAIA,CAAC;AAEF;;;GAGG;AACH,QAAA,MAAM,YAAY,GAAI,uBAGnB;IACD,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,4CA0BA,CAAC;AAEF;;;GAGG;AACH,QAAA,MAAM,iBAAiB,GAAI,eAAe;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,4CAE/D,CAAC;AAGF,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,iBAAiB,EAAE,CAAC;AACtE,eAAe,UAAU,CAAC"}
+{"version":3,"file":"LDOTPInput.d.ts","sourceRoot":"","sources":["../../../src/components/LDOTPInput/LDOTPInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAuC,MAAM,OAAO,CAAC;AAK5E,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AACb,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEnD,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAwCD,0DAA0D;AAC1D,QAAA,MAAM,UAAU,GAAI,yDAOjB,eAAe,4CAqCjB,CAAC;AAEF,QAAA,MAAM,aAAa,GAAI,0BAGpB;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,4CAA8E,CAAC;AAEhF,QAAA,MAAM,YAAY,GAAI,uBAGnB;IACD,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,4CAuBA,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAI,eAAe;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,4CAI/D,CAAC;AAGF,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,iBAAiB,EAAE,CAAC;AACtE,eAAe,UAAU,CAAC"}