@loword/loword-design-system 0.0.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuBar.d.ts","sourceRoot":"","sources":["../../../src/components/MenuBar/MenuBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,WAAW,MAAM,eAAe,CAAC;AAkHxC,QAAA,MAAM,OAAO;oCA1GV,cAAc,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC;oCAcvC,cAAc,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC;mCAUvC,cAAc,CAAC,OAAO,WAAW,CAAC,GAAG,CAAC;oCAUtC,cAAc,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC;uCAOvC,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC;;kCAgB1C,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC;;;;kCAgB1C,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC;;;uCAoB1C,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC;gCAS1C,cAAc,CAAC,OAAO,WAAW,CAAC,SAAS,CAAC;CAc9C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/MenuBar/MenuBar.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx } 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 }));
+// 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 MenuBar = {
+    Root,
+    Logo,
+    Nav,
+    Item,
+    Trigger,
+    Content,
+    MegaContent,
+    Actions,
+    Separator,
+};
+export default MenuBar;

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

@@ -0,0 +1,43 @@
+import type { ElementType, ReactNode } from 'react';
+interface RootProps {
+    children: ReactNode;
+    className?: string;
+    trigger?: 'hover' | 'click';
+}
+interface SlotProps {
+    children?: ReactNode;
+    className?: string;
+}
+interface ItemProps {
+    value: string;
+    children: ReactNode;
+    className?: string;
+}
+interface TriggerProps {
+    as?: ElementType;
+    children: ReactNode;
+    className?: string;
+    [key: string]: unknown;
+}
+interface ContentProps extends SlotProps {
+    /** 뒤쪽 딤 + 클릭 시 닫기 */
+    backdrop?: boolean;
+    backdropClassName?: string;
+}
+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;
+    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;
+    };
+    Actions: ({ children, className }: SlotProps) => import("react/jsx-runtime").JSX.Element;
+    Separator: ({ className }: {
+        className?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export default MenuBarBase;
+//# sourceMappingURL=MenuBarBase.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuBarBase.d.ts","sourceRoot":"","sources":["../../../src/components/MenuBar/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"}

package/dist/components/MenuBar/MenuBarBase.js

@@ -0,0 +1,69 @@
+'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 cn from '../../utils/cn.js';
+const CONTENT_NAME = 'MenuBarContent';
+const MenuBarContext = createContext(null);
+const useMenuBarContext = () => {
+    const ctx = useContext(MenuBarContext);
+    if (!ctx)
+        throw new Error('MenuBarBase 서브컴포넌트는 MenuBarBase.Root 내부에서 사용해야 합니다.');
+    return ctx;
+};
+const ItemContext = createContext(null);
+const useItemContext = () => {
+    const ctx = useContext(ItemContext);
+    if (!ctx)
+        throw new Error('MenuBarBase.Trigger / Content는 MenuBarBase.Item 내부에서 사용해야 합니다.');
+    return ctx;
+};
+const Root = ({ children, className, trigger = 'hover' }) => {
+    const [openValue, setOpenValue] = useState(null);
+    const isOpen = (v) => openValue === v;
+    return (_jsx(MenuBarContext, { value: { openValue, setOpenValue, isOpen, trigger }, children: _jsx("header", { className: className, onMouseLeave: trigger === 'hover' ? () => setOpenValue(null) : undefined, children: children }) }));
+};
+const Logo = ({ children, className }) => (_jsx("div", { className: className, children: children }));
+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 { trigger, setOpenValue } = useMenuBarContext();
+    // Content 존재 여부로 드롭다운 항목인지 자동 판정 (스타일 래퍼도 같은 displayName을 가짐)
+    const hasContent = Children.toArray(children).some((c) => isValidElement(c) &&
+        c.type?.displayName === CONTENT_NAME);
+    const hoverProps = trigger === 'hover' && hasContent
+        ? { onMouseEnter: () => setOpenValue(value) }
+        : {};
+    return (_jsx(ItemContext, { value: { value, hasContent }, 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();
+    // 드롭다운 없는 항목 → 순수 링크/버튼 (토글 안 함)
+    if (!hasContent) {
+        return (_jsx(Comp, { className: className, ...rest, children: children }));
+    }
+    const handleClick = trigger === 'click'
+        ? () => setOpenValue(isOpen(value) ? null : value)
+        : undefined;
+    return (_jsx(Comp, { type: Comp === 'button' ? 'button' : undefined, "aria-expanded": isOpen(value), onClick: handleClick, className: className, ...rest, children: children }));
+};
+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 })] }));
+};
+Content.displayName = CONTENT_NAME;
+const MenuBarBase = {
+    Root,
+    Logo,
+    Nav,
+    Item,
+    Trigger,
+    Content,
+    Actions,
+    Separator,
+};
+export default MenuBarBase;

package/dist/components/Modal/Modal.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 ModalProps {
+    /** 모달 열림 상태 (제어 컴포넌트) */
+    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 Modal: ({ open, defaultOpen, onOpenChange, name, title, description, children, size, icon, buttons, scrollBehavior, className, style, onButtonClick, }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export default Modal;
+//# sourceMappingURL=Modal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.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,UAAU;IACzB,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,KAAK,GAAI,gJAeZ,UAAU,4CA0JZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Modal/Modal.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 LucideIcon from '../Icon/LucideIcon.js';
+import cn from '../../utils/cn.js';
+import Button from '../Button/Button.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 Modal = ({ 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(Button, { 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(Button, { 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 Modal;

package/dist/components/Modal/ModalBase.d.ts

@@ -0,0 +1,42 @@
+import { type ReactNode } from 'react';
+interface RootProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+}
+interface OverlayProps {
+    className?: string;
+}
+interface ContentProps {
+    className?: string;
+    children?: ReactNode;
+    style?: React.CSSProperties;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    onMouseDown?: React.MouseEventHandler<HTMLElement>;
+    onPointerDownOutside?: (e: Event) => void;
+    onEscapeKeyDown?: (e: KeyboardEvent) => void;
+}
+interface CloseProps {
+    asChild?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+interface TitleProps {
+    className?: string;
+    children?: ReactNode;
+}
+interface DescriptionProps {
+    className?: string;
+    children?: ReactNode;
+}
+export declare const ModalBase: {
+    Root: ({ open, defaultOpen, onOpenChange, children }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Overlay: ({ className }: OverlayProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ className, children, style, onClick, onMouseDown, onPointerDownOutside, onEscapeKeyDown, }: ContentProps) => import("react/jsx-runtime").JSX.Element;
+    Close: ({ asChild, className, children }: CloseProps) => import("react/jsx-runtime").JSX.Element;
+    Title: ({ className, children }: TitleProps) => import("react/jsx-runtime").JSX.Element;
+    Description: ({ className, children }: DescriptionProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default ModalBase;
+//# sourceMappingURL=ModalBase.d.ts.map

package/dist/components/Modal/ModalBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBase.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAeD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC/C,WAAW,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACnD,oBAAoB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CAC9C;AAgCD,UAAU,UAAU;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAWD,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAOD,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAQD,eAAO,MAAM,SAAS;0DA5GuC,SAAS;6BAiBtC,YAAY;4GAiCzC,YAAY;8CA4BkC,UAAU;qCAcnB,UAAU;2CAUJ,gBAAgB;CAa7D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/Modal/ModalBase.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as Dialog from '@radix-ui/react-dialog';
+import cn from '../../utils/cn.js';
+const Root = ({ open, defaultOpen, onOpenChange, children }) => {
+    return (_jsx(Dialog.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: children }));
+};
+const Overlay = ({ className }) => {
+    return (_jsx(Dialog.Portal, { children: _jsx(Dialog.Overlay, { className: cn('fixed inset-0 z-50 bg-black/30', 'data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out', className) }) }));
+};
+const Content = ({ className, children, style, onClick, onMouseDown, onPointerDownOutside, onEscapeKeyDown, }) => {
+    return (_jsx(Dialog.Portal, { children: _jsx(Dialog.Content, { className: cn('fixed z-50', 'data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out', className), style: style, onClick: onClick, onMouseDown: onMouseDown, onPointerDownOutside: onPointerDownOutside, onEscapeKeyDown: onEscapeKeyDown, children: children }) }));
+};
+const Close = ({ asChild, className, children }) => {
+    return (_jsx(Dialog.Close, { asChild: asChild, className: className, children: children }));
+};
+const Title = ({ className, children }) => {
+    return _jsx(Dialog.Title, { className: className, children: children });
+};
+const Description = ({ className, children }) => {
+    return (_jsx(Dialog.Description, { className: className, children: children }));
+};
+export const ModalBase = {
+    Root,
+    Overlay,
+    Content,
+    Close,
+    Title,
+    Description,
+};
+export default ModalBase;

package/dist/components/Modal/openModal.d.ts

@@ -0,0 +1,24 @@
+import { type ModalSize } from './Modal.js';
+interface ModalOptions<T = undefined> {
+    name?: string;
+    title?: string;
+    description?: string;
+    content?: React.ReactNode | ((args: {
+        onClose: (value?: T) => void;
+    }) => React.ReactNode);
+    buttons?: {
+        value: T;
+        label: string;
+        variant?: 'solid' | 'outline' | 'ghost';
+        color?: 'neutral' | 'point' | 'danger';
+        onClick?: () => void | boolean | Promise<void | boolean>;
+    }[];
+    /** 버튼 배치 방향 */
+    buttonsDirection?: 'row' | 'column';
+    size?: ModalSize;
+    icon?: 'success' | 'fail';
+    onBeforeClose?: () => Promise<boolean> | boolean;
+}
+declare const modal: <T = undefined>(options: ModalOptions<T>) => Promise<T | undefined>;
+export default modal;
+//# sourceMappingURL=openModal.d.ts.map

package/dist/components/Modal/openModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"openModal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/openModal.tsx"],"names":[],"mappings":"AACA,OAAc,EAAoB,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAElE,UAAU,YAAY,CAAC,CAAC,GAAG,SAAS;IAClC,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,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;CAClD;AAED,QAAA,MAAM,KAAK,GAAI,CAAC,GAAG,SAAS,EAC1B,SAAS,YAAY,CAAC,CAAC,CAAC,KACvB,OAAO,CAAC,CAAC,GAAG,SAAS,CAgEvB,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Modal/openModal.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRoot } from 'react-dom/client';
+import Modal from './Modal.js';
+const modal = (options) => {
+    return new Promise((resolve) => {
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+        const root = createRoot(container);
+        const cleanup = () => {
+            root.unmount();
+            container.remove();
+        };
+        const handleClose = async (value) => {
+            try {
+                if (options.onBeforeClose) {
+                    const canClose = await options.onBeforeClose();
+                    if (!canClose)
+                        return;
+                }
+            }
+            catch (e) {
+                console.error('onBeforeClose error:', e);
+            }
+            cleanup();
+            resolve(value);
+        };
+        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) {
+                    handleClose(btn.value);
+                }
+                return false; // Modal 내부의 기본 닫기 동작 방지
+            },
+        }));
+        const content = typeof options.content === 'function'
+            ? options.content({ onClose: handleClose })
+            : options.content;
+        root.render(_jsx(Modal, { open: true, onOpenChange: (open) => {
+                if (!open)
+                    handleClose(undefined);
+            }, name: options.name, title: options.title, description: options.description, size: options.size, icon: options.icon, buttons: list ? { direction: options.buttonsDirection, list } : undefined, children: content }));
+    });
+};
+export default modal;

package/dist/components/OTPInput/OTPInput.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+export type OTPInputSize = 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge';
+export type OTPInputVariant = 'filled' | 'outline' | 'ghost';
+export interface OTPInputProps {
+    maxLength: number;
+    value: string;
+    onChange: (value: string) => void;
+    onComplete?: (value: string) => void;
+    disabled?: boolean;
+    isInvalid?: boolean;
+    variant?: OTPInputVariant;
+    size?: OTPInputSize;
+    className?: string;
+    children: React.ReactNode;
+}
+/**
+ * OTPInput (Root)
+ * 실제 입력을 처리하는 Hidden Input과 상태를 관리합니다.
+ */
+declare const OTPInput: ({ maxLength, value, onChange, onComplete, disabled, isInvalid, variant, size, className, children, }: OTPInputProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * OTPInputGroup
+ * 슬롯들을 묶어주는 컨테이너입니다.
+ */
+declare const OTPInputGroup: ({ className, children, }: {
+    className?: string;
+    children: React.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;
+export { OTPInput, OTPInputGroup, OTPInputSlot, OTPInputSeparator };
+export default OTPInput;
+//# sourceMappingURL=OTPInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OTPInput.d.ts","sourceRoot":"","sources":["../../../src/components/OTPInput/OTPInput.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,aAAa;IAC5B,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,QAAQ,GAAI,sGAWf,aAAa,4CA4Df,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,QAAQ,EAAE,aAAa,EAAE,YAAY,EAAE,iBAAiB,EAAE,CAAC;AACpE,eAAe,QAAQ,CAAC"}

package/dist/components/OTPInput/OTPInput.js

@@ -0,0 +1,87 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useContext, createContext, useEffect, } from 'react';
+import cn from '../../utils/cn.js';
+const OTPInputContext = createContext(null);
+function useOTPInputContext() {
+    const context = useContext(OTPInputContext);
+    if (!context) {
+        throw new Error('OTPInput 하위 컴포넌트는 OTPInput 안에서 사용되어야 합니다.');
+    }
+    return context;
+}
+const sizeClasses = {
+    xSmall: 'w-[16px] h-[16px] display10',
+    small: 'w-[24px] h-[24px] display12',
+    medium: 'w-[32px] h-[32px] display14',
+    large: 'w-[40px] h-[40px] display16',
+    xLarge: 'w-[64px] h-[64px] display20',
+};
+const variantClasses = {
+    filled: 'bg-lb50 border-2 border-transparent text-lb900',
+    outline: 'bg-transparent border border-mono200',
+    ghost: 'bg-transparent border-b-2 border-mono200 rounded-none',
+};
+// ── Components ──
+/**
+ * OTPInput (Root)
+ * 실제 입력을 처리하는 Hidden Input과 상태를 관리합니다.
+ */
+const OTPInput = ({ maxLength, value, onChange, onComplete, disabled = false, isInvalid = false, variant = 'outline', size = 'medium', className, children, }) => {
+    const inputRef = useRef(null);
+    const [isFocused, setIsFocused] = useState(false);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    useEffect(() => {
+        if (isFocused) {
+            setFocusedIndex(value.length);
+        }
+        else {
+            setFocusedIndex(-1);
+        }
+    }, [value, isFocused]);
+    const handleInputChange = (e) => {
+        const newValue = e.target.value
+            .replace(/[^0-9a-zA-Z]/g, '')
+            .slice(0, maxLength);
+        onChange(newValue);
+        if (newValue.length === maxLength && onComplete) {
+            onComplete(newValue);
+        }
+    };
+    return (_jsx(OTPInputContext.Provider, { value: {
+            value,
+            maxLength,
+            focusedIndex,
+            isInvalid,
+            disabled,
+            size,
+            variant,
+        }, children: _jsxs("div", { className: cn('relative flex items-center gap-2 cursor-text select-none', disabled && 'opacity-50 cursor-not-allowed', className), onClick: () => !disabled && inputRef.current?.focus(), children: [_jsx("input", { ref: inputRef, type: "text", inputMode: "numeric", autoComplete: "one-time-code", value: value, onChange: handleInputChange, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), disabled: disabled, className: "absolute inset-0 opacity-0 cursor-default pointer-events-none" }), children] }) }));
+};
+/**
+ * OTPInputGroup
+ * 슬롯들을 묶어주는 컨테이너입니다.
+ */
+const OTPInputGroup = ({ className, children, }) => {
+    return (_jsx("div", { className: cn('flex items-center gap-2', className), children: children }));
+};
+/**
+ * OTPInputSlot
+ * 개별 글자를 보여주는 칸입니다.
+ */
+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" }))] }));
+};
+/**
+ * OTPInputSeparator
+ * 그룹 사이의 구분선입니다.
+ */
+const OTPInputSeparator = ({ className }) => {
+    return _jsx("div", { className: cn('w-2 h-[2px] bg-mono300 mx-1', className) });
+};
+// ── Export ──
+export { OTPInput, OTPInputGroup, OTPInputSlot, OTPInputSeparator };
+export default OTPInput;

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,12 @@
+import type React from 'react';
+export interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    numbersToShow?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const Pagination: ({ currentPage, totalPages, onPageChange, numbersToShow, className, style, }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+export default Pagination;
+//# sourceMappingURL=Pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,eAAe;IAC9B,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,UAAU,GAAI,6EAOjB,eAAe,4CAYjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PaginationBase from './PaginationBase.js';
+import cn from '../../utils/cn.js';
+const Pagination = ({ 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, {})] }) }));
+export default Pagination;