@loword/loword-design-system 0.0.5 → 0.0.7

package/src/styles/typography.css

@@ -0,0 +1,171 @@
+@theme {
+  --font-pretendard: 'var(--font-pretendard)', sans-serif;
+
+  /* typography */
+  --text-display10: 10px;
+  --leading-display10: 14px;
+  --tracking-display10: -1px;
+
+  --text-display12: 12px;
+  --leading-display12: 16px;
+  --tracking-display12: -1px;
+
+  --text-display14: 14px;
+  --leading-display14: 18px;
+  --tracking-display14: -1px;
+
+  --text-display16: 16px;
+  --leading-display16: 20px;
+  --tracking-display16: -1px;
+
+  --text-display18: 18px;
+  --leading-display18: 22px;
+  --tracking-display18: -1px;
+
+  --text-display20: 20px;
+  --leading-display20: 24px;
+  --tracking-display20: -1px;
+
+  --text-display24: 24px;
+  --leading-display24: 28px;
+  --tracking-display24: -1px;
+
+  --text-display28: 28px;
+  --leading-display28: 32px;
+  --tracking-display28: -1px;
+
+  --text-display30: 30px;
+  --leading-display30: 36px;
+  --tracking-display30: -1px;
+
+  --text-display32: 32px;
+  --leading-display32: 38px;
+  --tracking-display32: -1px;
+
+  --text-display36: 36px;
+  --leading-display36: 42px;
+  --tracking-display36: -1px;
+
+  --text-display40: 40px;
+  --leading-display40: 48px;
+  --tracking-display40: -1px;
+
+  --text-display64: 64px;
+  --leading-display64: 72px;
+  --tracking-display64: -1px;
+
+  --text-display80: 80px;
+  --leading-display80: 88px;
+  --tracking-display80: -1px;
+
+  --text-display120: 120px;
+  --leading-display120: 128px;
+  --tracking-display120: -1px;
+
+  /* font-weight */
+  --font-light: 300;
+  --font-regular: 400;
+  --font-medium: 500;
+  --font-semibold: 550;
+  --font-bold: 600;
+  --font-extrabold: 700;
+  --font-black: 900;
+}
+
+@utility display10 {
+  font-size: var(--text-display10);
+  line-height: var(--leading-display10);
+  letter-spacing: var(--tracking-display10);
+}
+@utility display12 {
+  font-size: var(--text-display12);
+  line-height: var(--leading-display12);
+  letter-spacing: var(--tracking-display12);
+}
+@utility display14 {
+  font-size: var(--text-display14);
+  line-height: var(--leading-display14);
+  letter-spacing: var(--tracking-display14);
+}
+@utility display16 {
+  font-size: var(--text-display16);
+  line-height: var(--leading-display16);
+  letter-spacing: var(--tracking-display16);
+}
+@utility display18 {
+  font-size: var(--text-display18);
+  line-height: var(--leading-display18);
+  letter-spacing: var(--tracking-display18);
+}
+@utility display20 {
+  font-size: var(--text-display20);
+  line-height: var(--leading-display20);
+  letter-spacing: var(--tracking-display20);
+}
+@utility display24 {
+  font-size: var(--text-display24);
+  line-height: var(--leading-display24);
+  letter-spacing: var(--tracking-display24);
+}
+@utility display28 {
+  font-size: var(--text-display28);
+  line-height: var(--leading-display28);
+  letter-spacing: var(--tracking-display28);
+}
+@utility display30 {
+  font-size: var(--text-display30);
+  line-height: var(--leading-display30);
+  letter-spacing: var(--tracking-display30);
+}
+@utility display32 {
+  font-size: var(--text-display32);
+  line-height: var(--leading-display32);
+  letter-spacing: var(--tracking-display32);
+}
+@utility display36 {
+  font-size: var(--text-display36);
+  line-height: var(--leading-display36);
+  letter-spacing: var(--tracking-display36);
+}
+@utility display40 {
+  font-size: var(--text-display40);
+  line-height: var(--leading-display40);
+  letter-spacing: var(--tracking-display40);
+}
+@utility display64 {
+  font-size: var(--text-display64);
+  line-height: var(--leading-display64);
+  letter-spacing: var(--tracking-display64);
+}
+@utility display80 {
+  font-size: var(--text-display80);
+  line-height: var(--leading-display80);
+  letter-spacing: var(--tracking-display80);
+}
+@utility display120 {
+  font-size: var(--text-display120);
+  line-height: var(--leading-display120);
+  letter-spacing: var(--tracking-display120);
+}
+
+@utility light {
+  font-weight: var(--font-light);
+}
+@utility regular {
+  font-weight: var(--font-regular);
+}
+@utility medium {
+  font-weight: var(--font-medium);
+}
+@utility semibold {
+  font-weight: var(--font-semibold);
+}
+@utility bold {
+  font-weight: var(--font-bold);
+}
+@utility extrabold {
+  font-weight: var(--font-extrabold);
+}
+@utility black {
+  font-weight: var(--font-black);
+}

package/src/theme.css

@@ -0,0 +1,19 @@
+/**
+ * theme.css — 소비처(ledu-mono 등)의 Tailwind 컴파일러가 직접 처리하는
+ * raw @theme/@utility 진입점.
+ *
+ * 컴파일된 dist/index.css(styles.css)와 달리 토큰·유틸 정의가 원문 그대로 남아있어,
+ * 소비처가 자기 코드에 대해 `display40`, `bg-mono600` 같은 클래스를 on-demand로 생성할 수 있다.
+ *
+ * 주의:
+ * - `@import 'tailwindcss'`를 넣지 않는다. 소비처가 이미 import하므로 중복되면 충돌난다.
+ * - 컴포넌트 스타일(components/*, slider/carousel 등)은 포함하지 않는다 — styles.css가 담당.
+ */
+@import './styles/color.css';
+@import './styles/typography.css';
+@import './styles/text-utils.css';
+@import './styles/radius.css';
+@import './styles/spacing.css';
+@import './styles/layout.css';
+@import './styles/gradient.css';
+@import './styles/motion.css';

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

@@ -1,50 +0,0 @@
-import { Dispatch, type ReactNode, SetStateAction } from 'react';
-import { TMimeType } from '../../constants/file.js';
-import { type LDButtonProps } from '../../components/LDButton/LDButton.js';
-import { IFile } from '../../utils/file.js';
-interface FileUploadContextType {
-    recommendedSize?: {
-        width: number;
-        height: number;
-    };
-    maxSize: number;
-    allowedExtensions: TMimeType[];
-    fileList: IFile[];
-    setFileList: Dispatch<SetStateAction<IFile[]>>;
-    maxFileCount: number;
-}
-export declare const useFileUploadContext: () => FileUploadContextType;
-interface RootProps {
-    recommendedSize?: {
-        width: number;
-        height: number;
-    };
-    maxSize: number;
-    allowedExtensions: TMimeType[];
-    fileList: IFile[] | [];
-    setFileList: Dispatch<SetStateAction<IFile[] | []>>;
-    maxFileCount?: number;
-    className?: string;
-    children?: ReactNode;
-}
-interface LDInputProps extends LDButtonProps<'button'> {
-    onChangeFile: ({ fileName, fileBase64, file, }: {
-        fileName: string;
-        fileBase64: string;
-        file: File;
-    }) => Promise<string | void>;
-    label?: string;
-}
-export declare const LDFileUploadBase: {
-    Root: ({ recommendedSize, maxSize, allowedExtensions, maxFileCount, fileList, setFileList, className, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
-    LDInput: ({ onChangeFile, label, ...props }: LDInputProps) => import("react/jsx-runtime").JSX.Element;
-    CardList: ({ emptyContent, className, }: {
-        emptyContent?: ReactNode;
-        className?: string;
-    }) => import("react/jsx-runtime").JSX.Element | null;
-    Description: ({ className }: {
-        className?: string;
-    }) => import("react/jsx-runtime").JSX.Element;
-};
-export default LDFileUploadBase;
-//# sourceMappingURL=LDFileUploadBase.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"LDFileUploadBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDFileUpload/LDFileUploadBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,QAAQ,EACR,KAAK,SAAS,EACd,cAAc,EAGf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAmB,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAiB,EACf,KAAK,aAAa,EACnB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAGL,KAAK,EAKN,MAAM,kBAAkB,CAAC;AAG1B,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;CACtB;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,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA8BD,UAAU,YAAa,SAAQ,aAAa,CAAC,QAAQ,CAAC;IACpD,YAAY,EAAE,CAAC,EACb,QAAQ,EACR,UAAU,EACV,IAAI,GACL,EAAE;QACD,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,MAAM,CAAC;QACnB,IAAI,EAAE,IAAI,CAAC;KACZ,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmJD,eAAO,MAAM,gBAAgB;uHAjL1B,SAAS;iDAoCT,YAAY;6CA2EZ;QACD,YAAY,CAAC,EAAE,SAAS,CAAC;QACzB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB;iCA6CmC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE;CAuBzD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/LDFileUpload/LDFileUploadBase.js

@@ -1,102 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, useContext, } from 'react';
-import cn from '../../utils/cn.js';
-import { FILE_EXTENSIONS } from '../../constants/file.js';
-import LDButton from '../../components/LDButton/LDButton.js';
-import { fileToBase64, getFileSizeUnit, isImage, validAllowedExtesions, validFileSize, validImageSize, } from '../../utils/file.js';
-import LDToast from '../../components/LDToast/LDToast.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, className, children, }) => {
-    //   const [file, setFile] = useState<IFile | null>(null);
-    return (_jsx(FileUploadContext.Provider, { value: {
-            recommendedSize,
-            maxSize,
-            allowedExtensions,
-            maxFileCount: maxFileCount ?? 1,
-            fileList,
-            setFileList,
-        }, children: _jsx("div", { className: cn('w-full', className), children: children }) }));
-};
-const LDInput = ({ onChangeFile, label = '파일 선택', ...props }) => {
-    const { allowedExtensions, maxSize, fileList, setFileList, maxFileCount } = 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;
-        for (const file of files) {
-            const error = await getFileError(file);
-            if (error) {
-                LDToast.error(error);
-                return;
-            }
-        }
-        for (const file of files) {
-            try {
-                const data = await fileToBase64(file);
-                const src = await onChangeFile({ ...data, file });
-                if (src) {
-                    setFileList((prev) => [...prev, { ...data, src }]);
-                }
-            }
-            catch (error) {
-                if (error instanceof Error) {
-                    LDToast.error(error.message);
-                    return;
-                }
-                LDToast.error('파일 업로드 중 문제가 발생했습니다. 잠시후 다시 시도해주세요.');
-            }
-        }
-    };
-    return (_jsxs(LDButton, { as: "label", ...props, children: [label, _jsx("input", { type: "file", multiple: maxFileCount > 1, onClick: (e) => (e.currentTarget.value = ''), onChange: (e) => handleFile(e), className: "sr-only" })] }));
-};
-const CardList = ({ emptyContent, className, }) => {
-    /*
-      이미지인 경우
-      이미지가 아닌 파일인 경우
-    */
-    const { fileList } = useFileUploadContext();
-    if (fileList.length <= 0)
-        return emptyContent ? _jsx(_Fragment, { children: emptyContent }) : null;
-    return (_jsxs(_Fragment, { children: [_jsx(_Fragment, { children: JSON.stringify(fileList, null, 2) }), _jsx(_Fragment, { children: 'length: ' + fileList.length }), _jsx("div", { className: cn('flex flex-row', className), children: fileList?.map((file, idx) => (_jsx("div", { className: "size-12 overflow-hidden", children: _jsx("img", { src: file?.src, alt: file?.fileName, className: "object-cover" }) }, `${file.fileName}_${idx}`))) })] }));
-};
-// const CardList = ({}) => {
-//   return <></>;
-// };
-const Description = ({ className }) => {
-    const { recommendedSize, maxSize, allowedExtensions } = useFileUploadContext();
-    const recommendedSizeText = recommendedSize &&
-        `권장 사이즈 ${recommendedSize.width}x${recommendedSize.height}, `;
-    const requiredText = `최대 크기 ${getFileSizeUnit(maxSize)}`;
-    const extensionsText = ` (${allowedExtensions.map((item) => FILE_EXTENSIONS[item]).join(', ')})`;
-    return (_jsxs("p", { className: cn('display14 text-neutral400 semibold', className), children: [recommendedSizeText, requiredText, extensionsText] }));
-};
-export const LDFileUploadBase = {
-    Root,
-    LDInput,
-    CardList,
-    Description,
-};
-export default LDFileUploadBase;