@loword/loword-design-system 0.0.10 → 0.0.13

package/dist/components/LDNotification/LDNotification.js

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

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

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

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

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

package/dist/components/LDNotification/NotificationBase.js

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

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

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

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

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

package/dist/components/LDOTPInput/LDFormOTPInput.js

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

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

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

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

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

package/dist/components/LDOTPInput/LDOTPInput.js

@@ -1,87 +1,59 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState, useContext, createContext, useEffect, } from 'react';
+import { Fragment, createContext, useContext } 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;
-}
+import OTPInputBase from './OTPInputBase.js';
 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',
+    '2xsmall': 'w-4 h-4 display10',
+    xsmall: 'w-6 h-6 display12',
+    small: 'w-8 h-8 display14',
+    medium: 'w-10 h-10 display16',
+    large: 'w-16 h-16 display28',
+    xlarge: 'w-20 h-20 display40',
+};
+// 박스 크기에 비례한 모서리 반경
+const roundedClasses = {
+    '2xsmall': 'rounded-[3px]',
+    xsmall: 'rounded-[4px]',
+    small: 'rounded-[5px]',
+    medium: 'rounded-[6px]',
+    large: 'rounded-[8px]',
+    xlarge: 'rounded-[12px]',
 };
 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',
+    filled: 'bg-mono50 outline-2 outline-transparent [outline-style:solid] -outline-offset-2 text-lb500',
+    outline: 'bg-transparent outline-2 outline-mono200 [outline-style:solid] -outline-offset-2 text-lb500',
 };
-// ── 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);
+const OTPStyleContext = createContext({
+    size: 'medium',
+    variant: 'outline',
+});
+// ── Custom Layer ──
+/** OTP 입력 루트 — Base.Root에 size/variant 스타일 컨텍스트를 덧씌운다. */
+const LDOTPInput = ({ variant = 'outline', size = 'medium', maxLength, groups, children, ...rest }) => {
+    // groups 지정 시 구분선으로 나눠 렌더, 아니면 단일 그룹
+    const renderSlots = () => {
+        if (groups && groups.length > 0) {
+            let offset = 0;
+            return groups.map((count, gi) => {
+                const start = offset;
+                offset += count;
+                return (_jsxs(Fragment, { children: [gi > 0 && _jsx(OTPInputSeparator, {}), _jsx(OTPInputGroup, { children: Array.from({ length: count }).map((_, i) => (_jsx(OTPInputSlot, { index: start + i }, i))) })] }, gi));
+            });
         }
+        return (_jsx(OTPInputGroup, { children: Array.from({ length: maxLength }).map((_, i) => (_jsx(OTPInputSlot, { index: i }, i))) }));
     };
-    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] }) }));
+    return (_jsx(OTPStyleContext, { value: { size, variant }, children: _jsx(OTPInputBase.Root, { maxLength: maxLength, ...rest, children: children ?? renderSlots() }) }));
 };
-/**
- * OTPInputGroup
- * 슬롯들을 묶어주는 컨테이너입니다.
- */
-const OTPInputGroup = ({ className, children, }) => {
-    return (_jsx("div", { className: cn('flex items-center gap-2', className), children: children }));
-};
-/**
- * OTPInputSlot
- * 개별 글자를 보여주는 칸입니다.
- */
+const OTPInputGroup = ({ className, children, }) => _jsx(OTPInputBase.Group, { className: className, children: children });
 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) });
+    const { size, variant } = useContext(OTPStyleContext);
+    return (_jsx(OTPInputBase.Slot, { index: index, className: ({ isActive, hasValue, isInvalid }) => cn('font-bold ld-transition', sizeClasses[size], roundedClasses[size], variantClasses[variant], 
+        // 값이 있는 칸 강조 (filled=배경, outline=테두리)
+        hasValue && variant === 'filled' && 'bg-tintBlue', hasValue && variant === 'outline' && 'outline-lb500', isActive && 'outline-2 outline-lb500 outline-solid -outline-offset-2', isActive && variant === 'filled' && 'bg-white', isInvalid &&
+            'outline-2 outline-danger600 outline-solid -outline-offset-2 text-danger600 bg-tintRed', className) }));
 };
+const OTPInputSeparator = ({ className }) => (_jsx(OTPInputBase.Separator, { className: cn('w-2 h-0.5 bg-mono300 mx-1', className) }));
 // ── Export ──
 export { LDOTPInput, OTPInputGroup, OTPInputSlot, OTPInputSeparator };
 export default LDOTPInput;

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

@@ -0,0 +1,46 @@
+import { type ReactNode } from 'react';
+interface OTPInputContextProps {
+    value: string;
+    maxLength: number;
+    focusedIndex: number;
+    isInvalid: boolean;
+    disabled: boolean;
+}
+export declare const useOTPInputContext: () => OTPInputContextProps;
+/** Slot 시각 스타일 계산에 필요한 상태 */
+export interface OTPSlotState {
+    char?: string;
+    isActive: boolean;
+    hasValue: boolean;
+    isInvalid: boolean;
+    disabled: boolean;
+}
+interface RootProps {
+    maxLength: number;
+    value: string;
+    onChange: (value: string) => void;
+    onComplete?: (value: string) => void;
+    disabled?: boolean;
+    isInvalid?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+interface SlotProps {
+    index: number;
+    /** 문자열 또는 슬롯 상태를 받아 클래스를 반환하는 함수 */
+    className?: string | ((state: OTPSlotState) => string);
+    children?: ReactNode;
+}
+export declare const OTPInputBase: {
+    Root: ({ maxLength, value, onChange, onComplete, disabled, isInvalid, className, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Group: ({ className, children, }: {
+        className?: string;
+        children: ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Slot: ({ index, className, children }: SlotProps) => import("react/jsx-runtime").JSX.Element;
+    Separator: ({ className }: {
+        className?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export default OTPInputBase;
+//# sourceMappingURL=OTPInputBase.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OTPInputBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDOTPInput/OTPInputBase.tsx"],"names":[],"mappings":"AAEA,OAAc,EACZ,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAIf,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAID,eAAO,MAAM,kBAAkB,4BAO9B,CAAC;AAEF,6BAA6B;AAC7B,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAGD,UAAU,SAAS;IACjB,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,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAyED,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,YAAY,KAAK,MAAM,CAAC,CAAC;IACvD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA+BD,eAAO,MAAM,YAAY;kGAlGtB,SAAS;sCAsDT;QACD,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,SAAS,CAAC;KACrB;2CAY6C,SAAS;+BAyBrB;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE;CAII,CAAC;AAC7D,eAAe,YAAY,CAAC"}

package/dist/components/LDOTPInput/OTPInputBase.js

@@ -0,0 +1,48 @@
+'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);
+export const useOTPInputContext = () => {
+    const ctx = useContext(OTPInputContext);
+    if (!ctx)
+        throw new Error('OTPInputBase 하위 컴포넌트는 Root 내부에서 사용해야 합니다.');
+    return ctx;
+};
+const Root = ({ maxLength, value, onChange, onComplete, disabled = false, isInvalid = false, className, children, }) => {
+    const inputRef = useRef(null);
+    const [isFocused, setIsFocused] = useState(false);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    useEffect(() => {
+        setFocusedIndex(isFocused ? value.length : -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, { value: { value, maxLength, focusedIndex, isInvalid, disabled }, 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] }) }));
+};
+// ── Group: 슬롯 묶음 컨테이너 ──
+const Group = ({ className, children, }) => (_jsx("div", { className: cn('flex items-center gap-2', className), children: children }));
+const Slot = ({ index, className, children }) => {
+    const { value, focusedIndex, isInvalid, disabled } = useOTPInputContext();
+    const char = value[index];
+    const state = {
+        char,
+        isActive: focusedIndex === index,
+        hasValue: Boolean(char),
+        isInvalid,
+        disabled,
+    };
+    const resolved = typeof className === 'function' ? className(state) : className;
+    return (_jsxs("div", { className: cn('relative flex items-center justify-center', resolved), children: [children ?? char, state.isActive && !disabled && (_jsx("div", { className: "absolute inset-y-1/4 w-0.5 bg-lb500 animate-pulse" }))] }));
+};
+// ── Separator: 그룹 사이 구분선 ──
+const Separator = ({ className }) => (_jsx("div", { className: className }));
+export const OTPInputBase = { Root, Group, Slot, Separator };
+export default OTPInputBase;

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

@@ -1,12 +1,16 @@
 import type React from 'react';
+/** 페이지네이션 크기 프리셋 */
+export type PaginationSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 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;AAI/B,oBAAoB;AACpB,MAAM,MAAM,cAAc,GACtB,SAAS,GACT,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AAEb,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,4CAkBnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/LDPagination/LDPagination.js

@@ -1,5 +1,7 @@
 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, {})] }) }));
+const LDPagination = ({ currentPage, totalPages, onPageChange, numbersToShow = 5, size = 'small', className, style, }) => {
+    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: size }), _jsx(PaginationBase.List, { numbersToShow: numbersToShow, size: size }), _jsx(PaginationBase.Next, { size: size })] }) }));
+};
 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.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
 type ItemColor = 'blue' | 'red' | 'gray';
-type IconSize = 'sm' | 'md' | 'lg';
+type IconSize = 'small' | 'medium' | 'large' | 'xlarge';
 export interface PopoverItem {
     /** 메뉴 항목 텍스트 또는 ReactNode */
     label: ReactNode;

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

@@ -1 +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"}
+{"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,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD,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;AAgBD,QAAA,MAAM,SAAS,GAAI,mJAchB,cAAc,4CA8DhB,CAAC;AAEF,eAAe,SAAS,CAAC"}