@loword/loword-design-system 0.0.10 → 0.0.13

package/dist/components/LDInput/LDFormInput.js

@@ -1,24 +1,27 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import LDInput, { iconSizes } from './LDInput.js';
-import LucideIcon from '../Icon/LucideIcon.js';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef } from 'react';
+import LDInput, { iconSizes, inputPaddingXVars, } from './LDInput.js';
 import LDFormField from '../LDForm/LDFormField.js';
 import LDFormErrorMessage from '../LDForm/LDFormErrorMessage.js';
 import cn from '../../utils/cn.js';
-const LDFormInput = ({ name, options, variant = 'filled', color = 'neutral', size = 'small', block = false, disabled = false, ref, customErrorMessage = '', isHiddenErrorMessage = false, errorClassName, showEditIcon = false, rightAddon, ...props }) => {
-    const iconSize = iconSizes[size ?? 'sm'];
+import { Pencil, X } from 'lucide-react';
+import { renderIcon } from '../../utils/renderIcon.js';
+import { iconSizeClasses } from '../../components/LDButton/LDButton.js';
+const LDFormInput = ({ name, options, variant = 'filled', size = 'small', block = false, disabled = false, ref, customErrorMessage = '', isHiddenErrorMessage = false, errorClassName, showEditIcon = false, rightAddon, ...props }) => {
+    const iconSize = iconSizes[size ?? 'medium'];
+    const addonRef = useRef(null);
     return (_jsx(LDFormField, { name: name, options: options, customErrorMessage: customErrorMessage, disabled: disabled, ref: ref, children: ({ field, fieldState, resetField }) => {
-            const editIconAddon = showEditIcon && !disabled ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "group-focus-within:hidden", children: _jsx(LucideIcon, { name: "pencil", size: iconSize }) }), _jsx("button", { type: "button", "aria-label": "\uC785\uB825 \uB0B4\uC6A9 \uCD08\uAE30\uD654", onMouseDown: (e) => {
+            const editIconAddon = showEditIcon && !disabled ? (_jsxs("div", { className: "relative", style: { width: iconSize, height: iconSize }, children: [_jsx("span", { className: "absolute top-1/2 left-1/2 -translate-1/2 opacity-100 group-focus-within:opacity-0", children: _jsx(Pencil, { size: iconSize }) }), _jsx("button", { type: "button", "aria-label": "\uC785\uB825 \uB0B4\uC6A9 \uCD08\uAE30\uD654", onMouseDown: (e) => {
                             e.preventDefault();
                             resetField({ defaultValue: '' });
-                        }, className: cn('hidden group-focus-within:block text-neutral500 cursor-pointer ld-transition', {
-                            ['hover:text-neutral600']: color === 'neutral',
-                            ['hover:text-lb500']: color === 'point',
-                            ['hover:text-danger600']: color === 'danger',
-                        }), children: _jsx(LucideIcon, { name: "x", size: iconSize }) })] })) : null;
-            const combinedAddon = editIconAddon || rightAddon ? (_jsxs(_Fragment, { children: [editIconAddon, rightAddon] })) : undefined;
-            return (_jsxs("div", { className: cn('relative border-2 border-transparent', block ? 'w-full' : 'w-auto'), children: [_jsx(LDInput, { ...props, ...field, value: field.value ?? '', variant: variant, color: fieldState.hasError ? 'danger' : 'neutral', size: size, block: block, rightAddon: combinedAddon, "aria-invalid": fieldState.hasError, "aria-describedby": fieldState.hasError ? fieldState.errorId : undefined }), !isHiddenErrorMessage && (_jsx(LDFormErrorMessage, { id: fieldState.errorId, error: fieldState.error, disabled: disabled, className: cn((showEditIcon || rightAddon || props.showPasswordToggle) &&
-                            'right-8', errorClassName) }))] }));
+                        }, className: "absolute top-1/2 left-1/2 -translate-1/2 opacity-0 group-focus-within:opacity-100 text-neutral500 cursor-pointer ld-transition", children: _jsx(X, { size: iconSize }) })] })) : null;
+            const combinedAddon = editIconAddon || rightAddon ? (_jsxs(_Fragment, { children: [editIconAddon, renderIcon(rightAddon, iconSizeClasses[size])] })) : undefined;
+            return (_jsxs("div", { className: cn('relative', block ? 'w-full' : 'w-auto'), children: [_jsx(LDInput, { ...props, ...field, value: field.value ?? '', variant: variant, color: fieldState.hasError ? 'danger' : 'neutral', size: size, block: block, rightAddon: combinedAddon, addonRef: addonRef, "aria-invalid": fieldState.hasError, "aria-describedby": fieldState.hasError ? fieldState.errorId : undefined }), !isHiddenErrorMessage && (_jsx(LDFormErrorMessage, { id: fieldState.errorId, error: fieldState.error, disabled: disabled, className: errorClassName, 
+                        // base 우측 = size 패딩에 정렬, addon 있으면 그 폭만큼 더 왼쪽으로.
+                        style: {
+                            right: inputPaddingXVars[size],
+                        } }))] }));
         } }));
 };
 export default LDFormInput;

package/dist/components/LDInput/LDInput.d.ts

@@ -1,8 +1,9 @@
 import { type InputHTMLAttributes, type ReactNode, type Ref } from 'react';
 type InputVariant = 'filled' | 'outline' | 'ghost';
 type InputColor = 'neutral' | 'point' | 'danger';
-export type InputSize = 'xSmall' | 'small' | 'medium' | 'large' | 'big' | 'xLarge';
+export type InputSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 export declare const inputSizeClasses: Record<InputSize, string>;
+export declare const inputPaddingXVars: Record<InputSize, string>;
 export declare const iconSizes: Record<InputSize, number>;
 export interface LDInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'color' | 'size'> {
     /** 입력 필드 스타일 유형 */
@@ -12,14 +13,20 @@ export interface LDInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>
     /** 입력 필드 높이 및 폰트 크기 프리셋 */
     size?: InputSize;
     /** 비밀번호 표시/숨김 토글 버튼 */
-    showPasswordToggle?: boolean;
+    hiddenPasswordToggle?: boolean;
     /** true 시 너비 100% */
     block?: boolean;
+    /** 래퍼(Root div)에 적용할 className */
+    rootClassName?: string;
     /** 우측 부가 요소 (아이콘 등) */
     rightAddon?: ReactNode;
+    /** 우측 addon 컨테이너 ref (addon 폭·위치 측정용) */
+    addonRef?: Ref<HTMLSpanElement>;
+    /** 입력값 바로 뒤에 표시할 텍스트 */
+    suffix?: string;
     /** input 요소 ref */
     ref?: Ref<HTMLInputElement>;
 }
-declare const LDInput: ({ variant, color, size, showPasswordToggle, block, type, disabled, className, style, rightAddon, ref, ...props }: LDInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const LDInput: ({ variant, color, size, block, type, disabled, className, rootClassName, style, rightAddon, addonRef, suffix, hiddenPasswordToggle, ref, value, defaultValue, onChange, ...props }: LDInputProps) => import("react/jsx-runtime").JSX.Element;
 export default LDInput;
 //# sourceMappingURL=LDInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LDInput.d.ts","sourceRoot":"","sources":["../../../src/components/LDInput/LDInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACd,KAAK,GAAG,EACT,MAAM,OAAO,CAAC;AAMf,KAAK,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AACnD,KAAK,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AACjD,MAAM,MAAM,SAAS,GACjB,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,KAAK,GACL,QAAQ,CAAC;AA0Cb,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAOtD,CAAC;AAWF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAO/C,CAAC;AAGF,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,OAAO,GAAG,MAAM,CACjB;IACC,mBAAmB;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,YAAY;IACZ,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uBAAuB;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,qBAAqB;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uBAAuB;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,mBAAmB;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,QAAA,MAAM,OAAO,GAAI,kHAad,YAAY,4CA0Ed,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"LDInput.d.ts","sourceRoot":"","sources":["../../../src/components/LDInput/LDInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACd,KAAK,GAAG,EACT,MAAM,OAAO,CAAC;AAMf,KAAK,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AACnD,KAAK,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AACjD,MAAM,MAAM,SAAS,GACjB,SAAS,GACT,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AAqCb,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAOtD,CAAC;AAKF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAOvD,CAAC;AAqBF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAO/C,CAAC;AAcF,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,OAAO,GAAG,MAAM,CACjB;IACC,mBAAmB;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,YAAY;IACZ,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uBAAuB;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,qBAAqB;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uBAAuB;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;IAChC,wBAAwB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mBAAmB;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,QAAA,MAAM,OAAO,GAAI,oLAmBd,YAAY,4CAoLd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/LDInput/LDInput.js

@@ -1,79 +1,143 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState, } from 'react';
 import InputBase from './InputBase.js';
-import LucideIcon from '../Icon/LucideIcon.js';
 import cn from '../../utils/cn.js';
+import { Eye, EyeOff } from 'lucide-react';
 // ── 스타일 매핑 ──
+// 스타일 박스가 Root(wrapper)로 올라가고 focus는 내부 input에 가므로 focus → focus-within 사용.
 const variantColorClasses = {
     filled: {
-        neutral: 'bg-neutral50 text-neutral900 border-none outline-2 outline-transparent [outline-style:solid] focus:bg-tintBlue focus:outline-lb500',
-        point: 'bg-tintBlue text-neutral900 border-none outline-2 outline-transparent [outline-style:solid] focus:outline-lb500',
-        danger: 'bg-tintRed text-neutral900 border-none outline-2 outline-danger600 [outline-style:solid] focus:outline-danger600',
+        neutral: 'bg-neutral50 text-neutral900 border-none outline-2 outline-transparent [outline-style:solid] [outline-offset:-2px] focus-within:bg-tintBlue focus-within:outline-lb500',
+        point: 'bg-tintBlue text-neutral900 border-none outline-2 outline-transparent [outline-style:solid] [outline-offset:-2px] focus-within:outline-lb500',
+        danger: 'bg-tintRed text-neutral900 border-none outline-2 outline-transparent [outline-style:solid] [outline-offset:-2px] outline-danger600',
     },
     outline: {
-        neutral: 'bg-transparent text-neutral900 border-2 border-neutral100 outline-none',
-        point: 'bg-transparent text-neutral900 border-2 border-lb500 outline-none',
-        danger: 'bg-transparent text-neutral900 border-2 border-danger600 outline-none',
+        neutral: 'bg-transparent text-neutral900 border-none outline-2 outline-neutral100 [outline-style:solid] [outline-offset:-2px] focus-within:outline-lb500',
+        point: 'bg-transparent text-neutral900 border-none outline-2 outline-lb500 [outline-style:solid] [outline-offset:-2px]',
+        danger: 'bg-transparent text-neutral900 border-none outline-2 outline-danger600 [outline-style:solid] [outline-offset:-2px]',
     },
     ghost: {
-        neutral: 'bg-transparent text-neutral900 border-none outline-2 outline-transparent [outline-style:solid] focus:bg-neutral50 focus:outline-lb500',
-        point: 'bg-transparent text-neutral900 border-none outline-2 outline-transparent [outline-style:solid] focus:bg-tintBlue focus:outline-lb500',
-        danger: 'bg-transparent text-danger600 border-none outline-2 outline-transparent [outline-style:solid] focus:bg-tintRed focus:outline-danger600',
+        neutral: 'bg-transparent border-none outline-2 outline-transparent [outline-style:solid] [outline-offset:-2px] focus-within:bg-neutral50',
+        point: 'bg-transparent border-none outline-2 outline-transparent [outline-style:solid] [outline-offset:-2px] focus-within:bg-tintBlue',
+        danger: 'bg-transparent border-none outline-2 outline-transparent [outline-style:solid] [outline-offset:-2px] outline-danger600 focus-within:bg-tintRed',
     },
 };
 const disabledVariantClasses = {
-    filled: 'bg-mono100 text-mono400',
-    outline: 'bg-transparent text-mono400 border-2 border-mono200',
-    ghost: 'bg-transparent text-mono400',
-};
-// addon 아이콘 버튼 hover 색 — color 프리셋에 맞춰 강조(LDFormInput reset 아이콘과 동일 컨셉)
-const addonHoverColorClasses = {
-    neutral: 'hover:text-neutral600',
-    point: 'hover:text-lb500',
-    danger: 'hover:text-danger600',
+    filled: 'bg-mono100 text-neutral300 border-none',
+    outline: 'bg-mono100 text-neutral300 border-none',
+    ghost: 'bg-mono100 text-neutral300 border-none',
 };
 export const inputSizeClasses = {
-    xSmall: 'input-2xs',
-    small: 'input-xs',
-    medium: 'input-sm',
-    large: 'input-md',
-    big: 'input-lg',
-    xLarge: 'input-xl',
+    '2xsmall': 'input-2xs',
+    xsmall: 'input-xs',
+    small: 'input-sm',
+    medium: 'input-md',
+    large: 'input-lg',
+    xlarge: 'input-xl',
+};
+// input size별 좌우 패딩 CSS 변수. 인라인 style에서 씀:
+//  - LDInput: addon gap = calc(이 값 / 2)  (텍스트↔addon, 아이콘↔아이콘)
+//  - LDFormInput: 에러 메시지 base 우측 오프셋
+export const inputPaddingXVars = {
+    '2xsmall': 'var(--control-padding-x-input-2xs)',
+    xsmall: 'var(--control-padding-x-input-xs)',
+    small: 'var(--control-padding-x-input-sm)',
+    medium: 'var(--control-padding-x-input-md)',
+    large: 'var(--control-padding-x-input-lg)',
+    xlarge: 'var(--control-padding-x-input-xl)',
 };
-const addonRightPaddingClasses = {
-    xSmall: 'pr-8',
-    small: 'pr-8',
-    medium: 'pr-8',
-    large: 'pr-10',
-    big: 'pr-11',
-    xLarge: 'pr-12',
+// addon 안의 아이콘(svg)을 input size 토큰(--control-icon-*)에 맞춰 자동 사이징.
+// 호출부가 lucide size를 안 줘도 input size만 맞으면 아이콘 크기가 일관됨.
+const addonIconSizeClasses = {
+    '2xsmall': '[&_svg]:w-[var(--control-icon-2xs)] [&_svg]:h-[var(--control-icon-2xs)]',
+    xsmall: '[&_svg]:w-[var(--control-icon-xs)] [&_svg]:h-[var(--control-icon-xs)]',
+    small: '[&_svg]:w-[var(--control-icon-sm)] [&_svg]:h-[var(--control-icon-sm)]',
+    medium: '[&_svg]:w-[var(--control-icon-md)] [&_svg]:h-[var(--control-icon-md)]',
+    large: '[&_svg]:w-[var(--control-icon-lg)] [&_svg]:h-[var(--control-icon-lg)]',
+    xlarge: '[&_svg]:w-[var(--control-icon-xl)] [&_svg]:h-[var(--control-icon-xl)]',
 };
+// --control-icon-* 토큰(shared.css)과 값을 일치시킨다. addon 아이콘은 CSS 토큰으로,
+// password/edit 토글 박스는 이 JS 맵으로 사이징되므로 둘이 같아야 어긋나지 않음.
 export const iconSizes = {
-    xSmall: 10,
-    small: 12,
-    medium: 14,
-    large: 16,
-    big: 18,
-    xLarge: 20,
+    '2xsmall': 8,
+    xsmall: 12,
+    small: 16,
+    medium: 20,
+    large: 24,
+    xlarge: 28,
+};
+const SUFFIX_GAP = 4; // 값과 suffix 사이 간격(px)
+const suffixTextClasses = {
+    '2xsmall': 'display10',
+    xsmall: 'display12',
+    small: 'display14',
+    medium: 'display16',
+    large: 'display18',
+    xlarge: 'display20',
 };
-const LDInput = ({ variant, color = 'neutral', size, showPasswordToggle = false, block = false, type = 'text', disabled = false, className, style, rightAddon, ref, ...props }) => {
+const LDInput = ({ variant, color = 'neutral', size, block = false, type = 'text', disabled = false, className, rootClassName, style, rightAddon, addonRef, suffix, hiddenPasswordToggle = false, ref, value, defaultValue, onChange, ...props }) => {
     const [passwordVisible, setPasswordVisible] = useState(false);
-    const resolvedType = showPasswordToggle
+    const [inputValue, setInputValue] = useState(() => String(value ?? defaultValue ?? ''));
+    const [suffixLeft, setSuffixLeft] = useState(0); // suffix의 최종 left 위치(px)
+    const valueRef = useRef(null); // 값 폭 측정용 숨은 span
+    const suffixRef = useRef(null); // suffix 자체 폭 측정용
+    const rootRef = useRef(null); // Root 래퍼(패딩·폭 측정용, suffix 위치 계산)
+    const isPasswordToggle = !hiddenPasswordToggle && type === 'password';
+    const resolvedType = isPasswordToggle
         ? passwordVisible
             ? 'text'
             : 'password'
         : type;
     const iconSize = iconSizes[size ?? 'medium'];
-    const passwordToggleAddon = showPasswordToggle ? (_jsx("button", { type: "button", "aria-label": passwordVisible ? '비밀번호 숨기기' : '비밀번호 표시', "aria-pressed": passwordVisible, onClick: () => setPasswordVisible(!passwordVisible), disabled: disabled, className: cn('text-neutral500 ld-transition', disabled
-            ? 'cursor-not-allowed'
-            : cn('cursor-pointer', addonHoverColorClasses[color])), children: _jsx(LucideIcon, { name: passwordVisible ? 'eye' : 'eyeOff', size: iconSize }) })) : null;
-    const resolvedRightAddon = rightAddon ?? passwordToggleAddon;
+    const displayedValue = String(value ?? inputValue);
+    const resolvedSize = size ?? 'small';
+    // 텍스트↔addon, 아이콘↔아이콘 간격 = 좌우 패딩의 절반. inline gap으로 적용.
+    const addonGap = `calc(${inputPaddingXVars[resolvedSize]} / 2)`;
+    useLayoutEffect(() => {
+        // 패딩이 이제 Root(wrapper)에 있으므로 suffix 기준 패딩도 Root에서 읽는다.
+        const root = rootRef.current;
+        // offsetWidth = 화면에서 실제로 차지하는 가로 px (content+padding+border)
+        const valueWidth = valueRef.current?.offsetWidth ?? 0;
+        const suffixWidth = suffixRef.current?.offsetWidth ?? 0;
+        if (!root) {
+            // suffix가 렌더 안 됐거나 미준비 시 fallback
+            setSuffixLeft(valueWidth);
+            return;
+        }
+        // getComputedStyle = 클래스·CSS변수까지 다 반영한 실제 적용 스타일(읽기 전용).
+        // 패딩이 Tailwind 클래스로 들어가서 root.style로는 못 읽음.
+        const cs = getComputedStyle(root);
+        const padLeft = parseFloat(cs.paddingLeft) || 0; // "12px" → 12
+        const padRight = parseFloat(cs.paddingRight) || 0;
+        // 값 뒤에 붙이되, suffix 오른끝이 Root 안쪽 오른 경계를 넘지 않게 clamp.
+        // clientWidth = content+padding (border 제외) → 안쪽 폭
+        const maxLeft = root.clientWidth - padRight - suffixWidth;
+        setSuffixLeft(Math.min(padLeft + valueWidth + SUFFIX_GAP, maxLeft));
+    }, [displayedValue, resolvedSize, suffix]);
+    const passwordToggleAddon = isPasswordToggle ? (_jsxs("button", { type: "button", "aria-label": passwordVisible ? '비밀번호 숨기기' : '비밀번호 표시', "aria-pressed": passwordVisible, onClick: () => setPasswordVisible(!passwordVisible), disabled: disabled, style: { width: iconSize, height: iconSize }, className: cn('relative text-neutral500 ld-transition flex items-center', disabled ? 'cursor-not-allowed' : 'cursor-pointer'), children: [_jsx(Eye, { size: iconSize, className: cn('ld-transition absolute top-1/2 left-1/2 -translate-1/2', passwordVisible ? 'opacity-100' : 'opacity-0') }), _jsx(EyeOff, { size: iconSize, className: cn('ld-transition absolute top-1/2 left-1/2 -translate-1/2', passwordVisible ? 'opacity-0' : 'opacity-100') })] })) : null;
     const { width, height, minWidth, maxWidth, minHeight, maxHeight, ...fieldStyle } = style ?? {};
-    const rootStyle = { width, height, minWidth, maxWidth, minHeight, maxHeight };
-    const fieldClassName = cn('w-full bold placeholder-mono400 ld-transition', variant &&
+    // 텍스트 - addon 간격(gap)은 inline으로 부여(패딩의 절반).
+    const rootStyle = {
+        width,
+        height,
+        minWidth,
+        maxWidth,
+        minHeight,
+        maxHeight,
+        gap: addonGap,
+    };
+    // 스타일 박스(배경·outline·높이·좌우 패딩·폰트)는 Root로. focus는 내부 input → Root가 focus-within으로 반응.
+    const rootClass = cn('ld-transition', variant &&
         (disabled
             ? disabledVariantClasses[variant]
-            : variantColorClasses[variant][color]), size && !height && inputSizeClasses[size], (size === 'xSmall' || size === 'small') && 'rounded-[6px]', height && 'h-full', disabled && 'cursor-not-allowed', 'read-only:cursor-not-allowed', resolvedRightAddon && size && addonRightPaddingClasses[size], className);
-    return (_jsxs(InputBase.Root, { block: block, style: rootStyle, children: [_jsx(InputBase.Field, { ref: ref, type: resolvedType, disabled: disabled, className: fieldClassName, style: fieldStyle, ...props }), resolvedRightAddon && (_jsx(InputBase.Addon, { position: "right", className: "right-2.5 text-neutral500", children: resolvedRightAddon }))] }));
+            : variantColorClasses[variant][color]), size && !height && inputSizeClasses[size], disabled && 'cursor-not-allowed');
+    // input은 알맹이만: w-full로 폭을 채우되 min-w-0으로 addon 자리만큼 줄어들게, 시각 스타일은 전부 투명 처리.
+    // (flex-1은 basis:0이라 input 고유 폭이 사라져 non-block에서 좁아짐 → w-full 사용)
+    const fieldClassName = cn('ld-input-field min-w-0 w-full h-full bg-transparent border-0 p-0 outline-none bold placeholder-neutral300', disabled && 'cursor-not-allowed', 'read-only:cursor-not-allowed', className);
+    const hasAddon = Boolean(rightAddon) || Boolean(passwordToggleAddon);
+    return (_jsxs(InputBase.Root, { ref: rootRef, block: block, style: rootStyle, className: cn(rootClass, rootClassName), children: [_jsx(InputBase.Field, { ref: ref, type: resolvedType, disabled: disabled, className: fieldClassName, style: fieldStyle, value: value, defaultValue: defaultValue, onChange: (event) => {
+                    setInputValue(event.target.value);
+                    onChange?.(event);
+                }, ...props }), suffix && displayedValue && (_jsxs(_Fragment, { children: [_jsx("span", { ref: valueRef, "aria-hidden": "true", className: cn('absolute invisible pointer-events-none whitespace-pre bold', suffixTextClasses[resolvedSize]), children: displayedValue }), _jsx("span", { ref: suffixRef, "aria-hidden": "true", className: cn('absolute inset-y-0 flex items-center pointer-events-none text-neutral900 bold translate-y-px', suffixTextClasses[resolvedSize]), style: { left: `${suffixLeft}px` }, children: suffix })] })), hasAddon && (_jsxs(InputBase.Addon, { ref: addonRef, style: { gap: addonGap }, className: cn('text-neutral500 flex items-center shrink-0', addonIconSizeClasses[resolvedSize]), children: [rightAddon, passwordToggleAddon] }))] }));
 };
 export default LDInput;

package/dist/components/LDLNB/LDLNB.d.ts

@@ -0,0 +1,42 @@
+import type { ElementType, ReactNode } from 'react';
+import { type INavItem } from './LDLNBBase.js';
+export interface LDLNBProps {
+    /** 네비게이션 항목 목록 */
+    items: INavItem[];
+    /** 현재 경로 (active 판별용) */
+    pathname: string;
+    /** MenuItem 렌더 엘리먼트 (라우터 Link 주입용, 기본 'a') */
+    as?: ElementType;
+    /** 항목 이동 시 콜백 (라우터 push 등). 모바일에서는 이후 Drawer가 자동으로 닫힘 */
+    onNavigate?: (path: string) => void;
+    /** 헤더에 표시할 사용자 이름 */
+    name?: string;
+    /** 헤더에 표시할 이메일 */
+    email?: string;
+    /** 헤더 프로필 이미지 URL */
+    profileImage?: string | null;
+    /** 로그아웃 핸들러 (없으면 로그아웃 버튼 미표시) */
+    handleLogout?: () => void;
+    /** 데스크탑 사이드바 초기 접힘 상태 */
+    defaultCollapsed?: boolean;
+    /** 데스크탑 사이드바 기본이자 최대(펼침) 너비(px). 기본 300 */
+    size?: number;
+    /** 드래그로 줄일 수 있는 최소 너비(px). 기본 240 */
+    minWidth?: number;
+    /** 모바일 Drawer가 열리는 방향 (기본 'left') */
+    drawerDirection?: 'left' | 'right';
+    /** 모바일 햄버거 버튼에 적용할 className (위치·정렬 조정용, 예: 'fixed top-4 right-4 z-40') */
+    triggerClassName?: string;
+    /** Root에 적용할 추가 className */
+    className?: string;
+    /** 모바일 Drawer 안, 헤더와 메뉴(Content) 사이에만 렌더되는 커스텀 콘텐츠 (검색창·CTA 등) */
+    children?: ReactNode;
+}
+/**
+ * 반응형 LNB. 데스크탑에서는 인라인 사이드바, 모바일(<768px)에서는 햄버거 버튼 +
+ * Drawer 오버레이(기본 왼쪽, `drawerDirection`으로 조정)로 자동 전환된다.
+ * 뷰포트 감지는 내부에서 처리한다.
+ */
+declare const LDLNB: ({ items, pathname, as, onNavigate, name, email, profileImage, handleLogout, defaultCollapsed, size, minWidth, drawerDirection, triggerClassName, className, children, }: LDLNBProps) => import("react/jsx-runtime").JSX.Element;
+export default LDLNB;
+//# sourceMappingURL=LDLNB.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LDLNB.d.ts","sourceRoot":"","sources":["../../../src/components/LDLNB/LDLNB.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAkB,EAAE,KAAK,QAAQ,EAAE,MAAM,aAAa,CAAC;AAKvD,MAAM,WAAW,UAAU;IACzB,kBAAkB;IAClB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,yBAAyB;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,yDAAyD;IACzD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACnC,2EAA2E;IAC3E,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAKD;;;;GAIG;AACH,QAAA,MAAM,KAAK,GAAI,yKAgBZ,UAAU,4CA0FZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/LDLNB/LDLNB.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Menu as MenuIcon } from 'lucide-react';
+import LDLNBBase from './LDLNBBase.js';
+import LDDrawer from '../LDDrawer/LDDrawer.js';
+import { isActivePath } from '../../utils/utils.js';
+import cn from '../../utils/cn.js';
+// mobile: variant(max-width: calc(--size_md - 1px) = 767px)와 동일 기준
+const MOBILE_QUERY = '(max-width: 767px)';
+/**
+ * 반응형 LNB. 데스크탑에서는 인라인 사이드바, 모바일(<768px)에서는 햄버거 버튼 +
+ * Drawer 오버레이(기본 왼쪽, `drawerDirection`으로 조정)로 자동 전환된다.
+ * 뷰포트 감지는 내부에서 처리한다.
+ */
+const LDLNB = ({ items, pathname, as, onNavigate, name, email, profileImage, handleLogout, defaultCollapsed = false, size = 400, minWidth = 200, drawerDirection = 'left', triggerClassName, className, children, }) => {
+    const [isMobile, setIsMobile] = useState(false);
+    const [open, setOpen] = useState(false);
+    useEffect(() => {
+        const mql = window.matchMedia(MOBILE_QUERY);
+        const sync = () => setIsMobile(mql.matches);
+        sync();
+        mql.addEventListener('change', sync);
+        return () => mql.removeEventListener('change', sync);
+    }, []);
+    const nav = (isMobile) => (_jsx(LDLNBBase.Provider, { isMobile: isMobile, items: items, pathname: pathname, defaultCollapsed: isMobile ? false : defaultCollapsed, size: size, minWidth: minWidth, children: _jsxs(LDLNBBase.Root, { className: className, children: [_jsx(LDLNBBase.Header, { name: name, email: email, profileImage: profileImage, handleLogout: handleLogout }), isMobile && children, _jsx(LDLNBBase.Content, { children: items.map((group) => (_jsx(LDLNBBase.Group, { label: group.label, noSlider: group.noSlider, children: _jsx(LDLNBBase.Menu, { label: group.label, noSlider: group.noSlider, tabCount: group.tabs?.length ?? 0, children: group.tabs?.map((tab) => (_jsx(LDLNBBase.MenuItem, { as: as, href: tab.path, icon: tab.icon, isActive: isActivePath(pathname, tab.path), onClick: () => {
+                                    onNavigate?.(tab.path);
+                                    setOpen(false);
+                                }, children: tab.label }, tab.path))) }) }, group.label))) }), _jsx(LDLNBBase.ResizeWidthBar, { className: "absolute top-0 bottom-0 right-0" })] }) }));
+    if (!isMobile)
+        return nav(false);
+    return (_jsx(LDDrawer, { direction: drawerDirection, open: open, onOpenChange: setOpen, className: "w-full max-w-none p-0", trigger: _jsx("button", { type: "button", "aria-label": "\uBA54\uB274 \uC5F4\uAE30", className: cn('flex items-center justify-center w-10 h-10 text-neutral500 hover:text-mono900 ld-transition cursor-pointer', triggerClassName), children: _jsx(MenuIcon, { size: 20 }) }), children: _jsx("div", { className: "pt-6", children: nav(true) }) }));
+};
+export default LDLNB;

package/dist/components/LDLNB/LDLNBBase.d.ts

@@ -16,6 +16,8 @@ interface ProviderProps {
     items?: INavItem[];
     pathname?: string;
     defaultCollapsed?: boolean;
+    size?: number;
+    minWidth?: number;
 }
 interface RootProps {
     children: ReactNode;
@@ -54,20 +56,11 @@ interface MenuItemProps {
     className?: string;
     [key: string]: unknown;
 }
-interface MenuSubProps {
-    children: ReactNode;
-    className?: string;
-}
-interface MenuSubItemProps {
-    as?: ElementType;
-    href: string;
-    isActive?: boolean;
-    children: ReactNode;
+interface IResizeWidthBar {
     className?: string;
-    [key: string]: unknown;
 }
 declare const LDLNBBase: {
-    Provider: ({ children, isMobile, items, pathname, defaultCollapsed, }: ProviderProps) => import("react/jsx-runtime").JSX.Element;
+    Provider: ({ children, isMobile, items, pathname, size, defaultCollapsed, minWidth, }: ProviderProps) => import("react/jsx-runtime").JSX.Element;
     Root: ({ children, className }: RootProps) => import("react/jsx-runtime").JSX.Element;
     Trigger: ({ className }: TriggerProps) => import("react/jsx-runtime").JSX.Element | null;
     Header: ({ name, email, profileImage, handleLogout }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
@@ -75,8 +68,7 @@ declare const LDLNBBase: {
     Group: ({ children, label, noSlider }: GroupProps) => import("react/jsx-runtime").JSX.Element;
     Menu: ({ children, label, noSlider, tabCount }: MenuProps) => import("react/jsx-runtime").JSX.Element;
     MenuItem: ({ as: Comp, href, isActive, children, icon, className, ...rest }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
-    MenuSub: ({ children, className }: MenuSubProps) => import("react/jsx-runtime").JSX.Element | null;
-    MenuSubItem: ({ as: Comp, href, isActive, children, className, ...rest }: MenuSubItemProps) => import("react/jsx-runtime").JSX.Element;
+    ResizeWidthBar: ({ className }: IResizeWidthBar) => import("react/jsx-runtime").JSX.Element | null;
 };
 export default LDLNBBase;
 //# sourceMappingURL=LDLNBBase.d.ts.map

package/dist/components/LDLNB/LDLNBBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LDLNBBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDLNB/LDLNBBase.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAapD,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA0BD,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAyDD,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2BD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0BD,UAAU,WAAW;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAqCD,UAAU,YAAY;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkBD,UAAU,UAAU;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAqCD,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA6BD,UAAU,aAAa;IACrB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAiCD,UAAU,YAAY;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD,UAAU,gBAAgB;IACxB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA2BD,QAAA,MAAM,SAAS;2EA/UZ,aAAa;oCAsDuB,SAAS;6BA6BhB,YAAY;0DA+BiB,WAAW;uCAwC9B,YAAY;2CAsBR,UAAU;oDA0CG,SAAS;iFA6CjE,aAAa;uCA4B0B,YAAY;8EA0BnD,gBAAgB;CA6BlB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"LDLNBBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDLNB/LDLNBBase.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,WAAW,EAEX,SAAS,EAEV,MAAM,OAAO,CAAC;AAgBf,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiCD,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAuED,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA8BD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0BD,UAAU,WAAW;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAqCD,UAAU,YAAY;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkBD,UAAU,UAAU;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuCD,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA6BD,UAAU,aAAa;IACrB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAgCD,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuDD,QAAA,MAAM,SAAS;2FAvWZ,aAAa;oCAkEuB,SAAS;6BAgChB,YAAY;0DA+BiB,WAAW;uCAwC9B,YAAY;2CAsBR,UAAU;oDA4CG,SAAS;iFA6CjE,aAAa;oCA0BuB,eAAe;CA+DrD,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/LDLNB/LDLNBBase.js

@@ -5,6 +5,8 @@ import { ChevronDown, PanelLeftClose, PanelLeftOpen, LogOut, } from 'lucide-reac
 import cn from '../../utils/cn.js';
 import { isActivePath } from '../../utils/utils.js';
 import LDAvatar from '../LDAvatar/LDAvatar.js';
+const DEFAULT_MIN_WIDTH = 144;
+const DEFAULT_SIZE = 300;
 const LNBContext = createContext(null);
 const useLNBContext = () => {
     const ctx = useContext(LNBContext);
@@ -12,10 +14,16 @@ const useLNBContext = () => {
         throw new Error('LDLNBBase 서브컴포넌트는 LDLNBBase.Provider 내부에서 사용해야 합니다.');
     return ctx;
 };
-const Provider = ({ children, isMobile, items = [], pathname = '', defaultCollapsed = false, }) => {
+const Provider = ({ children, isMobile, items = [], pathname = '', size = DEFAULT_SIZE, defaultCollapsed = false, minWidth = DEFAULT_MIN_WIDTH, }) => {
     const [collapsed, setCollapsed] = useState(defaultCollapsed);
     const [openGroups, setOpenGroups] = useState([]);
-    const toggleCollapsed = () => setCollapsed((prev) => !prev);
+    const [width, setWidth] = useState(size);
+    const [isResizing, setIsResizing] = useState(false);
+    const toggleCollapsed = () => {
+        if (collapsed)
+            setWidth(size);
+        setCollapsed((prev) => !prev);
+    };
     const toggleGroup = (label) => {
         setOpenGroups((prev) => prev.includes(label) ? prev.filter((g) => g !== label) : [...prev, label]);
     };
@@ -41,11 +49,18 @@ const Provider = ({ children, isMobile, items = [], pathname = '', defaultCollap
             openGroups,
             toggleGroup,
             isGroupOpen,
+            width,
+            setWidth,
+            isResizing,
+            setIsResizing,
+            setCollapsed,
+            minWidth,
+            size,
         }, children: children }));
 };
 const Root = ({ children, className }) => {
-    const { collapsed } = useLNBContext();
-    return (_jsx("div", { className: cn('relative mobile:w-full ld-transition', collapsed ? 'w-[60px]' : 'w-[300px]', className), children: _jsx("div", { className: cn('w-full h-full bg-mono50 mobile:bg-white', 'h-[calc(100vh-64px)] mobile:h-auto mobile:overflow-hidden', 'overflow-y-auto p-sm flex flex-col gap-md mobile:py-0 scrollbar-hide scrollbar-hover'), children: children }) }));
+    const { isMobile, collapsed, width, isResizing } = useLNBContext();
+    return (_jsx("div", { className: cn('relative mobile:w-full', !isResizing && 'ld-transition', collapsed ? 'w-[60px]' : `w-[${width}px]`, className), style: collapsed || isMobile ? undefined : { width }, children: _jsx("div", { className: cn('w-full h-full bg-mono50 mobile:bg-white', 'h-[calc(100vh-64px)] mobile:h-auto mobile:overflow-hidden', 'overflow-y-auto p-sm flex flex-col gap-md mobile:py-0 scrollbar-hide scrollbar-hover'), children: children }) }));
 };
 const Trigger = ({ className }) => {
     const { isMobile, collapsed, toggleCollapsed } = useLNBContext();
@@ -56,16 +71,16 @@ const Trigger = ({ className }) => {
 };
 const Header = ({ name, email, profileImage, handleLogout }) => {
     const { collapsed } = useLNBContext();
-    return (_jsxs("div", { className: cn('w-full flex gap-sm items-center rounded-[10px] ld-transition overflow-hidden', collapsed
+    return (_jsxs("div", { className: cn('w-full flex gap-sm items-center rounded-[10px] ld-transition overflow-hidden shrink-0', collapsed
             ? 'p-xs justify-center border-transparent'
-            : 'p-md mobile:p-sm border border-neutral100'), children: [_jsx(LDAvatar, { size: "md", src: profileImage }), !collapsed && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-xs flex-1 min-w-0", children: [_jsx("span", { className: "display16 bold truncate", children: name ?? '' }), _jsx("span", { className: "display14 text-neutral500 truncate", children: email ?? '' })] }), handleLogout && (_jsx(LogOut, { size: 12, className: "cursor-pointer flex-shrink-0", onClick: handleLogout }))] }))] }));
+            : 'p-md mobile:p-sm border border-neutral100'), children: [_jsx(LDAvatar, { size: "large", src: profileImage }), !collapsed && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-xs flex-1 min-w-0", children: [_jsx("span", { className: "display16 bold truncate", children: name ?? '' }), _jsx("span", { className: "display14 text-neutral500 truncate", children: email ?? '' })] }), handleLogout && (_jsx(LogOut, { size: 20, className: "cursor-pointer shrink-0 text-neutral700 hover:text-neutral900 ld-transition", onClick: handleLogout }))] }))] }));
 };
 const Content = ({ children, className }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-full border-b border-neutral100" }), _jsx("div", { className: cn('flex flex-col gap-md mobile:overflow-y-auto mobile:h-[calc(62dvh-111px)]', className), children: children })] }));
 const Group = ({ children, label, noSlider }) => {
     const { isMobile, collapsed, toggleGroup, isGroupOpen } = useLNBContext();
     const open = label ? isGroupOpen(label) : true;
-    return (_jsxs("div", { className: "flex flex-col gap-sm w-full items-start", children: [label && !collapsed && (_jsxs("div", { className: cn('w-full flex', isMobile && 'cursor-pointer justify-between'), onClick: () => !noSlider && isMobile && toggleGroup(label), children: [_jsx("span", { className: "display14 text-neutral500", children: label }), _jsx("div", { className: cn(isMobile &&
-                            'transition-transform duration-300 ease-out flex items-center justify-center w-5 h-5 flex-shrink-0', isMobile && open ? 'rotate-180' : 'rotate-0', !isMobile && 'hidden', noSlider && 'hidden'), children: _jsx(ChevronDown, { size: 14, className: "text-neutral500" }) })] })), children] }));
+    return (_jsxs("div", { className: "flex flex-col gap-sm w-full items-start", children: [label && !collapsed && (_jsxs("div", { className: cn('w-full flex', isMobile && 'cursor-pointer justify-between'), onClick: () => !noSlider && isMobile && toggleGroup(label), children: [_jsx("span", { className: "display14 text-neutral500 whitespace-nowrap", children: label }), _jsx("div", { className: cn(isMobile &&
+                            'transition-transform duration-300 ease-out flex items-center justify-center w-5 h-5 shrink-0', isMobile && open ? 'rotate-180' : 'rotate-0', !isMobile && 'hidden', noSlider && 'hidden'), children: _jsx(ChevronDown, { size: 14, className: "text-neutral500" }) })] })), children] }));
 };
 const Menu = ({ children, label, noSlider, tabCount = 0 }) => {
     const { isMobile, isGroupOpen } = useLNBContext();
@@ -81,17 +96,37 @@ const Menu = ({ children, label, noSlider, tabCount = 0 }) => {
 };
 const MenuItem = ({ as: Comp = 'a', href, isActive, children, icon, className, ...rest }) => {
     const { collapsed } = useLNBContext();
-    return (_jsxs(Comp, { href: href, className: cn('flex gap-sm w-full items-center p-sm display16 mobile:display14 bold mobile:medium', 'text-neutral500 cursor-pointer hover:bg-mono300 rounded-[5px] hover:text-mono900 ld-transition', collapsed && 'justify-center', isActive &&
-            'bg-tintBlue text-blue400 hover:bg-tintBlue hover:text-blue400', className), ...rest, children: [icon && _jsx("span", { className: "flex-shrink-0", children: icon }), !collapsed && children] }));
+    return (_jsxs(Comp, { href: href, className: cn('flex gap-sm w-full items-center p-sm display16 mobile:display14 bold mobile:medium', 'text-neutral500 cursor-pointer hover:bg-mono300 rounded-[5px] hover:text-mono900 ld-transition', 'whitespace-nowrap overflow-hidden', collapsed && 'justify-center', isActive &&
+            'bg-tintBlue text-blue400 hover:bg-tintBlue hover:text-blue400', className), ...rest, children: [icon && _jsx("span", { className: "shrink-0", children: icon }), !collapsed && children] }));
 };
-const MenuSub = ({ children, className }) => {
-    const { collapsed } = useLNBContext();
-    if (collapsed)
+const ResizeWidthBar = ({ className }) => {
+    const { isMobile, width, setWidth, setIsResizing, setCollapsed, minWidth, size, } = useLNBContext();
+    // 모바일에선 전체 너비라 리사이즈 비활성
+    if (isMobile)
         return null;
-    return (_jsx("div", { className: cn('flex flex-col w-full gap-sm pl-sm', className), children: children }));
+    const handleResizeWidth = (e) => {
+        const startWidth = width; // 드래그 시작 시점의 패널 너비(고정)
+        const startX = e.pageX; // 드래그 시작 시점의 커서 X(고정)
+        setIsResizing(true);
+        const onMouseMove = (e) => {
+            const next = startWidth - startX + e.pageX;
+            if (next < minWidth) {
+                setCollapsed(true);
+                return;
+            }
+            setCollapsed(false);
+            setWidth(Math.min(size, next));
+        };
+        const onMouseUp = () => {
+            setIsResizing(false);
+            document.body.removeEventListener('mousemove', onMouseMove);
+            document.body.removeEventListener('mouseup', onMouseUp);
+        };
+        document.body.addEventListener('mousemove', onMouseMove);
+        document.body.addEventListener('mouseup', onMouseUp, { once: true });
+    };
+    return (_jsx("div", { className: cn('w-1 flex justify-start group ld-transition translate-x-1', className), onMouseDown: handleResizeWidth, children: _jsx("div", { className: "w-px h-full group-hover:bg-lb500 group-hover:cursor-col-resize ld-transition -translate-x-px" }) }));
 };
-const MenuSubItem = ({ as: Comp = 'a', href, isActive, children, className, ...rest }) => (_jsx(Comp, { href: href, className: cn('flex gap-sm w-full items-center p-sm display14 medium', 'text-neutral500 cursor-pointer hover:bg-mono300 rounded-[5px] hover:text-mono900 ld-transition', isActive &&
-        'bg-tintBlue text-blue400 hover:bg-tintBlue hover:text-blue400', className), ...rest, children: children }));
 // ── Export ──
 const LDLNBBase = {
     Provider,
@@ -102,7 +137,6 @@ const LDLNBBase = {
     Group,
     Menu,
     MenuItem,
-    MenuSub,
-    MenuSubItem,
+    ResizeWidthBar,
 };
 export default LDLNBBase;