@loword/loword-design-system 0.0.10 → 0.0.13

package/dist/components/LDEmpty/EmptyBase.d.ts

@@ -0,0 +1,19 @@
+import { HTMLAttributes, ReactNode, Ref } from 'react';
+interface RootProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+interface ImageProps {
+    children?: ReactNode;
+}
+interface DescriptionProps {
+    description?: string;
+    className?: string;
+}
+export declare const EmptyBase: {
+    Root: ({ ref, children, className, ...props }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Image: ({ children }: ImageProps) => import("react/jsx-runtime").JSX.Element;
+    Description: ({ description, className }: DescriptionProps) => import("react/jsx-runtime").JSX.Element | null;
+};
+export default EmptyBase;
+//# sourceMappingURL=EmptyBase.d.ts.map

package/dist/components/LDEmpty/EmptyBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDEmpty/EmptyBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvD,UAAU,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAUD,UAAU,UAAU;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD,UAAU,gBAAgB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,eAAO,MAAM,SAAS;mDA3BgC,SAAS;0BAYlC,UAAU;8CASU,gBAAgB;CAUhE,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/LDEmpty/EmptyBase.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const Root = ({ ref, children, className, ...props }) => {
+    return (_jsx("div", { ref: ref, className: className, ...props, children: children }));
+};
+const Image = ({ children }) => {
+    return _jsx("div", { "aria-hidden": "true", children: children });
+};
+const Description = ({ description, className }) => {
+    if (!description)
+        return null;
+    return _jsx("span", { className: className, children: description });
+};
+export const EmptyBase = {
+    Root,
+    Image,
+    Description,
+};
+export default EmptyBase;

package/dist/components/LDEmpty/LDEmpty.d.ts

@@ -0,0 +1,35 @@
+import { CSSProperties, ReactNode } from 'react';
+export type EmptySize = 'small' | 'medium' | 'large';
+type EmptyDirection = 'col' | 'row';
+export interface LDEmptyProps {
+    /**
+     * 표시할 이미지/아이콘입니다. 생략하면 기본 빈 상태 일러스트가 렌더링됩니다.
+     */
+    image?: ReactNode;
+    /**
+     * 이미지 아래 표시할 설명 텍스트입니다. (기본값: 'No Data')
+     */
+    description?: string;
+    /**
+     * 이미지 크기와 설명 타이포그래피 스케일을 결정합니다. (기본값: 'medium')
+     */
+    size?: EmptySize;
+    /**
+     * 이미지/텍스트 정렬 방향을 결정합니다. (기본값: 'col')
+     */
+    direction?: EmptyDirection;
+    /**
+     * 추가적인 스타일 클래스를 지정합니다.
+     */
+    className?: string;
+    /**
+     * 인라인 스타일을 지정합니다. Root 엘리먼트에 그대로 전달됩니다.
+     */
+    style?: CSSProperties;
+}
+/**
+ * 데이터가 없을 때 표시하는 빈 상태 컴포넌트입니다.
+ */
+declare const LDEmpty: ({ image, description, size, direction, className, style, }: LDEmptyProps) => import("react/jsx-runtime").JSX.Element;
+export default LDEmpty;
+//# sourceMappingURL=LDEmpty.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LDEmpty.d.ts","sourceRoot":"","sources":["../../../src/components/LDEmpty/LDEmpty.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIjD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACrD,KAAK,cAAc,GAAG,KAAK,GAAG,KAAK,CAAC;AA6CpC,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;GAEG;AACH,QAAA,MAAM,OAAO,GAAI,4DAOd,YAAY,4CAqBd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/LDEmpty/LDEmpty.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from '../../utils/cn.js';
+import EmptyBase from './EmptyBase.js';
+const GAP_CLASS_MAP = {
+    small: 'gap-xs',
+    medium: 'gap-sm',
+    large: 'gap-md',
+};
+const IMAGE_WIDTH_MAP = {
+    small: 48,
+    medium: 64,
+    large: 92,
+};
+const DESCRIPTION_CLASS_MAP = {
+    small: 'display12',
+    medium: 'display14',
+    large: 'display16',
+};
+// antd Empty.PRESENTED_IMAGE_SIMPLE(viewBox 0 0 64 41) 포팅, 색상만 loword mono 토큰으로 치환
+const DefaultEmptyImage = ({ width }) => {
+    const height = (width * 41) / 64;
+    return (_jsx("svg", { width: width, height: height, viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [_jsx("ellipse", { className: "fill-mono100", cx: "32", cy: "33", rx: "32", ry: "7" }), _jsxs("g", { className: "stroke-mono300", fillRule: "nonzero", children: [_jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), _jsx("path", { className: "fill-mono50", d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" })] })] }) }));
+};
+/**
+ * 데이터가 없을 때 표시하는 빈 상태 컴포넌트입니다.
+ */
+const LDEmpty = ({ image, description = 'No Data', size = 'medium', direction = 'col', className, style, }) => {
+    return (_jsxs(EmptyBase.Root, { className: cn('flex items-center justify-center', direction === 'col' && 'flex-col', direction === 'row' && 'flex-row', GAP_CLASS_MAP[size], className), style: style, children: [_jsx(EmptyBase.Image, { children: image ?? _jsx(DefaultEmptyImage, { width: IMAGE_WIDTH_MAP[size] }) }), _jsx(EmptyBase.Description, { description: description, className: cn('text-neutral500', DESCRIPTION_CLASS_MAP[size]) })] }));
+};
+export default LDEmpty;

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;AAyQD,eAAO,MAAM,cAAc;wKAnaxB,SAAS;uCA+BT,UAAU;sBA6HY,cAAc;yBAwOX;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) => {
@@ -86,16 +87,15 @@ const Input = ({ type = 'default', label = '파일 선택', ...props }) => {
     };
     const fileInput = (_jsx("input", { type: "file", multiple: maxFileCount > 1, onClick: (e) => (e.currentTarget.value = ''), onChange: (e) => handleFile(e), disabled: disabled, className: "sr-only" }));
     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
+        return (_jsxs("label", { className: cn('outline-3 -outline-offset-3 outline-dotted rounded-xl outline-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:outline-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;
@@ -150,11 +150,11 @@ const CardList = (props) => {
         }
     };
     if (props.type === 'image') {
-        const cards = fileList.map((file, idx) => (_jsxs("label", { className: cn('relative block size-21 overflow-hidden rounded-[21px]', disabled
+        const cards = fileList.map((file, idx) => (_jsxs("label", { className: cn('group relative block size-21 overflow-hidden rounded-[21px] outline-3 -outline-offset-3 outline-neutral200', disabled
                 ? 'cursor-not-allowed'
                 : readOnly
                     ? 'cursor-default'
-                    : 'hover:cursor-pointer'), onMouseOver: () => {
+                    : 'hover:cursor-pointer', classNames?.card), onMouseOver: () => {
                 setHoveredList((prev) => {
                     const next = [...prev];
                     next[idx] = true;
@@ -166,33 +166,33 @@ const CardList = (props) => {
                     next[idx] = false;
                     return next;
                 });
-            }, children: [_jsx("img", { src: file?.src, alt: file?.fileName, className: "size-full object-cover" }), _jsx("input", { type: "file", onClick: (e) => (e.currentTarget.value = ''), onChange: (e) => handleFile(e, idx), disabled: locked, className: "sr-only" }), _jsx(LDButton, { onClick: async (e) => {
+            }, children: [_jsx("img", { src: file?.src, alt: file?.fileName, className: "size-full object-cover" }), _jsx("span", { className: cn('pointer-events-none absolute inset-0 opacity-0 ld-transition', !locked && 'bg-black/25 group-hover:opacity-100') }), _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.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("div", { className: cn('flex flex-row gap-sm w-full h-full', 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), slidesPerView: "auto", gap: 8, arrowPosition: "none", 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

@@ -1,5 +1,6 @@
 import { TMimeType } from '../../constants/file.js';
 import { IFile } from '../../utils/file.js';
+import { Dispatch, SetStateAction } from 'react';
 interface ILDFileUploadProps {
     recommendedSize?: {
         width: number;
@@ -12,6 +13,8 @@ interface ILDFileUploadProps {
     isExistDescription?: boolean;
     disabled?: boolean;
     readOnly?: boolean;
+    fileList: IFile[];
+    setFileList: Dispatch<SetStateAction<IFile[]>>;
 }
 declare const LDFileUpload: (props: ILDFileUploadProps) => import("react/jsx-runtime").JSX.Element;
 export default LDFileUpload;

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;AACzC,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEjD,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;IACnB,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;CAChD;AAED,QAAA,MAAM,YAAY,GAAI,OAAO,kBAAkB,4CAyB9C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/LDFileUpload/LDFileUpload.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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: props.fileList, setFileList: props.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: [props.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.d.ts

@@ -1,5 +1,6 @@
 import { TMimeType } from '../../constants/file.js';
 import { IFile } from '../../utils/file.js';
+import { Dispatch, SetStateAction } from 'react';
 interface ILDFileUploadListProps {
     recommendedSize?: {
         width: number;
@@ -13,6 +14,8 @@ interface ILDFileUploadListProps {
     isExistDescription?: boolean;
     disabled?: boolean;
     readOnly?: boolean;
+    fileList: IFile[];
+    setFileList: Dispatch<SetStateAction<IFile[]>>;
 }
 declare const LDFileUploadList: (props: ILDFileUploadListProps) => import("react/jsx-runtime").JSX.Element;
 export default LDFileUploadList;

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

@@ -1 +1 @@
-{"version":3,"file":"LDFileUploadList.d.ts","sourceRoot":"","sources":["../../../src/components/LDFileUpload/LDFileUploadList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAGzC,UAAU,sBAAsB;IAC9B,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,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,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,gBAAgB,GAAI,OAAO,sBAAsB,4CA0BtD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"LDFileUploadList.d.ts","sourceRoot":"","sources":["../../../src/components/LDFileUpload/LDFileUploadList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAE3D,UAAU,sBAAsB;IAC9B,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,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,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;CAChD;AAED,QAAA,MAAM,gBAAgB,GAAI,OAAO,sBAAsB,4CAwBtD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/LDFileUpload/LDFileUploadList.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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: props.fileList, setFileList: props.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: [props.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: props.fileList.length > 0 && _jsx(FileUploadBase.CardList, {}) })] }));
 };
 export default LDFileUploadList;

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

@@ -1,5 +1,7 @@
+import { IFileUploadClassNames } from '../../components/LDFileUpload/FileUploadBase.js';
 import { TMimeType } from '../../constants/file.js';
 import { IFile } from '../../utils/file.js';
+import { Dispatch, SetStateAction } from 'react';
 interface ILDImageUploadProps {
     recommendedSize?: {
         width: number;
@@ -12,6 +14,9 @@ interface ILDImageUploadProps {
     isExistDescription?: boolean;
     disabled?: boolean;
     readOnly?: boolean;
+    classNames?: IFileUploadClassNames;
+    fileList: IFile[];
+    setFileList: Dispatch<SetStateAction<IFile[]>>;
 }
 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;AACzC,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAG3D,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;IACnC,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;CAChD;AAED,QAAA,MAAM,aAAa,GAAI,OAAO,mBAAmB,4CA0BhD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/LDFileUpload/LDImageUpload.js

@@ -1,8 +1,10 @@
 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: props.fileList, setFileList: props.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: [props.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.d.ts

@@ -1,5 +1,6 @@
 import { TMimeType } from '../../constants/file.js';
 import { IFile } from '../../utils/file.js';
+import { Dispatch, SetStateAction } from 'react';
 interface ILDImageUploadListProps {
     recommendedSize?: {
         width: number;
@@ -13,6 +14,8 @@ interface ILDImageUploadListProps {
     isExistDescription?: boolean;
     disabled?: boolean;
     readOnly?: boolean;
+    fileList: IFile[];
+    setFileList: Dispatch<SetStateAction<IFile[]>>;
 }
 declare const LDImageUploadList: (props: ILDImageUploadListProps) => import("react/jsx-runtime").JSX.Element;
 export default LDImageUploadList;

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

@@ -1 +1 @@
-{"version":3,"file":"LDImageUploadList.d.ts","sourceRoot":"","sources":["../../../src/components/LDFileUpload/LDImageUploadList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAGzC,UAAU,uBAAuB;IAC/B,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,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,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,iBAAiB,GAAI,OAAO,uBAAuB,4CA0BxD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"LDImageUploadList.d.ts","sourceRoot":"","sources":["../../../src/components/LDFileUpload/LDImageUploadList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAE3D,UAAU,uBAAuB;IAC/B,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,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,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;CAChD;AAED,QAAA,MAAM,iBAAiB,GAAI,OAAO,uBAAuB,4CAwBxD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/LDFileUpload/LDImageUploadList.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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: props.fileList, setFileList: props.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 w-full h-full", children: [props.fileList.length > 0 && _jsx(FileUploadBase.CardList, { type: "image" }), props.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/InputBase.d.ts

@@ -4,19 +4,21 @@ interface RootProps {
     className?: string;
     style?: React.CSSProperties;
     children?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
 }
 interface FieldProps extends InputHTMLAttributes<HTMLInputElement> {
     ref?: Ref<HTMLInputElement>;
 }
 interface AddonProps {
-    position?: 'left' | 'right';
     className?: string;
+    style?: React.CSSProperties;
     children?: ReactNode;
+    ref?: Ref<HTMLSpanElement>;
 }
 export declare const InputBase: {
-    Root: ({ block, className, style, children }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ block, className, style, children, ref, }: RootProps) => import("react/jsx-runtime").JSX.Element;
     Field: ({ ref, ...props }: FieldProps) => import("react/jsx-runtime").JSX.Element;
-    Addon: ({ position, className, children }: AddonProps) => import("react/jsx-runtime").JSX.Element;
+    Addon: ({ className, style, children, ref }: AddonProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default InputBase;
 //# sourceMappingURL=InputBase.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDInput/InputBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAI3E,UAAU,SAAS;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAcD,UAAU,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IAChE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAOD,UAAU,UAAU;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAgBD,eAAO,MAAM,SAAS;kDAzCuC,SAAS;+BAgBpC,UAAU;+CAWgB,UAAU;CAkBrE,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"InputBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDInput/InputBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAI3E,UAAU,SAAS;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAyBD,UAAU,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IAChE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAOD,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B;AAcD,eAAO,MAAM,SAAS;wDA7CnB,SAAS;+BAqBsB,UAAU;iDAYQ,UAAU;CAgB7D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/LDInput/InputBase.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import cn from '../../utils/cn.js';
-const Root = ({ block = false, className, style, children }) => {
-    return (_jsx("div", { style: style, className: cn('relative flex group', block && 'w-full', className), children: children }));
+const Root = ({ block = false, className, style, children, ref, }) => {
+    return (_jsx("div", { ref: ref, style: style, className: cn('relative flex items-center group', block && 'w-full', className), children: children }));
 };
 const Field = ({ ref, ...props }) => {
     return _jsx("input", { ref: ref, ...props });
 };
-const Addon = ({ position = 'right', className, children }) => {
-    return (_jsx("span", { className: cn('absolute top-1/2 -translate-y-1/2 flex items-center', position === 'left' ? 'left-0' : 'right-0', className), children: children }));
+const Addon = ({ className, style, children, ref }) => {
+    return (_jsx("span", { ref: ref, style: style, className: cn('flex items-center', className), children: children }));
 };
 export const InputBase = {
     Root,

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,EAAU,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AACzC,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;AAED,QAAA,MAAM,WAAW,GAAI,sJAclB,gBAAgB,4CA+ElB,CAAC;AAEF,eAAe,WAAW,CAAC"}