@loword/loword-design-system 0.0.11 → 0.0.13

package/dist/components/LDOTPInput/LDOTPInput.js

@@ -1,88 +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 outline-2 outline-transparent [outline-style:solid] -outline-offset-2 text-lb900',
-    outline: 'bg-transparent outline-1 outline-mono200 [outline-style:solid] -outline-offset-1',
-    // ghost는 하단 밑줄(border-b-2)이라 전체 링인 outline으로 대체 불가 → 유지
-    ghost: 'bg-transparent border-b-2 border-mono200 rounded-none',
+    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', 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,6 +1,6 @@
 import type React from 'react';
 /** 페이지네이션 크기 프리셋 */
-export type PaginationSize = 'small' | 'medium' | 'large';
+export type PaginationSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 export interface LDPaginationProps {
     currentPage: number;
     totalPages: number;

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;AAK/B,oBAAoB;AACpB,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAY1D,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,YAAY,GAAI,mFAQnB,iBAAiB,4CAmBnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"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,14 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PaginationBase from './PaginationBase.js';
 import cn from '../../utils/cn.js';
-/** size별 내부 버튼 크기/패딩 매핑 */
-const sizePresets = {
-    small: { navSize: '2xsmall', itemSize: 'xsmall' },
-    medium: { navSize: 'xsmall', itemSize: 'small' },
-    large: { navSize: 'small', itemSize: 'medium', itemClassName: 'p-5' },
-};
 const LDPagination = ({ currentPage, totalPages, onPageChange, numbersToShow = 5, size = 'small', className, style, }) => {
-    const preset = sizePresets[size];
-    return (_jsx(PaginationBase.Provider, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange, children: _jsxs(PaginationBase.Root, { className: cn('py-5', className), style: style, children: [_jsx(PaginationBase.Prev, { size: preset.navSize }), _jsx(PaginationBase.List, { numbersToShow: numbersToShow, size: preset.itemSize, className: preset.itemClassName }), _jsx(PaginationBase.Next, { size: preset.navSize })] }) }));
+    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/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"}

package/dist/components/LDPopover/LDPopover.js

@@ -10,11 +10,12 @@ const itemColorClasses = {
     gray: 'hover:bg-mono100 text-neutral500',
 };
 const iconSizes = {
-    sm: 12,
-    md: 20,
-    lg: 24,
+    small: 12,
+    medium: 20,
+    large: 24,
+    xlarge: 32,
 };
-const LDPopover = ({ items, content, children, open, onOpenChange, iconSize = 'sm', isHorizontal = false, align = 'end', offset, contentWidth, triggerClassName, popoverClassName, style, }) => {
+const LDPopover = ({ items, content, children, open, onOpenChange, iconSize = 'small', 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 && 'p-1 min-h-6 hover:bg-mono100', triggerClassName), children: isAsChild ? (children) : isHorizontal ? (_jsx(Ellipsis, { size: iconSizes[iconSize], className: "text-neutral500" })) : (_jsx(EllipsisVertical, { size: iconSizes[iconSize], className: "text-neutral500" })) }), _jsx(PopoverBase.Content, { align: align, sideOffset: offset, style: {
                     width: contentWidth === 'trigger'

package/dist/components/LDProgressBar/LDProgressBar.d.ts

@@ -0,0 +1,16 @@
+import { type CSSProperties } from 'react';
+export interface LDProgressBarProps {
+    /** 진행률 (0~100). 범위를 벗어나면 0~100으로 clamp됩니다. */
+    percent: number;
+    /** 트랙(바탕)에 적용할 추가 CSS 클래스 */
+    className?: string;
+    /** 채움 영역 색상 Tailwind 클래스 (`bg-*`, 기본 색상: `bg-lb500`) */
+    fillClassName?: string;
+    /** percent에 따라 채움 색상(`bg-*` 클래스)을 동적으로 계산하는 함수. 지정 시 `fillColor`보다 우선하며 percent 변경마다 재계산됩니다. */
+    getFillClassNameByPercent?: (percent: number) => string;
+    /** 트랙(바탕)에 적용할 인라인 스타일 */
+    style?: CSSProperties;
+}
+declare const LDProgressBar: ({ percent, className, fillClassName, getFillClassNameByPercent, style, }: LDProgressBarProps) => import("react/jsx-runtime").JSX.Element;
+export default LDProgressBar;
+//# sourceMappingURL=LDProgressBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LDProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/LDProgressBar/LDProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAI3C,MAAM,WAAW,kBAAkB;IACjC,8CAA8C;IAC9C,OAAO,EAAE,MAAM,CAAC;IAChB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gGAAgG;IAChG,yBAAyB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IACxD,0BAA0B;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,QAAA,MAAM,aAAa,GAAI,0EAMpB,kBAAkB,4CAuBpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/LDProgressBar/LDProgressBar.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from '../../utils/cn.js';
+import ProgressBase from './ProgressBarBase.js';
+const LDProgressBar = ({ percent, className, fillClassName, getFillClassNameByPercent, style, }) => {
+    const clampedPercent = Math.min(Math.max(percent, 0), 100);
+    const dynamicFillClassName = getFillClassNameByPercent?.(clampedPercent);
+    return (_jsx(ProgressBase.Root, { percent: clampedPercent, className: cn('relative w-full h-2 rounded-full bg-mono100 overflow-hidden', className), style: style, children: _jsx(ProgressBase.Fill, { className: cn('h-full rounded-full ld-transition bg-lb500', fillClassName, dynamicFillClassName), style: { width: `${clampedPercent}%` } }) }));
+};
+export default LDProgressBar;

package/dist/components/LDProgressBar/ProgressBarBase.d.ts

@@ -0,0 +1,11 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+interface RootProps extends HTMLAttributes<HTMLDivElement> {
+    percent: number;
+    children?: ReactNode;
+}
+export declare const ProgressBase: {
+    Root: ({ percent, children, ...props }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Fill: (props: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+};
+export default ProgressBase;
+//# sourceMappingURL=ProgressBarBase.d.ts.map

package/dist/components/LDProgressBar/ProgressBarBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBarBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDProgressBar/ProgressBarBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,UAAU,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxD,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAkBD,eAAO,MAAM,YAAY;4CAhBsB,SAAS;kBAcnC,cAAc,CAAC,cAAc,CAAC;CAKlD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/LDProgressBar/ProgressBarBase.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const Root = ({ percent, children, ...props }) => {
+    return (_jsx("div", { role: "progressbar", "aria-valuenow": percent, "aria-valuemin": 0, "aria-valuemax": 100, ...props, children: children }));
+};
+const Fill = (props) => _jsx("div", { ...props });
+export const ProgressBase = {
+    Root,
+    Fill,
+};
+export default ProgressBase;

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

@@ -4,10 +4,8 @@ interface LDFormRadioGroupProps extends Omit<LDRadioGroupProps, 'value' | 'onCha
     name: string;
     options?: RegisterOptions;
     customErrorMessage?: string;
-    isHiddenErrorMessage?: boolean;
-    errorClassName?: string;
     disabled?: boolean;
 }
-declare const LDFormRadioGroup: ({ name, options, customErrorMessage, isHiddenErrorMessage, errorClassName, disabled, ...props }: LDFormRadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+declare const LDFormRadioGroup: ({ name, options, customErrorMessage, disabled, ...props }: LDFormRadioGroupProps) => import("react/jsx-runtime").JSX.Element;
 export default LDFormRadioGroup;
 //# sourceMappingURL=LDFormRadioGroup.d.ts.map

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

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

package/dist/components/LDRadio/LDFormRadioGroup.js

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

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

@@ -1,5 +1,5 @@
 import { type InputHTMLAttributes, type Ref } from 'react';
-type RadioSize = 'sm' | 'md';
+export type RadioSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 type RadioType = 'default' | 'circle' | 'pill';
 export interface LDRadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'checked' | 'disabled'> {
     /** controlled 체크 상태 */

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

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

package/dist/components/LDRadio/LDRadio.js

@@ -2,21 +2,66 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import RadioBase, { useRadioContext } from './RadioBase.js';
 import cn from '../../utils/cn.js';
 const radioSizeClasses = {
-    sm: 'size-4',
-    md: 'size-5',
+    '2xsmall': 'size-2.5',
+    xsmall: 'size-3',
+    small: 'size-4',
+    medium: 'size-5',
+    large: 'size-6',
+    xlarge: 'size-7',
 };
 const checkIconSizes = {
-    sm: 10,
-    md: 12,
+    '2xsmall': 6,
+    xsmall: 8,
+    small: 10,
+    medium: 12,
+    large: 14,
+    xlarge: 16,
 };
 const labelSizeClasses = {
-    sm: 'display12',
-    md: 'display14 bold',
+    '2xsmall': 'display10 bold',
+    xsmall: 'display10 bold',
+    small: 'display12 bold',
+    medium: 'display14 bold',
+    large: 'display16 bold',
+    xlarge: 'display18 bold',
+};
+// default/circle 타입 라벨↔인디케이터 간격 (LDCheckbox의 gapClasses와 동일 스케일)
+const gapClasses = {
+    '2xsmall': 'gap-2xs',
+    xsmall: 'gap-2xs',
+    small: 'gap-xs',
+    medium: 'gap-sm',
+    large: 'gap-sm',
+    xlarge: 'gap-sm',
+};
+const pillClasses = {
+    '2xsmall': 'h-[24px] px-1.5 display10 bold',
+    xsmall: 'h-[28px] px-2 display10 bold',
+    small: 'h-[34px] px-3 display12 bold',
+    medium: 'h-[40px] px-4 display14 bold',
+    large: 'h-[46px] px-5 display18 bold',
+    xlarge: 'h-[52px] px-6 display20 bold',
+};
+const pillIconSizes = {
+    '2xsmall': 12,
+    xsmall: 16,
+    small: 16,
+    medium: 20,
+    large: 24,
+    xlarge: 24,
+};
+const pillCheckedPad = {
+    '2xsmall': 'pl-[14px]',
+    xsmall: 'pl-[18px]',
+    small: 'pl-[20px]',
+    medium: 'pl-[24px]',
+    large: 'pl-[28px]',
+    xlarge: 'pl-[28px]',
 };
 // ── Inner: pill 타입 ──
-const PillInner = ({ label, ref, ...props }) => {
+const PillInner = ({ size, label, ref, ...props }) => {
     const { checked } = useRadioContext();
-    return (_jsxs(_Fragment, { children: [_jsx(RadioBase.HiddenInput, { ref: ref, ...props }), _jsxs("div", { className: "relative flex items-center", children: [_jsx(RadioBase.Indicator, { iconSize: 16, className: "absolute left-0", iconClassName: cn('shrink-0 ld-transition', checked ? 'opacity-100' : 'opacity-0') }), label && (_jsx(RadioBase.Label, { className: cn('ld-transition text-nowrap', checked ? 'pl-5' : 'pl-sm pr-sm'), children: label }))] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(RadioBase.HiddenInput, { ref: ref, ...props }), _jsxs("div", { className: "relative flex items-center", children: [_jsx(RadioBase.Indicator, { iconSize: pillIconSizes[size], className: "absolute left-0", iconClassName: cn('shrink-0 ld-transition', checked ? 'opacity-100' : 'opacity-0') }), label && (_jsx(RadioBase.Label, { className: cn('ld-transition text-nowrap', checked ? pillCheckedPad[size] : 'pl-sm pr-sm'), children: label }))] })] }));
 };
 // ── Inner: default, circle 타입 ──
 const DefaultInner = ({ type, size, label, ref, ...props }) => {
@@ -24,7 +69,8 @@ const DefaultInner = ({ type, size, label, ref, ...props }) => {
     return (_jsxs(_Fragment, { children: [_jsx(RadioBase.HiddenInput, { ref: ref, ...props }), _jsx(RadioBase.Indicator, { type: type, iconSize: checkIconSizes[size], className: cn('flex items-center justify-center rounded-full ld-transition outline-transparent [outline-style:solid] -outline-offset-1 shrink-0', type === 'circle' ? 'outline-1' : 'outline-2', {
                     'outline-lb500 bg-lb500': !disabled && checked && type === 'default',
                     'bg-white outline-neutral100': !disabled && !checked && type === 'default',
-                    'bg-white outline-lb500': !disabled && type === 'circle',
+                    'bg-white outline-lb500': !disabled && checked && type === 'circle',
+                    'bg-white outline-neutral500': !disabled && !checked && type === 'circle',
                 }, disabled && 'outline-neutral200 bg-mono100', radioSizeClasses[size]), iconClassName: cn('shrink-0 ld-transition', {
                     'text-neutral300': checked && disabled && type === 'default',
                     'text-white': checked && !disabled && type === 'default',
@@ -33,14 +79,14 @@ const DefaultInner = ({ type, size, label, ref, ...props }) => {
                     'opacity-0': !checked,
                 }) }), label && (_jsx(RadioBase.Label, { className: "text-neutral500", children: label }))] }));
 };
-const LDRadio = ({ checked, defaultChecked, onCheckedChange, size = 'sm', type = 'default', label, disabled = false, className, style, ref, ...props }) => {
+const LDRadio = ({ checked, defaultChecked, onCheckedChange, size = 'small', type = 'default', label, disabled = false, className, style, ref, ...props }) => {
     if (type === 'pill') {
         return (_jsx(RadioBase.Root, { checked: checked, defaultChecked: defaultChecked, onCheckedChange: onCheckedChange, disabled: disabled, style: style, 
             // pill은 checked 여부에 따라 Root(<label>) 배경/텍스트가 바뀌어야 함.
             // Inner에서는 Root 밖 스타일을 줄 수 없으므로,
             // className을 함수로 받아 Root 내부의 resolved 값을 주입함.
-            className: (c) => cn('items-center gap-2 rounded-full py-sm px-[15px] ld-transition display14 bold', c ? 'bg-tintBlue text-lb500' : 'bg-mono100 text-mono500', disabled && 'opacity-50 cursor-not-allowed', className), children: _jsx(PillInner, { label: label, ref: ref, ...props }) }));
+            className: (c) => cn('items-center gap-2 rounded-full ld-transition', pillClasses[size], c ? 'bg-tintBlue text-lb500' : 'bg-mono100 text-mono500', disabled && 'opacity-50 cursor-not-allowed', className), children: _jsx(PillInner, { size: size, label: label, ref: ref, ...props }) }));
     }
-    return (_jsx(RadioBase.Root, { checked: checked, defaultChecked: defaultChecked, onCheckedChange: onCheckedChange, disabled: disabled, style: style, className: cn('items-center gap-[5px]', labelSizeClasses[size], className), children: _jsx(DefaultInner, { type: type, size: size, label: label, ref: ref, ...props }) }));
+    return (_jsx(RadioBase.Root, { checked: checked, defaultChecked: defaultChecked, onCheckedChange: onCheckedChange, disabled: disabled, style: style, className: cn('items-center', gapClasses[size], labelSizeClasses[size], className), children: _jsx(DefaultInner, { type: type, size: size, label: label, ref: ref, ...props }) }));
 };
 export default LDRadio;

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

@@ -1,4 +1,5 @@
 import type React from 'react';
+import { type RadioSize } from './LDRadio.js';
 export interface RadioGroupOption {
     label: string;
     value: string;
@@ -9,14 +10,15 @@ export interface LDRadioGroupProps {
     value?: string;
     onChange?: (value: string) => void;
     disabled?: boolean;
-    type?: 'default' | 'pill';
-    size?: 'sm' | 'md';
+    type?: 'default' | 'pill' | 'circle';
+    size?: RadioSize;
     name?: string;
     'aria-invalid'?: boolean | 'true' | 'false';
     'aria-describedby'?: string;
+    orientation?: 'horizontal' | 'vertical';
     className?: string;
     style?: React.CSSProperties;
 }
-declare const LDRadioGroup: ({ items, value, onChange, disabled, type, size, name, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, className, style, }: LDRadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+declare const LDRadioGroup: ({ items, value, onChange, disabled, type, size, name, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, orientation, className, style, }: LDRadioGroupProps) => import("react/jsx-runtime").JSX.Element;
 export default LDRadioGroup;
 //# sourceMappingURL=LDRadioGroup.d.ts.map

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

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

package/dist/components/LDRadio/LDRadioGroup.js

@@ -1,7 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import LDRadio from './LDRadio.js';
 import cn from '../../utils/cn.js';
-const LDRadioGroup = ({ items, value, onChange, disabled = false, type = 'pill', size = 'sm', name, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedby, className, style, }) => {
-    return (_jsx("div", { role: "radiogroup", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, className: cn('flex flex-row gap-5'), style: style, children: items.map((option) => (_jsx(LDRadio, { name: name, type: type, size: size, checked: value === option.value, className: className, onCheckedChange: () => onChange?.(option.value), label: option.label, disabled: disabled || option.disabled }, option.value))) }));
+// 아이템 간 간격을 사이즈별로 확장 (수평/수직 공통)
+const groupGapClasses = {
+    '2xsmall': 'gap-xs',
+    xsmall: 'gap-xs',
+    small: 'gap-sm',
+    medium: 'gap-md',
+    large: 'gap-md',
+    xlarge: 'gap-lg',
+};
+const LDRadioGroup = ({ items, value, onChange, disabled = false, type = 'pill', size = 'small', name, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedby, orientation = 'horizontal', className, style, }) => {
+    return (_jsx("div", { role: "radiogroup", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, className: cn('flex', groupGapClasses[size], orientation === 'vertical' ? 'flex-col' : 'flex-row'), style: style, children: items.map((option) => (_jsx(LDRadio, { name: name, type: type, size: size, checked: value === option.value, className: className, onCheckedChange: () => onChange?.(option.value), label: option.label, disabled: disabled || option.disabled }, option.value))) }));
 };
 export default LDRadioGroup;

package/dist/components/LDSectionNav/LDSectionNav.d.ts

@@ -0,0 +1,11 @@
+import { type SectionNavItem } from './SectionNavBase.js';
+export type LDSectionNavItem = SectionNavItem;
+export interface LDSectionNavProps {
+    /** 목차 항목 목록. 각 항목의 id는 대상 섹션의 DOM id와 일치해야 한다 */
+    items?: LDSectionNavItem[];
+    /** 루트 nav className */
+    className?: string;
+}
+declare const LDSectionNav: ({ items, className }: LDSectionNavProps) => import("react/jsx-runtime").JSX.Element;
+export default LDSectionNav;
+//# sourceMappingURL=LDSectionNav.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LDSectionNav.d.ts","sourceRoot":"","sources":["../../../src/components/LDSectionNav/LDSectionNav.tsx"],"names":[],"mappings":"AAGA,OAAuB,EAAE,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvE,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC;AAE9C,MAAM,WAAW,iBAAiB;IAChC,iDAAiD;IACjD,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,GAAI,sBAAsB,iBAAiB,4CAc5D,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/LDSectionNav/LDSectionNav.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from '../../utils/cn.js';
+import SectionNavBase from './SectionNavBase.js';
+const LDSectionNav = ({ items, className }) => {
+    return (_jsx(SectionNavBase.Root, { items: items, classNames: {
+            root: cn('flex flex-col gap-2.5', className),
+            item: cn('w-full text-left p-2 rounded-md display14 text-neutral500 cursor-pointer ld-transition', 'hover:text-lb500', 'data-[active=true]:text-lb500'),
+        } }));
+};
+export default LDSectionNav;