@loword/loword-design-system 0.0.6 → 0.0.7

package/dist/components/LDFileUpload/FileUploadBase.js

@@ -0,0 +1,186 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState, } from 'react';
+import cn from '../../utils/cn.js';
+import { FILE_EXTENSIONS } from '../../constants/file.js';
+import LDButton from '../LDButton/LDButton.js';
+import LDCarousel from '../LDCarousel/LDCarousel.js';
+import { fileToBase64, getFileIcon, getFileSizeUnit, isImage, validAllowedExtesions, validFileSize, validImageSize, } from '../../utils/file.js';
+import LDToast from '../LDToast/LDToast.js';
+import { renderIcon } from '../../utils/renderIcon.js';
+const FileUploadContext = createContext(null);
+export const useFileUploadContext = () => {
+    const fileUploadContext = useContext(FileUploadContext);
+    if (!fileUploadContext) {
+        throw new Error('LDFileUploadBase 하위 컴포넌트는 Root 내부에서 사용해야 합니다.');
+    }
+    return fileUploadContext;
+};
+const Root = ({ recommendedSize, maxSize, allowedExtensions, maxFileCount, fileList, setFileList, onChangeFile, onDeleteFile, className, children, }) => {
+    return (_jsx(FileUploadContext.Provider, { value: {
+            recommendedSize,
+            maxSize,
+            allowedExtensions,
+            maxFileCount,
+            fileList,
+            setFileList,
+            onChangeFile,
+            onDeleteFile,
+        }, children: _jsx("div", { className: cn('w-full', className), children: children }) }));
+};
+const Input = ({ type = 'default', label = '파일 선택', ...props }) => {
+    const { allowedExtensions, maxSize, fileList, setFileList, maxFileCount, onChangeFile, } = useFileUploadContext();
+    const getFileError = async (file) => {
+        if (!validAllowedExtesions(file, allowedExtensions)) {
+            const allowed = allowedExtensions
+                .map((item) => FILE_EXTENSIONS[item].toUpperCase())
+                .join(', ');
+            return `지원하지 않는 파일 형식입니다. ${allowed} 파일만 업로드 가능합니다.`;
+        }
+        if (!validFileSize(file, maxSize)) {
+            return `파일 크기가 너무 큽니다. ${getFileSizeUnit(maxSize)} 이하 파일을 선택해주세요.`;
+        }
+        if (isImage(file.name) && !(await validImageSize(file))) {
+            return '이미지 해상도가 너무 큽니다. 더 작은 크기의 이미지를 선택해주세요.';
+        }
+        return null;
+    };
+    const handleFile = async (e) => {
+        const files = e.target.files;
+        if (!files)
+            return;
+        if (fileList.length + files.length > maxFileCount) {
+            LDToast.error(`최대 ${maxFileCount}개까지 업로드할 수 있습니다.`);
+            return;
+        }
+        for (const file of files) {
+            const error = await getFileError(file);
+            if (error) {
+                LDToast.error(error);
+                return;
+            }
+        }
+        const newFiles = [];
+        for (const file of files) {
+            try {
+                const data = await fileToBase64(file);
+                newFiles.push(data);
+            }
+            catch (error) {
+                if (error instanceof Error) {
+                    LDToast.error(error.message);
+                    return;
+                }
+                LDToast.error('파일 업로드 중 문제가 발생했습니다. 잠시후 다시 시도해주세요.');
+                return;
+            }
+        }
+        const newList = [...fileList, ...newFiles];
+        setFileList(newList);
+        await onChangeFile(newList);
+    };
+    const fileInput = (_jsx("input", { type: "file", multiple: maxFileCount > 1, onClick: (e) => (e.currentTarget.value = ''), onChange: (e) => handleFile(e), 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', 'hover:bg-neutral-100 hover:border-neutral200 hover:cursor-pointer hover:text-neutral600', props.className), children: [renderIcon('images', 'size-6'), fileInput] }));
+    }
+    return (_jsxs(LDButton, { as: "label", ...props, children: [label, fileInput] }));
+};
+const CardList = (props) => {
+    const { fileList, setFileList, allowedExtensions, maxSize, onChangeFile, onDeleteFile, } = useFileUploadContext();
+    const [hoveredList, setHoveredList] = useState(new Array(fileList.length).fill(false));
+    const handleFile = async (e, idx) => {
+        const files = e.target.files;
+        if (!files)
+            return;
+        const file = files[0];
+        if (!file)
+            return;
+        if (!validAllowedExtesions(file, allowedExtensions)) {
+            const allowed = allowedExtensions
+                .map((item) => FILE_EXTENSIONS[item].toUpperCase())
+                .join(', ');
+            LDToast.error(`지원하지 않는 파일 형식입니다. ${allowed} 파일만 업로드 가능합니다.`);
+            return;
+        }
+        if (!validFileSize(file, maxSize)) {
+            LDToast.error(`파일 크기가 너무 큽니다. ${getFileSizeUnit(maxSize)} 이하 파일을 선택해주세요.`);
+            return;
+        }
+        if (isImage(file.name) && !(await validImageSize(file))) {
+            LDToast.error('이미지 해상도가 너무 큽니다. 더 작은 크기의 이미지를 선택해주세요.');
+            return;
+        }
+        try {
+            const data = await fileToBase64(file);
+            const newList = fileList.map((item, i) => (i === idx ? data : item));
+            setFileList(newList);
+            await onChangeFile(newList);
+        }
+        catch (error) {
+            if (error instanceof Error) {
+                LDToast.error(error.message);
+                return;
+            }
+            LDToast.error('파일 업로드 중 문제가 발생했습니다. 잠시후 다시 시도해주세요.');
+        }
+    };
+    const handleDeleteFile = async (idx) => {
+        const target = fileList[idx];
+        if (!target)
+            return;
+        try {
+            const result = await onDeleteFile(target);
+            if (result) {
+                const newList = fileList.filter((_, i) => i !== idx);
+                setFileList(newList);
+                await onChangeFile(newList);
+            }
+        }
+        catch {
+            LDToast.error('파일 삭제 중 문제가 발생했습니다. 잠시후 다시 시도해주세요.');
+        }
+    };
+    if (props.type === 'image') {
+        const cards = fileList.map((file, idx) => (_jsxs("label", { className: "relative block size-21 overflow-hidden rounded-[21px] hover:cursor-pointer", onMouseOver: () => {
+                setHoveredList((prev) => {
+                    const next = [...prev];
+                    next[idx] = true;
+                    return next;
+                });
+            }, onMouseOut: () => {
+                setHoveredList((prev) => {
+                    const next = [...prev];
+                    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), className: "sr-only" }), _jsx(LDButton, { onClick: async (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        await handleDeleteFile(idx);
+                    }, 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] ? '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("div", { className: "flex flex-col gap-sm w-full", children: fileList.map((file, idx) => (_jsxs("label", { className: "w-full flex flex-row justify-between items-center px-4 py-3 bg-neutral50 rounded-lg 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), className: "sr-only" }), _jsx(LDButton, { onClick: async (e) => {
+                        e.stopPropagation();
+                        await handleDeleteFile(idx);
+                    }, variant: "ghost", leftIcon: "trash2", size: "large", color: "neutral", className: "text-neutral500 rounded-sm bg-white px-0 flex justify-center items-center min-w-0 h-10 w-10 ld-transition" })] }, `${file.fileName}_${idx}`))) }));
+};
+const Description = ({ className }) => {
+    const { recommendedSize, maxSize, allowedExtensions, maxFileCount } = 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] }));
+};
+export const FileUploadBase = {
+    Root,
+    Input,
+    CardList,
+    Description,
+};
+export default FileUploadBase;

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

@@ -0,0 +1,16 @@
+import { TMimeType } from '../../constants/file.js';
+import { IFile } from '../../utils/file.js';
+interface ILDFileUploadProps {
+    recommendedSize?: {
+        width: number;
+        height: number;
+    };
+    maxSize: number;
+    allowedExtensions: TMimeType[];
+    onChangeFile: (files: IFile[]) => void | Promise<void>;
+    onDeleteFile: (file: IFile) => Promise<boolean>;
+    isExistDescription?: boolean;
+}
+declare const LDFileUpload: (props: ILDFileUploadProps) => import("react/jsx-runtime").JSX.Element;
+export default LDFileUpload;
+//# sourceMappingURL=LDFileUpload.d.ts.map

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

@@ -0,0 +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;CAC9B;AAED,QAAA,MAAM,YAAY,GAAI,OAAO,kBAAkB,4CAuB9C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/LDFileUpload/LDFileUpload.js

@@ -0,0 +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", 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.d.ts

@@ -0,0 +1,17 @@
+import { TMimeType } from '../../constants/file.js';
+import { IFile } from '../../utils/file.js';
+interface ILDFileUploadListProps {
+    recommendedSize?: {
+        width: number;
+        height: number;
+    };
+    maxSize: number;
+    allowedExtensions: TMimeType[];
+    maxFileCount: number;
+    onChangeFile: (files: IFile[]) => void | Promise<void>;
+    onDeleteFile: (file: IFile) => Promise<boolean>;
+    isExistDescription?: boolean;
+}
+declare const LDFileUploadList: (props: ILDFileUploadListProps) => import("react/jsx-runtime").JSX.Element;
+export default LDFileUploadList;
+//# sourceMappingURL=LDFileUploadList.d.ts.map

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

@@ -0,0 +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;CAC9B;AAED,QAAA,MAAM,gBAAgB,GAAI,OAAO,sBAAsB,4CAwBtD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/LDFileUpload/LDFileUploadList.js

@@ -0,0 +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 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", children: [fileList.length < props.maxFileCount && (_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

@@ -0,0 +1,16 @@
+import { TMimeType } from '../../constants/file.js';
+import { IFile } from '../../utils/file.js';
+interface ILDImageUploadProps {
+    recommendedSize?: {
+        width: number;
+        height: number;
+    };
+    maxSize: number;
+    allowedExtensions: TMimeType[];
+    onChangeFile: (files: IFile[]) => void | Promise<void>;
+    onDeleteFile: (file: IFile) => Promise<boolean>;
+    isExistDescription?: boolean;
+}
+declare const LDImageUpload: (props: ILDImageUploadProps) => import("react/jsx-runtime").JSX.Element;
+export default LDImageUpload;
+//# sourceMappingURL=LDImageUpload.d.ts.map

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

@@ -0,0 +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;CAC9B;AAED,QAAA,MAAM,aAAa,GAAI,OAAO,mBAAmB,4CAuBhD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/LDFileUpload/LDImageUpload.js

@@ -0,0 +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 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", 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.d.ts

@@ -0,0 +1,17 @@
+import { TMimeType } from '../../constants/file.js';
+import { IFile } from '../../utils/file.js';
+interface ILDImageUploadListProps {
+    recommendedSize?: {
+        width: number;
+        height: number;
+    };
+    maxSize: number;
+    allowedExtensions: TMimeType[];
+    maxFileCount: number;
+    onChangeFile: (files: IFile[]) => void | Promise<void>;
+    onDeleteFile: (file: IFile) => Promise<boolean>;
+    isExistDescription?: boolean;
+}
+declare const LDImageUploadList: (props: ILDImageUploadListProps) => import("react/jsx-runtime").JSX.Element;
+export default LDImageUploadList;
+//# sourceMappingURL=LDImageUploadList.d.ts.map

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

@@ -0,0 +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;CAC9B;AAED,QAAA,MAAM,iBAAiB,GAAI,OAAO,uBAAuB,4CAwBxD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/LDFileUpload/LDImageUploadList.js

@@ -0,0 +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 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", children: [_jsxs("div", { className: "flex flex-row gap-sm", children: [fileList.length > 0 && _jsx(FileUploadBase.CardList, { type: "image" }), fileList.length < props.maxFileCount && (_jsx(FileUploadBase.Input, { type: "image" }))] }), props.isExistDescription && _jsx(FileUploadBase.Description, {})] }));
+};
+export default LDImageUploadList;

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

@@ -1,7 +1,8 @@
 import { type InputHTMLAttributes, type ReactNode, type Ref } from 'react';
 type InputVariant = 'filled' | 'outline' | 'ghost';
 type InputColor = 'neutral' | 'point' | 'danger';
-type InputSize = 'xSmall' | 'small' | 'medium' | 'large' | 'big' | 'xLarge';
+export type InputSize = 'xSmall' | 'small' | 'medium' | 'large' | 'big' | 'xLarge';
+export declare const inputSizeClasses: Record<InputSize, string>;
 export declare const iconSizes: Record<InputSize, number>;
 export interface LDInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'color' | 'size'> {
     /** 입력 필드 스타일 유형 */

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,KAAK,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAqD5E,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,4CAuEd,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"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;AAmCb,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,4CAuEd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/LDInput/LDInput.js

@@ -11,9 +11,9 @@ const variantColorClasses = {
         danger: 'bg-tintRed text-neutral900 outline-2 outline-red500',
     },
     outline: {
-        neutral: 'bg-transparent text-neutral900 border border-mono200 focus:border-lb500',
-        point: 'bg-transparent text-neutral900 border border-mono200 focus:border-lb500',
-        danger: 'bg-transparent text-neutral900 border border-danger100 focus:border-red500',
+        neutral: 'bg-transparent text-neutral900 border-2 border-mono200 focus:border-lb500',
+        point: 'bg-transparent text-neutral900 border-2 border-mono200 focus:border-lb500',
+        danger: 'bg-transparent text-neutral900 border-2 border-danger100 focus:border-red500',
     },
     ghost: {
         neutral: 'bg-transparent text-neutral900 outline-2 outline-transparent hover:bg-mono50 focus:bg-mono100 focus:outline-lb500',
@@ -23,10 +23,10 @@ const variantColorClasses = {
 };
 const disabledVariantClasses = {
     filled: 'bg-mono100 text-mono400',
-    outline: 'bg-transparent text-mono400 border border-mono200',
+    outline: 'bg-transparent text-mono400 border-2 border-mono200',
     ghost: 'bg-transparent text-mono400',
 };
-const sizeClasses = {
+export const inputSizeClasses = {
     xSmall: 'input-2xs',
     small: 'input-xs',
     medium: 'input-sm',
@@ -65,7 +65,7 @@ const LDInput = ({ variant, color = 'neutral', size, showPasswordToggle = false,
     const fieldClassName = cn('w-full bold placeholder-mono400 ld-transition outline-none', variant &&
         (disabled
             ? disabledVariantClasses[variant]
-            : variantColorClasses[variant][color]), size && !height && sizeClasses[size], height && 'h-full', disabled && 'cursor-not-allowed', 'read-only:cursor-not-allowed', resolvedRightAddon && size && addonRightPaddingClasses[size], className);
+            : variantColorClasses[variant][color]), size && !height && inputSizeClasses[size], 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-neutral40", children: resolvedRightAddon }))] }));
 };
 export default LDInput;

package/dist/constants/file.d.ts

@@ -9,6 +9,7 @@ export declare const MAX_IMAGE_SIZE: {
 };
 /** MIME 타입 → 확장자 매핑 */
 export declare const FILE_EXTENSIONS: {
+    readonly 'image/avif': "avif";
     readonly 'image/apng': "apng";
     readonly 'image/bmp': "bmp";
     readonly 'image/gif': "gif";

package/dist/constants/file.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file.d.ts","sourceRoot":"","sources":["../../src/constants/file.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc;;;;CAIjB,CAAC;AAEX,eAAO,MAAM,cAAc;;;CAGjB,CAAC;AAEX,uBAAuB;AACvB,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;CAyBlB,CAAC;AAEX,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,eAAe,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,SAAS,CAAC,CAAC;AAEjE,2BAA2B;AAC3B,eAAO,MAAM,0BAA0B,EAAE,SAAS,EAQjD,CAAC;AAEF,iCAAiC;AACjC,eAAO,MAAM,gBAAgB,QAAwB,CAAC"}
+{"version":3,"file":"file.d.ts","sourceRoot":"","sources":["../../src/constants/file.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc;;;;CAIjB,CAAC;AAEX,eAAO,MAAM,cAAc;;;CAGjB,CAAC;AAEX,uBAAuB;AACvB,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;CA0BlB,CAAC;AAEX,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,eAAe,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,SAAS,CAAC,CAAC;AAEjE,2BAA2B;AAC3B,eAAO,MAAM,0BAA0B,EAAE,SAAS,EAQjD,CAAC;AAEF,iCAAiC;AACjC,eAAO,MAAM,gBAAgB,QAAwB,CAAC"}

package/dist/constants/file.js

@@ -9,6 +9,7 @@ export const MAX_IMAGE_SIZE = {
 };
 /** MIME 타입 → 확장자 매핑 */
 export const FILE_EXTENSIONS = {
+    'image/avif': 'avif',
     'image/apng': 'apng',
     'image/bmp': 'bmp',
     'image/gif': 'gif',