@loword/loword-design-system 0.0.2 → 0.0.4

package/dist/components/LDModal/LDModal.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 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)));
+                                    }) }))] })] }) })] }));
+};
+export default LDModal;

package/dist/components/LDModal/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/LDModal/ModalBase.d.ts.map

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

@@ -0,0 +1,24 @@
+import { type ModalSize } from './LDModal.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/LDModal/openModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"openModal.d.ts","sourceRoot":"","sources":["../../../src/components/LDModal/openModal.tsx"],"names":[],"mappings":"AACA,OAAgB,EAAoB,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtE,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/LDModal/openModal.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRoot } from 'react-dom/client';
+import LDModal from './LDModal.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; // LDModal 내부의 기본 닫기 동작 방지
+            },
+        }));
+        const content = typeof options.content === 'function'
+            ? options.content({ onClose: handleClose })
+            : options.content;
+        root.render(_jsx(LDModal, { 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/LDOTPInput/LDOTPInput.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 LDOTPInputProps {
+    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;
+}
+/**
+ * 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
+ * 슬롯들을 묶어주는 컨테이너입니다.
+ */
+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 { LDOTPInput, OTPInputGroup, OTPInputSlot, OTPInputSeparator };
+export default LDOTPInput;
+//# sourceMappingURL=LDOTPInput.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/LDOTPInput/LDOTPInput.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('LDOTPInput 하위 컴포넌트는 LDOTPInput 안에서 사용되어야 합니다.');
+    }
+    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 ──
+/**
+ * LDOTPInput (Root)
+ * 실제 입력을 처리하는 Hidden LDInput과 상태를 관리합니다.
+ */
+const LDOTPInput = ({ 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 { LDOTPInput, OTPInputGroup, OTPInputSlot, OTPInputSeparator };
+export default LDOTPInput;

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

@@ -0,0 +1,12 @@
+import type React from 'react';
+export interface LDPaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    numbersToShow?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const LDPagination: ({ currentPage, totalPages, onPageChange, numbersToShow, 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

@@ -0,0 +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"}

package/dist/components/LDPagination/LDPagination.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 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, {})] }) }));
+export default LDPagination;

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

@@ -0,0 +1,36 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+interface ProviderProps {
+    children: ReactNode;
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+}
+interface RootProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+}
+interface PrevProps {
+    className?: string;
+}
+interface NextProps {
+    className?: string;
+}
+interface ListProps {
+    numbersToShow?: number;
+    className?: string;
+}
+interface ItemProps {
+    page: number;
+    isActive?: boolean;
+    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;
+};
+export default PaginationBase;
+//# sourceMappingURL=PaginationBase.d.ts.map

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

@@ -0,0 +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;AAkBD,QAAA,MAAM,cAAc;qEA1IjB,aAAa;8CAYiC,SAAS;0BAgB7B,SAAS;0BA+BT,SAAS;yCAgCU,SAAS;mDA+BH,SAAS;CAuB9D,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/LDPagination/PaginationBase.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import cn from '../../utils/cn.js';
+import LDButton from '../LDButton/LDButton.js';
+import { calculatePaginationOptions } from './paginationUtils.js';
+const PaginationContext = createContext(null);
+const usePaginationContext = () => {
+    const ctx = useContext(PaginationContext);
+    if (!ctx)
+        throw new Error('PaginationBase 서브컴포넌트는 PaginationBase.Provider 내부에서 사용해야 합니다.');
+    return ctx;
+};
+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 { currentPage, onPageChange } = usePaginationContext();
+    const canPrevious = currentPage > 1;
+    return (_jsx(LDButton, { variant: "outline", color: "neutral", size: "medium", shape: "capsule", leftIcon: "chevronLeft", disabled: !canPrevious, onClick: () => onPageChange(currentPage - 1), "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0", className: cn('size-lg! regular! p-0!', canPrevious
+            ? 'bg-neutral100! text-neutral400!'
+            : 'bg-neutral50! text-neutral200!', canPrevious && 'hover:bg-neutral200!', className) }));
+};
+const Next = ({ className }) => {
+    const { currentPage, totalPages, onPageChange } = usePaginationContext();
+    const canNext = currentPage < totalPages;
+    return (_jsx(LDButton, { variant: "outline", color: "neutral", size: "medium", shape: "capsule", leftIcon: "chevronRight", disabled: !canNext, onClick: () => onPageChange(currentPage + 1), "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0", className: cn('size-lg! regular! p-0!', canNext
+            ? 'bg-neutral100! text-neutral400!'
+            : 'bg-neutral50! text-neutral200!', canNext && 'hover:bg-neutral200!', className) }));
+};
+const List = ({ numbersToShow = 5, 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}`))) }));
+};
+const Item = ({ page, isActive, onClick, className }) => (_jsx(LDButton, { variant: "ghost", color: isActive ? 'point' : 'neutral', size: "medium", onClick: onClick, "aria-label": `${page} 페이지`, "aria-current": isActive ? 'page' : undefined, className: cn('size-lg! regular! rounded-full', className), children: page }));
+// ── Export ──
+const PaginationBase = {
+    Provider,
+    Root,
+    Prev,
+    Next,
+    List,
+    Item,
+};
+export default PaginationBase;

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

@@ -0,0 +1,2 @@
+export declare const calculatePaginationOptions: (currentPage?: number, totalPages?: number, numbersToShow?: number) => number[];
+//# sourceMappingURL=paginationUtils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"paginationUtils.d.ts","sourceRoot":"","sources":["../../../src/components/LDPagination/paginationUtils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,0BAA0B,GACrC,cAAa,MAAU,EACvB,aAAY,MAAU,EACtB,gBAAe,MAAU,aAuB1B,CAAC"}

package/dist/components/LDPagination/paginationUtils.js

@@ -0,0 +1,18 @@
+export const calculatePaginationOptions = (currentPage = 1, totalPages = 1, numbersToShow = 5) => {
+    const half = Math.floor(numbersToShow / 2);
+    let startPage = currentPage - half;
+    let endPage = currentPage + half;
+    if (startPage < 1) {
+        startPage = 1;
+        endPage = Math.min(numbersToShow, totalPages);
+    }
+    if (endPage > totalPages) {
+        endPage = totalPages;
+        startPage = Math.max(1, totalPages - numbersToShow + 1);
+    }
+    const paginationOptions = [];
+    for (let i = startPage; i <= endPage; ++i) {
+        paginationOptions.push(i);
+    }
+    return paginationOptions;
+};

package/dist/components/LDPopover/LDPopover.d.ts

@@ -0,0 +1,42 @@
+import { type ReactNode } from 'react';
+type ItemColor = 'blue' | 'red' | 'gray';
+type IconSize = 'sm' | 'md' | 'lg';
+export interface PopoverItem {
+    /** 메뉴 항목 텍스트 또는 ReactNode */
+    label: ReactNode;
+    /** 항목 색상 */
+    color?: ItemColor;
+    /** 항목 클릭 시 실행할 함수 */
+    onClick: () => void;
+}
+export interface LDPopoverProps {
+    /** 메뉴 항목 목록 (제공 시 메뉴형으로 동작) */
+    items?: PopoverItem[];
+    /** 팝오버 내부 커스텀 콘텐츠 (items보다 우선순위가 높음) */
+    content?: ReactNode;
+    /** 커스텀 트리거 요소 (미제공 시 iconSize/isHorizontal 기반 기본 말줄임표 트리거 렌더) */
+    children?: ReactNode;
+    /** 팝오버 열림 상태 (Controlled) */
+    open?: boolean;
+    /** 열림 상태 변경 핸들러 (Controlled) */
+    onOpenChange?: (open: boolean) => void;
+    /** 트리거 아이콘 크기 프리셋 (기본 트리거 사용 시) */
+    iconSize?: IconSize;
+    /** true 시 가로 말줄임표 아이콘 사용 (기본 트리거 사용 시) */
+    isHorizontal?: boolean;
+    /** 팝오버 정렬 위치 */
+    align?: 'start' | 'center' | 'end';
+    /** 트리거와 팝오버 사이 간격 (px) */
+    offset?: number;
+    /** 콘텐츠 너비 (숫자, 문자열, 혹은 'trigger'로 트리거와 일치) */
+    contentWidth?: number | string | 'trigger';
+    /** 트리거 버튼 className */
+    triggerClassName?: string;
+    /** 팝오버 콘텐츠 className */
+    popoverClassName?: string;
+    /** 인라인 스타일 (트리거 버튼에 적용) */
+    style?: React.CSSProperties;
+}
+declare const LDPopover: ({ items, content, children, open, onOpenChange, iconSize, isHorizontal, align, offset, contentWidth, triggerClassName, popoverClassName, style, }: LDPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export default LDPopover;
+//# sourceMappingURL=LDPopover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LDPopover.d.ts","sourceRoot":"","sources":["../../../src/components/LDPopover/LDPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvD,KAAK,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;AAEzC,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnC,MAAM,WAAW,WAAW;IAC1B,6BAA6B;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,YAAY;IACZ,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,cAAc;IAC7B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,wCAAwC;IACxC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gCAAgC;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,mCAAmC;IACnC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB;IAChB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAC3C,uBAAuB;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wBAAwB;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2BAA2B;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAeD,QAAA,MAAM,SAAS,GAAI,mJAchB,cAAc,4CA8DhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/LDPopover/LDPopover.js

@@ -0,0 +1,31 @@
+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';
+// ── 스타일 매핑 ──
+const itemColorClasses = {
+    blue: 'hover:bg-tintBlue text-lb500',
+    red: 'hover:bg-tintRed text-danger600',
+    gray: 'hover:bg-mono10 text-neutral40',
+};
+const iconSizes = {
+    sm: 12,
+    md: 20,
+    lg: 24,
+};
+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-mono10', triggerClassName), children: isAsChild ? (children) : (_jsx(LucideIcon, { name: isHorizontal ? 'ellipsis' : 'ellipsisVertical', size: iconSizes[iconSize], className: "text-neutral40" })) }), _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-mono10 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();
+                            e.preventDefault();
+                            item.onClick();
+                        }, children: item.label }, index))) })] }));
+};
+export default LDPopover;

package/dist/components/LDPopover/PopoverBase.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+interface RootProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+}
+interface TriggerProps {
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: ReactNode;
+    onClick?: (e: React.MouseEvent) => void;
+    /** Radix의 asChild 속성 (자식 요소를 트리거로 사용) */
+    asChild?: boolean;
+}
+interface ContentProps {
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    className?: string;
+    children?: ReactNode;
+    style?: React.CSSProperties;
+    /** 팝오버가 열릴 때 자동으로 포커스되는 동작을 커스텀 */
+    onOpenAutoFocus?: (event: Event) => void;
+}
+export declare const PopoverBase: {
+    Root: ({ open, onOpenChange, children }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ disabled, className, style, children, onClick, asChild, }: TriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ align, sideOffset, className, children, style, onOpenAutoFocus, }: ContentProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default PopoverBase;
+//# sourceMappingURL=PopoverBase.d.ts.map

package/dist/components/LDPopover/PopoverBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDPopover/PopoverBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAWD,UAAU,YAAY;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAwBD,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mCAAmC;IACnC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAC1C;AA6BD,eAAO,MAAM,WAAW;6CA9EwB,SAAS;2EA0BtD,YAAY;mFAgCZ,YAAY;CAwBd,CAAC;AAEF,eAAe,WAAW,CAAC"}