@loword/loword-design-system 0.0.9 → 0.0.11

package/dist/components/LDFileUpload/FileUploadBase.d.ts

@@ -2,6 +2,13 @@ import { Dispatch, type ReactNode, SetStateAction } from 'react';
 import { TMimeType } from '../../constants/file.js';
 import { type LDButtonProps } from '../LDButton/LDButton.js';
 import { IFile } from '../../utils/file.js';
+export interface IFileUploadClassNames {
+    root?: string;
+    input?: string;
+    card?: string;
+    cardList?: string;
+    description?: string;
+}
 interface FileUploadContextType {
     recommendedSize?: {
         width: number;
@@ -16,6 +23,7 @@ interface FileUploadContextType {
     onDeleteFile: (file: IFile) => Promise<boolean>;
     disabled?: boolean;
     readOnly?: boolean;
+    classNames?: IFileUploadClassNames;
 }
 export declare const useFileUploadContext: () => FileUploadContextType;
 interface RootProps {
@@ -32,7 +40,7 @@ interface RootProps {
     onDeleteFile: (file: IFile) => Promise<boolean>;
     disabled?: boolean;
     readOnly?: boolean;
-    className?: string;
+    classNames?: IFileUploadClassNames;
     children?: ReactNode;
 }
 interface InputProps extends Omit<LDButtonProps<'button'>, 'type'> {
@@ -44,10 +52,10 @@ interface ICardListProps {
     className?: string;
 }
 export declare const FileUploadBase: {
-    Root: ({ recommendedSize, maxSize, allowedExtensions, maxFileCount, fileList, setFileList, onChangeFile, onDeleteFile, disabled, readOnly, className, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ recommendedSize, maxSize, allowedExtensions, maxFileCount, fileList, setFileList, onChangeFile, onDeleteFile, disabled, readOnly, classNames, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
     Input: ({ type, label, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element | null;
     CardList: (props: ICardListProps) => import("react/jsx-runtime").JSX.Element;
-    Description: ({ className }: {
+    Description: (props: {
         className?: string;
     }) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/components/LDFileUpload/FileUploadBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDFileUpload/FileUploadBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,QAAQ,EACR,KAAK,SAAS,EACd,cAAc,EAIf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAmB,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEpE,OAAO,EAIL,KAAK,EAKN,MAAM,kBAAkB,CAAC;AAI1B,UAAU,qBAAqB;IAC7B,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC/C,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvD,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAID,eAAO,MAAM,oBAAoB,6BAUhC,CAAC;AAEF,UAAU,SAAS;IACjB,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;IACvB,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;IACpD,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvD,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAoCD,UAAU,UAAW,SAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAChE,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwHD,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoPD,eAAO,MAAM,cAAc;uKAvYxB,SAAS;uCA8BT,UAAU;sBAuHY,cAAc;iCA8NH;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE;CAyBzD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FileUploadBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDFileUpload/FileUploadBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,QAAQ,EACR,KAAK,SAAS,EACd,cAAc,EAIf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAmB,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEpE,OAAO,EAIL,KAAK,EAKN,MAAM,kBAAkB,CAAC;AAI1B,MAAM,WAAW,qBAAqB;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,qBAAqB;IAC7B,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC/C,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvD,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,qBAAqB,CAAC;CACpC;AAID,eAAO,MAAM,oBAAoB,6BAUhC,CAAC;AAEF,UAAU,SAAS;IACjB,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;IACvB,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;IACpD,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvD,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAqCD,UAAU,UAAW,SAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAChE,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8HD,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiQD,eAAO,MAAM,cAAc;wKA3ZxB,SAAS;uCA+BT,UAAU;sBA6HY,cAAc;yBAgOX;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE;CAoCjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/LDFileUpload/FileUploadBase.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useState, } from 'react';
+import { Images, Trash2 } from 'lucide-react';
 import cn from '../../utils/cn.js';
 import { FILE_EXTENSIONS } from '../../constants/file.js';
 import LDButton from '../LDButton/LDButton.js';
@@ -16,7 +17,7 @@ export const useFileUploadContext = () => {
     }
     return fileUploadContext;
 };
-const Root = ({ recommendedSize, maxSize, allowedExtensions, maxFileCount, fileList, setFileList, onChangeFile, onDeleteFile, disabled, readOnly, className, children, }) => {
+const Root = ({ recommendedSize, maxSize, allowedExtensions, maxFileCount, fileList, setFileList, onChangeFile, onDeleteFile, disabled, readOnly, classNames, children, }) => {
     return (_jsx(FileUploadContext.Provider, { value: {
             recommendedSize,
             maxSize,
@@ -26,13 +27,13 @@ const Root = ({ recommendedSize, maxSize, allowedExtensions, maxFileCount, fileL
             setFileList,
             onChangeFile,
             onDeleteFile,
+            classNames,
             disabled,
             readOnly,
-        }, children: _jsx("div", { className: cn('w-full', className), children: children }) }));
+        }, children: _jsx("div", { className: cn('w-full', classNames?.root), children: children }) }));
 };
 const Input = ({ type = 'default', label = '파일 선택', ...props }) => {
-    const { allowedExtensions, maxSize, fileList, setFileList, maxFileCount, onChangeFile, disabled, readOnly, } = useFileUploadContext();
-    // readOnly는 보기 전용 — 추가 입력 자체를 렌더하지 않는다.
+    const { allowedExtensions, maxSize, fileList, setFileList, maxFileCount, onChangeFile, disabled, readOnly, classNames, } = useFileUploadContext();
     if (readOnly)
         return null;
     const getFileError = async (file) => {
@@ -88,14 +89,13 @@ const Input = ({ type = 'default', label = '파일 선택', ...props }) => {
     if (type === 'image') {
         return (_jsxs("label", { className: cn('border-3 border-dotted rounded-xl border-neutral100 bg-neutral50 text-neutral500', 'size-21 flex justify-center items-center ld-transition', disabled
                 ? 'opacity-50 cursor-not-allowed'
-                : 'hover:bg-neutral-100 hover:border-neutral200 hover:cursor-pointer hover:text-neutral600', props.className), children: [renderIcon('images', 'size-6'), fileInput] }));
+                : 'hover:bg-neutral-100 hover:border-neutral200 hover:cursor-pointer hover:text-neutral600', props.className, classNames?.input), children: [renderIcon(_jsx(Images, {}), 'size-6'), fileInput] }));
     }
-    return (_jsxs(LDButton, { as: "label", ...props, disabled: disabled, children: [label, fileInput] }));
+    return (_jsxs(LDButton, { as: "label", ...props, className: cn(props.className, classNames?.input), disabled: disabled, children: [label, fileInput] }));
 };
 const CardList = (props) => {
-    const { fileList, setFileList, allowedExtensions, maxSize, onChangeFile, onDeleteFile, disabled, readOnly, } = useFileUploadContext();
+    const { fileList, setFileList, allowedExtensions, maxSize, onChangeFile, onDeleteFile, disabled, readOnly, classNames, } = useFileUploadContext();
     const [hoveredList, setHoveredList] = useState(new Array(fileList.length).fill(false));
-    // 교체/삭제 차단은 disabled·readOnly 공통. 흐림(opacity)·not-allowed 커서는 disabled에만.
     const locked = disabled || readOnly;
     const handleFile = async (e, idx) => {
         const files = e.target.files;
@@ -154,7 +154,7 @@ const CardList = (props) => {
                 ? 'cursor-not-allowed'
                 : readOnly
                     ? 'cursor-default'
-                    : 'hover:cursor-pointer'), onMouseOver: () => {
+                    : 'hover:cursor-pointer', classNames?.card), onMouseOver: () => {
                 setHoveredList((prev) => {
                     const next = [...prev];
                     next[idx] = true;
@@ -170,29 +170,29 @@ const CardList = (props) => {
                         e.preventDefault();
                         e.stopPropagation();
                         await handleDeleteFile(idx);
-                    }, disabled: locked, variant: "ghost", leftIcon: "trash2", color: "neutral", className: cn('text-neutral700 absolute top-2 right-2 rounded-sm bg-neutral-100 px-0 flex justify-center items-center min-w-0 h-5 w-5 ld-transition', hoveredList[idx] && !locked ? 'opacity-100' : 'opacity-0') })] }, `${file.fileName}_${idx}`)));
+                    }, disabled: locked, variant: "ghost", leftIcon: _jsx(Trash2, {}), color: "neutral", className: cn('text-neutral700 absolute top-2 right-2 rounded-sm bg-neutral-100 px-0 flex justify-center items-center min-w-0 h-5 w-5 ld-transition', hoveredList[idx] && !locked ? 'opacity-100' : 'opacity-0') })] }, `${file.fileName}_${idx}`)));
         if (fileList.length <= 1) {
             return (_jsx("div", { className: cn('flex flex-row gap-sm', props.className), children: cards }));
         }
-        return (_jsx(LDCarousel, { className: props.className, slideSize: "auto", gap: 8, showArrows: false, showDots: false, slides: cards }));
+        return (_jsx(LDCarousel, { className: cn(props.className, classNames?.cardList), slideSize: "auto", gap: 8, showArrows: false, showDots: false, slides: cards }));
     }
-    return (_jsx("div", { className: "flex flex-col gap-sm w-full", children: fileList.map((file, idx) => (_jsxs("label", { className: cn('w-full flex flex-row justify-between items-center px-4 py-3 bg-neutral50 rounded-lg', disabled
+    return (_jsx("div", { className: cn('flex flex-col gap-sm w-full', classNames?.cardList), children: fileList.map((file, idx) => (_jsxs("label", { className: cn('w-full flex flex-row justify-between items-center px-4 py-3 bg-neutral50 rounded-lg', disabled
                 ? 'cursor-not-allowed'
                 : readOnly
                     ? 'cursor-default'
-                    : 'hover:cursor-pointer'), children: [_jsxs("div", { className: "flex flex-row items-center gap-sm", children: [_jsx("div", { className: "size-15 overflow-hidden rounded-lg", children: _jsx("div", { className: "flex size-full items-center justify-center text-neutral500 bg-white", children: isImage(file.fileName) ? (_jsx("img", { src: file?.src, alt: file?.fileName, className: "size-full object-cover" })) : (renderIcon(getFileIcon(file.fileName), 'size-8')) }) }), _jsx("div", { className: "text-neutral700 display16", children: file.fileName })] }), _jsx("input", { type: "file", onClick: (e) => (e.currentTarget.value = ''), onChange: (e) => handleFile(e, idx), disabled: locked, className: "sr-only" }), _jsx(LDButton, { onClick: async (e) => {
+                    : 'hover:cursor-pointer', classNames?.card), children: [_jsxs("div", { className: "flex flex-row items-center gap-sm", children: [_jsx("div", { className: "size-15 overflow-hidden rounded-lg", children: _jsx("div", { className: "flex size-full items-center justify-center text-neutral500 bg-white", children: isImage(file.fileName) ? (_jsx("img", { src: file?.src, alt: file?.fileName, className: "size-full object-cover" })) : (renderIcon(getFileIcon(file.fileName), 'size-8')) }) }), _jsx("div", { className: "text-neutral700 display16", children: file.fileName })] }), _jsx("input", { type: "file", onClick: (e) => (e.currentTarget.value = ''), onChange: (e) => handleFile(e, idx), disabled: locked, className: "sr-only" }), _jsx(LDButton, { onClick: async (e) => {
                         e.stopPropagation();
                         await handleDeleteFile(idx);
-                    }, disabled: locked, variant: "ghost", leftIcon: "trash2", size: "large", color: "neutral", className: cn('text-neutral500 rounded-sm bg-white px-0 flex justify-center items-center min-w-0 h-10 w-10 ld-transition', locked && 'opacity-0 pointer-events-none') })] }, `${file.fileName}_${idx}`))) }));
+                    }, disabled: locked, variant: "ghost", leftIcon: _jsx(Trash2, {}), size: "large", color: "neutral", className: cn('text-neutral500 rounded-sm bg-white px-0 flex justify-center items-center min-w-0 h-10 w-10 ld-transition', locked && 'opacity-0 pointer-events-none') })] }, `${file.fileName}_${idx}`))) }));
 };
-const Description = ({ className }) => {
-    const { recommendedSize, maxSize, allowedExtensions, maxFileCount } = useFileUploadContext();
+const Description = (props) => {
+    const { recommendedSize, maxSize, allowedExtensions, maxFileCount, classNames, } = useFileUploadContext();
     const recommendedSizeText = recommendedSize &&
         `권장 사이즈 ${recommendedSize.width}x${recommendedSize.height}, `;
     const requiredText = `최대 크기 ${getFileSizeUnit(maxSize)}`;
     const extensionsText = ` (${allowedExtensions.map((item) => FILE_EXTENSIONS[item]).join(', ')})`;
     const countText = maxFileCount > 1 ? `, 최대 ${maxFileCount}개` : '';
-    return (_jsxs("p", { className: cn('display12 text-neutral400 semibold', className), children: [recommendedSizeText, requiredText, extensionsText, countText] }));
+    return (_jsxs("p", { className: cn('display12 text-neutral400 semibold', props.className, classNames?.description), children: [recommendedSizeText, requiredText, extensionsText, countText] }));
 };
 export const FileUploadBase = {
     Root,

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

@@ -1 +1 @@
-{"version":3,"file":"LDFileUpload.d.ts","sourceRoot":"","sources":["../../../src/components/LDFileUpload/LDFileUpload.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAGzC,UAAU,kBAAkB;IAC1B,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvD,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAChD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,GAAI,OAAO,kBAAkB,4CAyB9C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"LDFileUpload.d.ts","sourceRoot":"","sources":["../../../src/components/LDFileUpload/LDFileUpload.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAGzC,UAAU,kBAAkB;IAC1B,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvD,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAChD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,GAAI,OAAO,kBAAkB,4CA2B9C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/LDFileUpload/LDFileUpload.js

@@ -3,6 +3,8 @@ import FileUploadBase from '../../components/LDFileUpload/FileUploadBase.js';
 import { useState } from 'react';
 const LDFileUpload = (props) => {
     const [fileList, setFileList] = useState([]);
-    return (_jsxs(FileUploadBase.Root, { fileList: fileList, setFileList: setFileList, maxSize: props.maxSize, allowedExtensions: props.allowedExtensions, recommendedSize: props.recommendedSize ?? { width: 1200, height: 800 }, maxFileCount: 1, onChangeFile: props.onChangeFile, onDeleteFile: props.onDeleteFile, className: "flex flex-col gap-sm ld-transition", disabled: props.disabled, readOnly: props.readOnly, children: [fileList[0]?.src ? (_jsx(FileUploadBase.CardList, {})) : (_jsx(FileUploadBase.Input, { className: "w-fit" })), props.isExistDescription && _jsx(FileUploadBase.Description, {})] }));
+    return (_jsxs(FileUploadBase.Root, { fileList: fileList, setFileList: setFileList, maxSize: props.maxSize, allowedExtensions: props.allowedExtensions, recommendedSize: props.recommendedSize ?? { width: 1200, height: 800 }, maxFileCount: 1, onChangeFile: props.onChangeFile, onDeleteFile: props.onDeleteFile, classNames: {
+            root: 'flex flex-col gap-sm ld-transition',
+        }, disabled: props.disabled, readOnly: props.readOnly, children: [fileList[0]?.src ? (_jsx(FileUploadBase.CardList, {})) : (_jsx(FileUploadBase.Input, { className: "w-fit" })), props.isExistDescription && _jsx(FileUploadBase.Description, {})] }));
 };
 export default LDFileUpload;

package/dist/components/LDFileUpload/LDFileUploadList.js

@@ -3,6 +3,6 @@ import FileUploadBase from '../../components/LDFileUpload/FileUploadBase.js';
 import { useState } from 'react';
 const LDFileUploadList = (props) => {
     const [fileList, setFileList] = useState([]);
-    return (_jsxs(FileUploadBase.Root, { fileList: fileList, setFileList: setFileList, maxSize: props.maxSize, allowedExtensions: props.allowedExtensions, recommendedSize: props.recommendedSize ?? { width: 1200, height: 800 }, maxFileCount: props.maxFileCount, onChangeFile: props.onChangeFile, onDeleteFile: props.onDeleteFile, className: "flex flex-col gap-sm ld-transition", disabled: props.disabled, readOnly: props.readOnly, children: [fileList.length < props.maxFileCount && !props.disabled && (_jsx(FileUploadBase.Input, { className: "w-fit" })), props.isExistDescription && _jsx(FileUploadBase.Description, {}), _jsx("div", { className: "flex flex-row gap-sm", children: fileList.length > 0 && _jsx(FileUploadBase.CardList, {}) })] }));
+    return (_jsxs(FileUploadBase.Root, { fileList: fileList, setFileList: setFileList, maxSize: props.maxSize, allowedExtensions: props.allowedExtensions, recommendedSize: props.recommendedSize ?? { width: 1200, height: 800 }, maxFileCount: props.maxFileCount, onChangeFile: props.onChangeFile, onDeleteFile: props.onDeleteFile, classNames: { root: 'flex flex-col gap-sm ld-transition' }, disabled: props.disabled, readOnly: props.readOnly, children: [fileList.length < props.maxFileCount && !props.disabled && (_jsx(FileUploadBase.Input, { className: "w-fit" })), props.isExistDescription && _jsx(FileUploadBase.Description, {}), _jsx("div", { className: "flex flex-row gap-sm", children: fileList.length > 0 && _jsx(FileUploadBase.CardList, {}) })] }));
 };
 export default LDFileUploadList;

package/dist/components/LDFileUpload/LDImageUpload.d.ts

@@ -1,3 +1,4 @@
+import { IFileUploadClassNames } from '../../components/LDFileUpload/FileUploadBase.js';
 import { TMimeType } from '../../constants/file.js';
 import { IFile } from '../../utils/file.js';
 interface ILDImageUploadProps {
@@ -12,6 +13,7 @@ interface ILDImageUploadProps {
     isExistDescription?: boolean;
     disabled?: boolean;
     readOnly?: boolean;
+    classNames?: IFileUploadClassNames;
 }
 declare const LDImageUpload: (props: ILDImageUploadProps) => import("react/jsx-runtime").JSX.Element;
 export default LDImageUpload;

package/dist/components/LDFileUpload/LDImageUpload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LDImageUpload.d.ts","sourceRoot":"","sources":["../../../src/components/LDFileUpload/LDImageUpload.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAGzC,UAAU,mBAAmB;IAC3B,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvD,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAChD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,aAAa,GAAI,OAAO,mBAAmB,4CAyBhD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"LDImageUpload.d.ts","sourceRoot":"","sources":["../../../src/components/LDFileUpload/LDImageUpload.tsx"],"names":[],"mappings":"AAAA,OAAuB,EACrB,qBAAqB,EACtB,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAIzC,UAAU,mBAAmB;IAC3B,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvD,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAChD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,qBAAqB,CAAC;CACpC;AAED,QAAA,MAAM,aAAa,GAAI,OAAO,mBAAmB,4CA4BhD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/LDFileUpload/LDImageUpload.js

@@ -1,8 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import FileUploadBase from '../../components/LDFileUpload/FileUploadBase.js';
 import { useState } from 'react';
+import cn from '../../utils/cn.js';
 const LDImageUpload = (props) => {
     const [fileList, setFileList] = useState([]);
-    return (_jsxs(FileUploadBase.Root, { fileList: fileList, setFileList: setFileList, maxSize: props.maxSize, allowedExtensions: props.allowedExtensions, recommendedSize: props.recommendedSize ?? { width: 1200, height: 800 }, maxFileCount: 1, onChangeFile: props.onChangeFile, onDeleteFile: props.onDeleteFile, className: "flex flex-col gap-sm ld-transition", disabled: props.disabled, readOnly: props.readOnly, children: [fileList[0]?.src ? (_jsx(FileUploadBase.CardList, { type: "image" })) : (_jsx(FileUploadBase.Input, { type: "image" })), props.isExistDescription && _jsx(FileUploadBase.Description, {})] }));
+    return (_jsxs(FileUploadBase.Root, { fileList: fileList, setFileList: setFileList, maxSize: props.maxSize, allowedExtensions: props.allowedExtensions, recommendedSize: props.recommendedSize ?? { width: 1200, height: 800 }, maxFileCount: 1, onChangeFile: props.onChangeFile, onDeleteFile: props.onDeleteFile, classNames: {
+            ...props.classNames,
+            root: cn('flex flex-col gap-sm ld-transition', props.classNames?.root),
+        }, disabled: props.disabled, readOnly: props.readOnly, children: [fileList[0]?.src ? (_jsx(FileUploadBase.CardList, { type: "image" })) : (_jsx(FileUploadBase.Input, { type: "image" })), props.isExistDescription && _jsx(FileUploadBase.Description, {})] }));
 };
 export default LDImageUpload;

package/dist/components/LDFileUpload/LDImageUploadList.js

@@ -3,6 +3,6 @@ import FileUploadBase from '../../components/LDFileUpload/FileUploadBase.js';
 import { useState } from 'react';
 const LDImageUploadList = (props) => {
     const [fileList, setFileList] = useState([]);
-    return (_jsxs(FileUploadBase.Root, { fileList: fileList, setFileList: setFileList, maxSize: props.maxSize, allowedExtensions: props.allowedExtensions, recommendedSize: props.recommendedSize ?? { width: 1200, height: 800 }, maxFileCount: props.maxFileCount, onChangeFile: props.onChangeFile, onDeleteFile: props.onDeleteFile, className: "flex flex-col gap-sm ld-transition", disabled: props.disabled, readOnly: props.readOnly, children: [_jsxs("div", { className: "flex flex-row gap-sm", children: [fileList.length > 0 && _jsx(FileUploadBase.CardList, { type: "image" }), fileList.length < props.maxFileCount && !props.disabled && (_jsx(FileUploadBase.Input, { type: "image" }))] }), props.isExistDescription && _jsx(FileUploadBase.Description, {})] }));
+    return (_jsxs(FileUploadBase.Root, { fileList: fileList, setFileList: setFileList, maxSize: props.maxSize, allowedExtensions: props.allowedExtensions, recommendedSize: props.recommendedSize ?? { width: 1200, height: 800 }, maxFileCount: props.maxFileCount, onChangeFile: props.onChangeFile, onDeleteFile: props.onDeleteFile, classNames: { root: 'flex flex-col gap-sm ld-transition' }, disabled: props.disabled, readOnly: props.readOnly, children: [_jsxs("div", { className: "flex flex-row gap-sm", children: [fileList.length > 0 && _jsx(FileUploadBase.CardList, { type: "image" }), fileList.length < props.maxFileCount && !props.disabled && (_jsx(FileUploadBase.Input, { type: "image" }))] }), props.isExistDescription && _jsx(FileUploadBase.Description, {})] }));
 };
 export default LDImageUploadList;

package/dist/components/LDForm/LDFormErrorMessage.d.ts

@@ -1,9 +1,11 @@
+import { CSSProperties } from 'react';
 interface LDFormErrorMessageProps {
     id?: string;
     error: string;
     disabled?: boolean;
     className?: string;
+    style?: CSSProperties;
 }
-declare const LDFormErrorMessage: ({ id, error, disabled, className, }: LDFormErrorMessageProps) => import("react/jsx-runtime").JSX.Element;
+declare const LDFormErrorMessage: ({ id, error, disabled, className, style, }: LDFormErrorMessageProps) => import("react/jsx-runtime").JSX.Element;
 export default LDFormErrorMessage;
 //# sourceMappingURL=LDFormErrorMessage.d.ts.map

package/dist/components/LDForm/LDFormErrorMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LDFormErrorMessage.d.ts","sourceRoot":"","sources":["../../../src/components/LDForm/LDFormErrorMessage.tsx"],"names":[],"mappings":"AAKA,UAAU,uBAAuB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,kBAAkB,GAAI,qCAKzB,uBAAuB,4CAyBzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"LDFormErrorMessage.d.ts","sourceRoot":"","sources":["../../../src/components/LDForm/LDFormErrorMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAuB,MAAM,OAAO,CAAC;AAG3D,UAAU,uBAAuB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,QAAA,MAAM,kBAAkB,GAAI,4CAMzB,uBAAuB,4CA0BzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/LDForm/LDFormErrorMessage.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import cn from '../../utils/cn.js';
-const LDFormErrorMessage = ({ id, error, disabled = false, className, }) => {
+const LDFormErrorMessage = ({ id, error, disabled = false, className, style, }) => {
     const visible = Boolean(error) && !disabled;
     const [displayError, setDisplayError] = useState(error);
     useEffect(() => {
@@ -12,6 +12,6 @@ const LDFormErrorMessage = ({ id, error, disabled = false, className, }) => {
     return (_jsx("div", { id: id, role: "alert", onAnimationEnd: () => {
             if (!visible)
                 setDisplayError('');
-        }, className: cn('text-danger600 display12 bold absolute bottom-1 right-2', visible ? 'animate-fade-in' : 'animate-fade-out', className), children: displayError && `*${displayError}` }, visible ? displayError : 'hidden'));
+        }, className: cn('text-danger600 display12 bold absolute bottom-1 right-2', visible ? 'animate-fade-in' : 'animate-fade-out', className), style: style, children: displayError && `*${displayError}` }, visible ? displayError : 'hidden'));
 };
 export default LDFormErrorMessage;

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

@@ -10,6 +10,6 @@ interface LDFormInputProps extends Omit<LDInputProps, 'name' | 'onChange' | 'val
     errorClassName?: string;
     showEditIcon?: boolean;
 }
-declare const LDFormInput: ({ name, options, variant, color, size, block, disabled, ref, customErrorMessage, isHiddenErrorMessage, errorClassName, showEditIcon, rightAddon, ...props }: LDFormInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const LDFormInput: ({ name, options, variant, size, block, disabled, ref, customErrorMessage, isHiddenErrorMessage, errorClassName, showEditIcon, rightAddon, ...props }: LDFormInputProps) => import("react/jsx-runtime").JSX.Element;
 export default LDFormInput;
 //# sourceMappingURL=LDFormInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LDFormInput.d.ts","sourceRoot":"","sources":["../../../src/components/LDInput/LDFormInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAgB,EAAE,KAAK,YAAY,EAAa,MAAM,WAAW,CAAC;AAMlE,UAAU,gBAAiB,SAAQ,IAAI,CACrC,YAAY,EACZ,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,CACzC;IACC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,WAAW,GAAI,6JAelB,gBAAgB,4CAqFlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"LDFormInput.d.ts","sourceRoot":"","sources":["../../../src/components/LDInput/LDFormInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAML,KAAK,GAAG,EACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAgB,EACd,KAAK,YAAY,EAGlB,MAAM,WAAW,CAAC;AAQnB,UAAU,gBAAiB,SAAQ,IAAI,CACrC,YAAY,EACZ,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,CACzC;IACC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAYD,QAAA,MAAM,WAAW,GAAI,sJAclB,gBAAgB,4CAiGlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/LDInput/LDFormInput.js

@@ -1,24 +1,47 @@
 '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 { Children, Fragment, isValidElement, useMemo, } from 'react';
+import LDInput, { iconSizes, } 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';
+// addon 아이콘 사이 gap과 동일한 값 (addonListGapClasses = control-padding-x / 2)
+const controlPaddingXVars = {
+    '2xsmall': '--control-padding-x-input-2xs',
+    xsmall: '--control-padding-x-input-xs',
+    small: '--control-padding-x-input-sm',
+    medium: '--control-padding-x-input-md',
+    large: '--control-padding-x-input-lg',
+    xlarge: '--control-padding-x-input-xl',
+};
+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 count = useMemo(() => {
+        const editIconCount = showEditIcon && !disabled ? 1 : 0;
+        const innerCount = isValidElement(rightAddon) && rightAddon.type === Fragment
+            ? Children.count(rightAddon.props.children)
+            : Children.count(rightAddon);
+        const visibleIcon = !props.hiddenPasswordToggle && props.type === 'password' ? 1 : 0;
+        return editIconCount + visibleIcon + innerCount;
+    }, [
+        showEditIcon,
+        disabled,
+        rightAddon,
+        props.hiddenPasswordToggle,
+        props.type,
+    ]);
     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, "aria-invalid": fieldState.hasError, "aria-describedby": fieldState.hasError ? fieldState.errorId : undefined }), !isHiddenErrorMessage && (_jsx(LDFormErrorMessage, { id: fieldState.errorId, error: fieldState.error, disabled: disabled, className: errorClassName, style: {
+                            marginRight: `calc(${count * iconSize}px + var(${controlPaddingXVars[size]}) / 2 * ${count})`,
+                        } }))] }));
         } }));
 };
 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 addonListRightOffsetClasses: Record<InputSize, string>;
 export declare const iconSizes: Record<InputSize, number>;
 export interface LDInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'color' | 'size'> {
     /** 입력 필드 스타일 유형 */
@@ -12,7 +13,7 @@ export interface LDInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>
     /** 입력 필드 높이 및 폰트 크기 프리셋 */
     size?: InputSize;
     /** 비밀번호 표시/숨김 토글 버튼 */
-    showPasswordToggle?: boolean;
+    hiddenPasswordToggle?: boolean;
     /** true 시 너비 100% */
     block?: boolean;
     /** 우측 부가 요소 (아이콘 등) */
@@ -20,6 +21,6 @@ export interface LDInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>
     /** 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, style, rightAddon, hiddenPasswordToggle, ref, ...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,EAGL,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;AAoCb,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAOtD,CAAC;AAWF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAOjE,CAAC;AAEF,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,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,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,oHAad,YAAY,4CA2Fd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/LDInput/LDInput.js

@@ -1,79 +1,80 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, } from 'react';
+import { useState, isValidElement, } 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';
 // ── 스타일 매핑 ──
 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:bg-tintBlue focus:outline-lb500',
+        point: 'bg-tintBlue text-neutral900 border-none outline-2 outline-transparent [outline-style:solid] [outline-offset:-2px] focus: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: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:bg-neutral50',
+        point: 'bg-transparent border-none outline-2 outline-transparent [outline-style:solid] [outline-offset:-2px] focus:bg-tintBlue',
+        danger: 'bg-transparent border-none outline-2 outline-transparent [outline-style:solid] [outline-offset:-2px] outline-danger600 focus: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',
+};
+const addonListGapClasses = {
+    '2xsmall': 'gap-[calc(var(--control-padding-x-input-2xs)/2)]',
+    xsmall: 'gap-[calc(var(--control-padding-x-input-xs)/2)]',
+    small: 'gap-[calc(var(--control-padding-x-input-sm)/2)]',
+    medium: 'gap-[calc(var(--control-padding-x-input-md)/2)]',
+    large: 'gap-[calc(var(--control-padding-x-input-lg)/2)]',
+    xlarge: 'gap-[calc(var(--control-padding-x-input-xl)/2)]',
 };
-const addonRightPaddingClasses = {
-    xSmall: 'pr-8',
-    small: 'pr-8',
-    medium: 'pr-8',
-    large: 'pr-10',
-    big: 'pr-11',
-    xLarge: 'pr-12',
+export const addonListRightOffsetClasses = {
+    '2xsmall': 'right-[var(--control-padding-x-input-2xs)]',
+    xsmall: 'right-[var(--control-padding-x-input-xs)]',
+    small: 'right-[var(--control-padding-x-input-sm)]',
+    medium: 'right-[var(--control-padding-x-input-md)]',
+    large: 'right-[var(--control-padding-x-input-lg)]',
+    xlarge: 'right-[var(--control-padding-x-input-xl)]',
 };
 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 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, style, rightAddon, hiddenPasswordToggle = false, ref, ...props }) => {
+    const isExistAddonIconList = isValidElement(rightAddon);
     const [passwordVisible, setPasswordVisible] = useState(false);
-    const resolvedType = showPasswordToggle
+    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 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 &&
+    const fieldClassName = cn('w-full bold placeholder-neutral300 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], height && 'h-full', disabled && 'cursor-not-allowed', 'read-only:cursor-not-allowed', className);
+    return (_jsxs(InputBase.Root, { block: block, style: rootStyle, children: [_jsx(InputBase.Field, { ref: ref, type: resolvedType, disabled: disabled, className: fieldClassName, style: fieldStyle, ...props }), _jsxs(InputBase.Addon, { position: "right", className: cn('text-neutral500 flex flex-row items-center', size ? addonListRightOffsetClasses[size] : 'right-2.5', isExistAddonIconList && addonListGapClasses[size ?? 'small']), children: [rightAddon, passwordToggleAddon] })] }));
 };
 export default LDInput;

package/dist/components/LDModal/LDModal.d.ts

@@ -1,51 +1,30 @@
-import { type ReactNode } from 'react';
-export type ModalSize = 'small' | 'medium' | 'large' | 'xlarge';
-export interface ModalButtons {
-    direction?: 'row' | 'column';
-    list?: ModalButton[];
-}
-export interface ModalButton<T = unknown> {
-    /** 버튼 텍스트 */
-    label: string;
-    /** 버튼 식별 값 (onButtonClick에 전달) */
-    value: T;
-    /** 버튼 스타일 유형 */
-    variant?: 'solid' | 'outline' | 'ghost';
-    /** 버튼 색상 테마 */
-    color?: 'neutral' | 'point' | 'danger';
-    /** 클릭 핸들러 (false 반환 시 모달 닫힘 방지) */
-    onClick?: () => void | boolean | Promise<void | boolean>;
-}
-export interface LDModalProps {
-    /** 모달 열림 상태 (제어 컴포넌트) */
-    open?: boolean;
-    /** 초기 열림 상태 (비제어 컴포넌트) */
-    defaultOpen?: boolean;
-    /** 열림 상태 변경 시 호출되는 콜백 */
-    onOpenChange?: (open: boolean) => void;
-    /** 서브 타이틀 (title 위에 표시) */
+import { type ModalSize } from './LDModalView.js';
+export interface LDModalOptions<T = undefined> {
     name?: string;
-    /** 모달 제목 */
     title?: string;
-    /** 모달 설명 텍스트 */
     description?: string;
-    /** 본문 콘텐츠 */
-    children?: ReactNode;
-    /** 모달 너비 프리셋 */
+    content?: React.ReactNode | ((args: {
+        onClose: (value?: T) => void;
+    }) => React.ReactNode);
+    buttons?: {
+        value: T;
+        label: string;
+        variant?: 'solid' | 'outline' | 'ghost';
+        color?: 'neutral' | 'point' | 'danger';
+        onClick?: () => void | boolean | Promise<void | boolean>;
+    }[];
+    /** 버튼 배치 방향 */
+    buttonsDirection?: 'row' | 'column';
     size?: ModalSize;
-    /** 너비 직접 지정 (size보다 우선) */
     icon?: 'success' | 'fail';
-    /** 하단 버튼 목록 */
-    buttons?: ModalButtons;
-    /** 스크롤 동작 */
+    /** 스크롤 동작 (LDModalView와 동일) */
     scrollBehavior?: 'inside' | 'outside';
-    /** 추가 CSS 클래스 (모달 패널에 적용) */
+    /** 모달 패널에 적용할 추가 CSS 클래스 */
     className?: string;
-    /** 인라인 스타일 (모달 패널에 적용) */
+    /** 모달 패널 인라인 스타일 (자유 width/height 등) */
     style?: React.CSSProperties;
-    /** 버튼 클릭 시 해당 버튼의 value를 전달하는 콜백 */
-    onButtonClick?: (value: unknown) => void;
+    onBeforeClose?: () => Promise<boolean> | boolean;
 }
-declare const LDModal: ({ open, defaultOpen, onOpenChange, name, title, description, children, size, icon, buttons, scrollBehavior, className, style, onButtonClick, }: LDModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const LDModal: <T = undefined>(options: LDModalOptions<T>) => Promise<T | undefined>;
 export default LDModal;
 //# sourceMappingURL=LDModal.d.ts.map