@loword/loword-design-system 0.0.9 → 0.0.11

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

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, className: options.className, style: options.style, buttons: list ? { direction: options.buttonsDirection, list } : undefined, children: content }));
+        };
+        root.render(_jsx(ModalHost, {}));
+    });
 };
 export default LDModal;

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

@@ -0,0 +1,51 @@
+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 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';
+    /** 추가 CSS 클래스 (모달 패널에 적용) */
+    className?: string;
+    /** 인라인 스타일 (모달 패널에 적용) */
+    style?: React.CSSProperties;
+    /** 버튼 클릭 시 해당 버튼의 value를 전달하는 콜백 */
+    onButtonClick?: (value: unknown) => void;
+}
+declare const LDModalView: ({ open, defaultOpen, onOpenChange, name, title, description, children, size, icon, buttons, scrollBehavior, className, 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,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"}

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', 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, { 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-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/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;AAkBD;;;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,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"}

package/dist/components/LDOTPInput/LDOTPInput.js

@@ -18,8 +18,9 @@ const sizeClasses = {
     xLarge: 'w-[64px] h-[64px] display20',
 };
 const variantClasses = {
-    filled: 'bg-lb50 border-2 border-transparent text-lb900',
-    outline: 'bg-transparent border border-mono200',
+    filled: 'bg-lb50 outline-2 outline-transparent [outline-style:solid] -outline-offset-2 text-lb900',
+    outline: 'bg-transparent outline-1 outline-mono200 [outline-style:solid] -outline-offset-1',
+    // ghost는 하단 밑줄(border-b-2)이라 전체 링인 outline으로 대체 불가 → 유지
     ghost: 'bg-transparent border-b-2 border-mono200 rounded-none',
 };
 // ── Components ──
@@ -73,7 +74,7 @@ const OTPInputSlot = ({ index, className, }) => {
     const { value, focusedIndex, isInvalid, variant, size, disabled } = useOTPInputContext();
     const char = value[index];
     const isActive = focusedIndex === index;
-    return (_jsxs("div", { className: cn('relative flex items-center justify-center font-bold transition-all rounded-[5px]', sizeClasses[size], variantClasses[variant], isActive && 'border-lb500 ring-2 ring-lb500/20', isActive && variant === 'filled' && 'bg-white', isActive && variant === 'ghost' && 'border-lb500', isInvalid && 'border-danger500 text-danger500 bg-tintRed', className), children: [char, isActive && !disabled && (_jsx("div", { className: "absolute inset-y-1/4 w-[2px] bg-lb500 animate-pulse" }))] }));
+    return (_jsxs("div", { className: cn('relative flex items-center justify-center font-bold transition-all rounded-[5px]', sizeClasses[size], variantClasses[variant], isActive && 'border-lb500 ring-2 ring-lb500', isActive && variant === 'filled' && 'bg-white', isActive && variant === 'ghost' && 'border-lb500', isInvalid && 'border-danger500 text-danger500 bg-tintRed', className), children: [char, isActive && !disabled && (_jsx("div", { className: "absolute inset-y-1/4 w-[2px] bg-lb500 animate-pulse" }))] }));
 };
 /**
  * OTPInputSeparator

package/dist/components/LDPagination/LDPagination.d.ts

@@ -1,12 +1,16 @@
 import type React from 'react';
+/** 페이지네이션 크기 프리셋 */
+export type PaginationSize = 'small' | 'medium' | 'large';
 export interface LDPaginationProps {
     currentPage: number;
     totalPages: number;
     onPageChange: (page: number) => void;
     numbersToShow?: number;
+    /** 페이지네이션 크기 프리셋 (기본 small) */
+    size?: PaginationSize;
     className?: string;
     style?: React.CSSProperties;
 }
-declare const LDPagination: ({ currentPage, totalPages, onPageChange, numbersToShow, className, style, }: LDPaginationProps) => import("react/jsx-runtime").JSX.Element;
+declare const LDPagination: ({ currentPage, totalPages, onPageChange, numbersToShow, size, className, style, }: LDPaginationProps) => import("react/jsx-runtime").JSX.Element;
 export default LDPagination;
 //# sourceMappingURL=LDPagination.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LDPagination.d.ts","sourceRoot":"","sources":["../../../src/components/LDPagination/LDPagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,YAAY,GAAI,6EAOnB,iBAAiB,4CAYnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"LDPagination.d.ts","sourceRoot":"","sources":["../../../src/components/LDPagination/LDPagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,oBAAoB;AACpB,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAY1D,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,YAAY,GAAI,mFAQnB,iBAAiB,4CAmBnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/LDPagination/LDPagination.js

@@ -1,5 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PaginationBase from './PaginationBase.js';
 import cn from '../../utils/cn.js';
-const LDPagination = ({ currentPage, totalPages, onPageChange, numbersToShow = 5, className, style, }) => (_jsx(PaginationBase.Provider, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange, children: _jsxs(PaginationBase.Root, { className: cn('py-5', className), style: style, children: [_jsx(PaginationBase.Prev, {}), _jsx(PaginationBase.List, { numbersToShow: numbersToShow }), _jsx(PaginationBase.Next, {})] }) }));
+/** size별 내부 버튼 크기/패딩 매핑 */
+const sizePresets = {
+    small: { navSize: '2xsmall', itemSize: 'xsmall' },
+    medium: { navSize: 'xsmall', itemSize: 'small' },
+    large: { navSize: 'small', itemSize: 'medium', itemClassName: 'p-5' },
+};
+const LDPagination = ({ currentPage, totalPages, onPageChange, numbersToShow = 5, size = 'small', className, style, }) => {
+    const preset = sizePresets[size];
+    return (_jsx(PaginationBase.Provider, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange, children: _jsxs(PaginationBase.Root, { className: cn('py-5', className), style: style, children: [_jsx(PaginationBase.Prev, { size: preset.navSize }), _jsx(PaginationBase.List, { numbersToShow: numbersToShow, size: preset.itemSize, className: preset.itemClassName }), _jsx(PaginationBase.Next, { size: preset.navSize })] }) }));
+};
 export default LDPagination;

package/dist/components/LDPagination/PaginationBase.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, ReactNode } from 'react';
+import { type ButtonSize } from '../LDButton/LDButton.js';
 interface ProviderProps {
     children: ReactNode;
     currentPage: number;
@@ -9,28 +10,36 @@ interface RootProps extends HTMLAttributes<HTMLElement> {
     children?: ReactNode;
 }
 interface PrevProps {
+    /** 이전 버튼 크기 (LDButton size 프리셋) */
+    size?: ButtonSize;
     className?: string;
 }
 interface NextProps {
+    /** 다음 버튼 크기 (LDButton size 프리셋) */
+    size?: ButtonSize;
     className?: string;
 }
 interface ListProps {
     numbersToShow?: number;
+    /** 페이지 번호 버튼 크기 (LDButton size 프리셋) */
+    size?: ButtonSize;
     className?: string;
 }
 interface ItemProps {
     page: number;
     isActive?: boolean;
+    /** 페이지 번호 버튼 크기 (LDButton size 프리셋) */
+    size?: ButtonSize;
     onClick?: () => void;
     className?: string;
 }
 declare const PaginationBase: {
     Provider: ({ children, currentPage, totalPages, onPageChange, }: ProviderProps) => import("react/jsx-runtime").JSX.Element;
     Root: ({ className, children, ...props }: RootProps) => import("react/jsx-runtime").JSX.Element;
-    Prev: ({ className }: PrevProps) => import("react/jsx-runtime").JSX.Element;
-    Next: ({ className }: NextProps) => import("react/jsx-runtime").JSX.Element;
-    List: ({ numbersToShow, className }: ListProps) => import("react/jsx-runtime").JSX.Element;
-    Item: ({ page, isActive, onClick, className }: ItemProps) => import("react/jsx-runtime").JSX.Element;
+    Prev: ({ size, className }: PrevProps) => import("react/jsx-runtime").JSX.Element;
+    Next: ({ size, className }: NextProps) => import("react/jsx-runtime").JSX.Element;
+    List: ({ numbersToShow, size, className }: ListProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ page, isActive, size, onClick, className, }: ItemProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default PaginationBase;
 //# sourceMappingURL=PaginationBase.d.ts.map

package/dist/components/LDPagination/PaginationBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDPagination/PaginationBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA0BvD,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAeD,UAAU,SAAU,SAAQ,cAAc,CAAC,WAAW,CAAC;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAcD,UAAU,SAAS;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6BD,UAAU,SAAS;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6BD,UAAU,SAAS;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0BD,UAAU,SAAS;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAwBD,QAAA,MAAM,cAAc;qEAhJjB,aAAa;8CAYiC,SAAS;0BAgB7B,SAAS;0BA+BT,SAAS;yCAgCU,SAAS;mDA+BH,SAAS;CA6B9D,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"PaginationBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDPagination/PaginationBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAiB,EAAE,KAAK,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAwBjE,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAeD,UAAU,SAAU,SAAQ,cAAc,CAAC,WAAW,CAAC;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAcD,UAAU,SAAS;IACjB,mCAAmC;IACnC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6BD,UAAU,SAAS;IACjB,mCAAmC;IACnC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6BD,UAAU,SAAS;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uCAAuC;IACvC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2BD,UAAU,SAAS;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA8BD,QAAA,MAAM,cAAc;qEA/JjB,aAAa;8CAYiC,SAAS;gCAkBX,SAAS;gCAiCT,SAAS;+CAkCS,SAAS;0DAwCvE,SAAS;CA6BX,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/LDPagination/PaginationBase.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import cn from '../../utils/cn.js';
 import LDButton from '../LDButton/LDButton.js';
 import { calculatePaginationOptions } from './paginationUtils.js';
@@ -12,26 +13,26 @@ const usePaginationContext = () => {
 };
 const Provider = ({ children, currentPage, totalPages, onPageChange, }) => (_jsx(PaginationContext, { value: { currentPage, totalPages, onPageChange }, children: children }));
 const Root = ({ className, children, ...props }) => (_jsx("nav", { role: "navigation", "aria-label": "pagination", className: cn('flex flex-row gap-2.5 items-center', className), ...props, children: children }));
-const Prev = ({ className }) => {
+const Prev = ({ size = '2xsmall', className }) => {
     const { currentPage, onPageChange } = usePaginationContext();
     const canPrevious = currentPage > 1;
-    return (_jsx(LDButton, { variant: "outline", color: "neutral", size: "2xsmall", shape: "capsule", leftIcon: "chevronLeft", compact: true, disabled: !canPrevious, onClick: () => onPageChange(currentPage - 1), "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0", className: cn(canPrevious
+    return (_jsx(LDButton, { variant: "outline", color: "neutral", size: size, shape: "capsule", leftIcon: _jsx(ChevronLeft, {}), compact: true, disabled: !canPrevious, onClick: () => onPageChange(currentPage - 1), "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0", className: cn(canPrevious
             ? 'bg-neutral100 text-neutral400'
             : 'bg-neutral50 text-neutral200', canPrevious && 'hover:bg-neutral200', className) }));
 };
-const Next = ({ className }) => {
+const Next = ({ size = '2xsmall', className }) => {
     const { currentPage, totalPages, onPageChange } = usePaginationContext();
     const canNext = currentPage < totalPages;
-    return (_jsx(LDButton, { variant: "outline", color: "neutral", size: "2xsmall", shape: "capsule", leftIcon: "chevronRight", disabled: !canNext, compact: true, onClick: () => onPageChange(currentPage + 1), "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0", className: cn(canNext
+    return (_jsx(LDButton, { variant: "outline", color: "neutral", size: size, shape: "capsule", leftIcon: _jsx(ChevronRight, {}), disabled: !canNext, compact: true, onClick: () => onPageChange(currentPage + 1), "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0", className: cn(canNext
             ? 'bg-neutral100 text-neutral400'
             : 'bg-neutral50 text-neutral200', canNext && 'hover:bg-neutral200', className) }));
 };
-const List = ({ numbersToShow = 5, className }) => {
+const List = ({ numbersToShow = 5, size = 'xsmall', className }) => {
     const { currentPage, totalPages, onPageChange } = usePaginationContext();
     const pages = calculatePaginationOptions(currentPage, totalPages, numbersToShow);
-    return (_jsx(_Fragment, { children: pages.map((page, idx) => (_jsx(Item, { page: page, isActive: currentPage === page, onClick: () => onPageChange(page), className: className }, `page_${page}_${idx}`))) }));
+    return (_jsx(_Fragment, { children: pages.map((page, idx) => (_jsx(Item, { page: page, isActive: currentPage === page, size: size, onClick: () => onPageChange(page), className: className }, `page_${page}_${idx}`))) }));
 };
-const Item = ({ page, isActive, onClick, className }) => (_jsx(LDButton, { variant: "ghost", shape: "capsule", color: isActive ? 'point' : 'neutral', size: "xsmall", compact: true, onClick: onClick, "aria-label": `${page} 페이지`, "aria-current": isActive ? 'page' : undefined, className: cn('outline-none p-3.5 regular', !isActive && 'text-neutral400', className), children: page }));
+const Item = ({ page, isActive, size = 'xsmall', onClick, className, }) => (_jsx(LDButton, { variant: "ghost", shape: "capsule", color: isActive ? 'point' : 'neutral', size: size, compact: true, onClick: onClick, "aria-label": `${page} 페이지`, "aria-current": isActive ? 'page' : undefined, className: cn('outline-none regular', !isActive && 'text-neutral400', className), children: page }));
 // ── Export ──
 const PaginationBase = {
     Provider,

package/dist/components/LDPopover/LDPopover.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isValidElement } from 'react';
 import PopoverBase from './PopoverBase.js';
-import LucideIcon from '../Icon/LucideIcon.js';
 import cn from '../../utils/cn.js';
+import { Ellipsis, EllipsisVertical } from 'lucide-react';
 // ── 스타일 매핑 ──
 const itemColorClasses = {
     blue: 'hover:bg-tintBlue text-lb500',
@@ -16,11 +16,11 @@ const iconSizes = {
 };
 const LDPopover = ({ items, content, children, open, onOpenChange, iconSize = 'sm', isHorizontal = false, align = 'end', offset, contentWidth, triggerClassName, popoverClassName, style, }) => {
     const isAsChild = isValidElement(children);
-    return (_jsxs(PopoverBase.Root, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverBase.Trigger, { asChild: isAsChild, style: style, className: cn('flex items-center justify-center cursor-pointer ld-transition rounded-[5px] outline-none', !isAsChild && 'px-2 py-1 min-h-6 hover:bg-mono100', triggerClassName), children: isAsChild ? (children) : (_jsx(LucideIcon, { name: isHorizontal ? 'ellipsis' : 'ellipsisVertical', size: iconSizes[iconSize], className: "text-neutral500" })) }), _jsx(PopoverBase.Content, { align: align, sideOffset: offset, style: {
+    return (_jsxs(PopoverBase.Root, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverBase.Trigger, { asChild: isAsChild, style: style, className: cn('flex items-center justify-center cursor-pointer ld-transition rounded-[5px] outline-none', !isAsChild && 'p-1 min-h-6 hover:bg-mono100', triggerClassName), children: isAsChild ? (children) : isHorizontal ? (_jsx(Ellipsis, { size: iconSizes[iconSize], className: "text-neutral500" })) : (_jsx(EllipsisVertical, { size: iconSizes[iconSize], className: "text-neutral500" })) }), _jsx(PopoverBase.Content, { align: align, sideOffset: offset, style: {
                     width: contentWidth === 'trigger'
                         ? 'var(--radix-popover-trigger-width)'
                         : contentWidth,
-                }, className: cn('min-w-[160px] rounded-[5px] bg-white border border-mono100 p-xs flex flex-col gap-xs z-50 shadow-lg', popoverClassName), children: content
+                }, className: cn('min-w-40 rounded-[5px] bg-white border border-mono100 p-xs flex flex-col gap-xs z-50 shadow-lg', popoverClassName), children: content
                     ? content
                     : items?.map((item, index) => (_jsx("button", { type: "button", className: cn('w-full flex items-center cursor-pointer justify-start px-2 py-1.5 rounded-[5px] ld-transition display12 text-left', itemColorClasses[item.color ?? 'gray']), onClick: (e) => {
                             e.stopPropagation();

package/dist/components/LDRadio/LDFormRadioGroup.d.ts

@@ -0,0 +1,13 @@
+import { type RegisterOptions } from 'react-hook-form';
+import { type LDRadioGroupProps } from './LDRadioGroup.js';
+interface LDFormRadioGroupProps extends Omit<LDRadioGroupProps, 'value' | 'onChange'> {
+    name: string;
+    options?: RegisterOptions;
+    customErrorMessage?: string;
+    isHiddenErrorMessage?: boolean;
+    errorClassName?: string;
+    disabled?: boolean;
+}
+declare const LDFormRadioGroup: ({ name, options, customErrorMessage, isHiddenErrorMessage, errorClassName, disabled, ...props }: LDFormRadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default LDFormRadioGroup;
+//# sourceMappingURL=LDFormRadioGroup.d.ts.map

package/dist/components/LDRadio/LDFormRadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LDFormRadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/LDRadio/LDFormRadioGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAqB,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAItE,UAAU,qBAAsB,SAAQ,IAAI,CAC1C,iBAAiB,EACjB,OAAO,GAAG,UAAU,CACrB;IACC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,gBAAgB,GAAI,iGAQvB,qBAAqB,4CA8BvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/LDRadio/{FormRadioGroup.js → LDFormRadioGroup.js}

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import LDRadioGroup from './LDRadioGroup.js';
 import FormField from '../LDForm/LDFormField.js';
 import FormErrorMessage from '../LDForm/LDFormErrorMessage.js';
-const FormRadioGroup = ({ name, options, customErrorMessage = '', isHiddenErrorMessage = true, errorClassName, disabled = false, ...props }) => {
+const LDFormRadioGroup = ({ name, options, customErrorMessage = '', isHiddenErrorMessage = true, errorClassName, disabled = false, ...props }) => {
     return (_jsx(FormField, { name: name, options: options, customErrorMessage: customErrorMessage, disabled: disabled, children: ({ field, fieldState }) => (_jsxs("div", { className: "relative", children: [_jsx(LDRadioGroup, { ...props, name: name, value: field.value ?? '', onChange: field.onChange, disabled: disabled, "aria-invalid": field['aria-invalid'], "aria-describedby": field['aria-describedby'] }), !isHiddenErrorMessage && (_jsx(FormErrorMessage, { error: fieldState.error, disabled: disabled, className: errorClassName }))] })) }));
 };
-export default FormRadioGroup;
+export default LDFormRadioGroup;

package/dist/components/LDRadio/LDRadio.d.ts

@@ -1,6 +1,6 @@
 import { type InputHTMLAttributes, type Ref } from 'react';
 type RadioSize = 'sm' | 'md';
-type RadioType = 'default' | 'pill';
+type RadioType = 'default' | 'circle' | 'pill';
 export interface LDRadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'checked' | 'disabled'> {
     /** controlled 체크 상태 */
     checked?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"LDRadio.d.ts","sourceRoot":"","sources":["../../../src/components/LDRadio/LDRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAK3D,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAC7B,KAAK,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAkBpC,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,CACzC;IACC,uBAAuB;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8BAA8B;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB;IAClB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yCAAyC;IACzC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,aAAa;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAmFD,QAAA,MAAM,OAAO,GAAI,4GAYd,YAAY,4CA0Cd,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"LDRadio.d.ts","sourceRoot":"","sources":["../../../src/components/LDRadio/LDRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAK3D,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAC7B,KAAK,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAkB/C,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,CACzC;IACC,uBAAuB;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8BAA8B;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB;IAClB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yCAAyC;IACzC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,aAAa;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AA6FD,QAAA,MAAM,OAAO,GAAI,4GAYd,YAAY,4CAgDd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/LDRadio/LDRadio.js

@@ -16,13 +16,22 @@ const labelSizeClasses = {
 // ── Inner: pill 타입 ──
 const PillInner = ({ label, ref, ...props }) => {
     const { checked } = useRadioContext();
-    return (_jsxs(_Fragment, { children: [_jsx(RadioBase.HiddenInput, { ref: ref, ...props }), _jsxs("div", { className: "relative flex items-center", children: [_jsx(RadioBase.Indicator, { icon: "check", iconSize: 16, className: "absolute left-0", iconClassName: cn('shrink-0 ld-transition', checked ? 'opacity-100' : 'opacity-0') }), label && (_jsx(RadioBase.Label, { className: cn('ld-transition text-nowrap', checked ? 'pl-5' : 'pl-sm pr-sm'), children: label }))] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(RadioBase.HiddenInput, { ref: ref, ...props }), _jsxs("div", { className: "relative flex items-center", children: [_jsx(RadioBase.Indicator, { iconSize: 16, className: "absolute left-0", iconClassName: cn('shrink-0 ld-transition', checked ? 'opacity-100' : 'opacity-0') }), label && (_jsx(RadioBase.Label, { className: cn('ld-transition text-nowrap', checked ? 'pl-5' : 'pl-sm pr-sm'), children: label }))] })] }));
 };
-// ── Inner: default 타입 ──
-const DefaultInner = ({ size, label, ref, ...props }) => {
+// ── Inner: default, circle 타입 ──
+const DefaultInner = ({ type, size, label, ref, ...props }) => {
     const { checked, disabled } = useRadioContext();
-    return (_jsxs(_Fragment, { children: [_jsx(RadioBase.HiddenInput, { ref: ref, ...props }), _jsx(RadioBase.Indicator, { icon: "check", iconSize: checkIconSizes[size], className: cn('flex items-center justify-center rounded-full ld-transition border-2 border-transparent shrink-0', !disabled &&
-                    (checked ? 'border-lb500 bg-lb500' : 'bg-white border-neutral100'), disabled && 'border-neutral200 bg-mono100', radioSizeClasses[size]), iconClassName: cn('shrink-0 ld-transition', checked ? (disabled ? 'text-neutral500' : 'text-white') : 'opacity-0') }), label && (_jsx(RadioBase.Label, { className: "text-neutral500", children: label }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(RadioBase.HiddenInput, { ref: ref, ...props }), _jsx(RadioBase.Indicator, { type: type, iconSize: checkIconSizes[size], className: cn('flex items-center justify-center rounded-full ld-transition outline-transparent [outline-style:solid] -outline-offset-1 shrink-0', type === 'circle' ? 'outline-1' : 'outline-2', {
+                    'outline-lb500 bg-lb500': !disabled && checked && type === 'default',
+                    'bg-white outline-neutral100': !disabled && !checked && type === 'default',
+                    'bg-white outline-lb500': !disabled && type === 'circle',
+                }, disabled && 'outline-neutral200 bg-mono100', radioSizeClasses[size]), iconClassName: cn('shrink-0 ld-transition', {
+                    'text-neutral300': checked && disabled && type === 'default',
+                    'text-white': checked && !disabled && type === 'default',
+                    'bg-neutral300': checked && disabled && type === 'circle',
+                    'text-lb500 bg-lb500': checked && !disabled && type === 'circle',
+                    'opacity-0': !checked,
+                }) }), label && (_jsx(RadioBase.Label, { className: "text-neutral500", children: label }))] }));
 };
 const LDRadio = ({ checked, defaultChecked, onCheckedChange, size = 'sm', type = 'default', label, disabled = false, className, style, ref, ...props }) => {
     if (type === 'pill') {
@@ -32,6 +41,6 @@ const LDRadio = ({ checked, defaultChecked, onCheckedChange, size = 'sm', type =
             // className을 함수로 받아 Root 내부의 resolved 값을 주입함.
             className: (c) => cn('items-center gap-2 rounded-full py-sm px-[15px] ld-transition display14 bold', c ? 'bg-tintBlue text-lb500' : 'bg-mono100 text-mono500', disabled && 'opacity-50 cursor-not-allowed', className), children: _jsx(PillInner, { label: label, ref: ref, ...props }) }));
     }
-    return (_jsx(RadioBase.Root, { checked: checked, defaultChecked: defaultChecked, onCheckedChange: onCheckedChange, disabled: disabled, style: style, className: cn('items-center gap-[5px]', labelSizeClasses[size], className), children: _jsx(DefaultInner, { size: size, label: label, ref: ref, ...props }) }));
+    return (_jsx(RadioBase.Root, { checked: checked, defaultChecked: defaultChecked, onCheckedChange: onCheckedChange, disabled: disabled, style: style, className: cn('items-center gap-[5px]', labelSizeClasses[size], className), children: _jsx(DefaultInner, { type: type, size: size, label: label, ref: ref, ...props }) }));
 };
 export default LDRadio;

package/dist/components/LDRadio/LDRadioGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LDRadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/LDRadio/LDRadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAGD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC5C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,YAAY,GAAI,6IAYnB,iBAAiB,4CAuBnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"LDRadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/LDRadio/LDRadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAGD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC5C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,YAAY,GAAI,6IAYnB,iBAAiB,4CAwBnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/LDRadio/LDRadioGroup.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import LDRadio from './LDRadio.js';
 import cn from '../../utils/cn.js';
 const LDRadioGroup = ({ items, value, onChange, disabled = false, type = 'pill', size = 'sm', name, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedby, className, style, }) => {
-    return (_jsx("div", { role: "radiogroup", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, className: cn('flex flex-row gap-2.5', className), style: style, children: items.map((option) => (_jsx(LDRadio, { name: name, type: type, size: size, checked: value === option.value, onCheckedChange: () => onChange?.(option.value), label: option.label, disabled: disabled || option.disabled }, option.value))) }));
+    return (_jsx("div", { role: "radiogroup", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, className: cn('flex flex-row gap-5'), style: style, children: items.map((option) => (_jsx(LDRadio, { name: name, type: type, size: size, checked: value === option.value, className: className, onCheckedChange: () => onChange?.(option.value), label: option.label, disabled: disabled || option.disabled }, option.value))) }));
 };
 export default LDRadioGroup;