@edu-tosel/design 0.1.4 → 0.1.5

package/README.md

@@ -1,32 +1,33 @@
-# TOSEL UI Library
-TOSEL 통합 디자인 시스템에 맞춘 UI 라이브러리
-
-## Tech Stack
-- tailwindcss 3.4.0
-- React 18
-
-## Getting Start
-```bash
-# 설치
-npm install @edu-tosel/ui@latest
-
-# 개발환경
-npm install # 의존성 설치
-npm start # React 환경에서 실행
-npm run test # jest 실행
-npm run build # 빌드
-npm run publish # npm 배포
-```
-
-## Folder Structure
-### asset
-tailwindcss를 조합한 커스텀 클래스 보관
-
-### board
-### card
-### deck
-### header
-### modal
-### navigation
-### text
+# TOSEL Design Library
+TOSEL 통합 디자인 시스템에 맞춘 UI 라이브러리
+
+## Tech Stack
+- tailwindcss 3.4.1
+- React 18
+- Vite 5
+
+## Getting Start
+```bash
+# 설치
+npm install @edu-tosel/ui@latest
+
+# 개발환경
+npm install # 의존성 설치
+npm run dev # 개발자 환경에서 실행
+npm run test # jest 실행
+npm run build # 빌드
+npm run publish # npm 배포
+```
+
+## Folder Structure
+### asset
+tailwindcss를 조합한 커스텀 클래스 보관
+
+### board
+### card
+### deck
+### header
+### modal
+### navigation
+### text
 문자열 조작 컴포넌트 보관

package/board/index.d.ts

@@ -1,19 +1,19 @@
-/// <reference types="react" />
-import "../style.css";
-export declare function CanvasBoard({ children, options, }: {
-    children: React.ReactNode;
-    options?: {
-        height?: number;
-    };
-}): import("react/jsx-runtime").JSX.Element;
-export declare function ListBoard({ children, header, options, }: {
-    children: React.ReactNode;
-    header: {
-        title: string;
-        colors?: [string, string];
-        childrens?: React.ReactNode[];
-    };
-    options?: {
-        height?: number;
-    };
-}): import("react/jsx-runtime").JSX.Element;
+/// <reference types="react" />
+import "../globals.css";
+export declare function CanvasBoard({ children, options, }: {
+    children: React.ReactNode;
+    options?: {
+        height?: number;
+    };
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ListBoard({ children, header, options, }: {
+    children: React.ReactNode;
+    header: {
+        title: string;
+        colors?: [string, string];
+        childrens?: React.ReactNode[];
+    };
+    options?: {
+        height?: number;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/board/index.js

@@ -1,47 +1,34 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "../style.css";
-import { center, between } from "../util";
-function Header(_a) {
-    var title = _a.title, colors = _a.colors, childrens = _a.childrens;
-    var _b = colors !== null && colors !== void 0 ? colors : ["bg", "text"], bgColor = _b[0], textColor = _b[1];
-    var headerClassNames = [
-        center.row + between.row,
-        "bg-".concat(bgColor || "white-off"),
-        "text-".concat(textColor || "black"),
-        "w-full h-22 px-12",
-    ].join(" ");
-    return (_jsxs("div", __assign({ className: headerClassNames }, { children: [_jsx("div", __assign({ className: "text-xl font-bold" }, { children: title })), _jsx("div", __assign({ className: "flex" }, { children: childrens === null || childrens === void 0 ? void 0 : childrens.map(function (children) { return children; }) }))] })));
-}
-function Board(_a) {
-    var children = _a.children, header = _a.header, options = _a.options;
-    var height = (options !== null && options !== void 0 ? options : {}).height;
-    var classNames = [
-        "h-".concat(height !== null && height !== void 0 ? height : 186, " ").concat(header ? "" : "pt-8"),
-        "rounded-xl bg-white/80 overflow-hidden relative w-full",
-    ].join(" ");
-    return (_jsxs("div", __assign({ className: classNames }, { children: [header ? _jsx(Header, __assign({}, header)) : null, _jsx("div", __assign({ className: "h-full" }, { children: children }))] })));
-}
-export function CanvasBoard(_a) {
-    var children = _a.children, options = _a.options;
-    var height = (options !== null && options !== void 0 ? options : {}).height;
-    var classNames = ["px-12"].join(" ");
-    return (_jsx(Board, __assign({ options: { height: height } }, { children: _jsx("div", __assign({ className: classNames }, { children: children })) })));
-}
-export function ListBoard(_a) {
-    var children = _a.children, header = _a.header, options = _a.options;
-    var title = header.title, colors = header.colors, childrens = header.childrens;
-    var height = (options !== null && options !== void 0 ? options : {}).height;
-    var classNames = ["scrollbar pt-8 px-12 overflow-y-scroll h-full pb-32"].join(" ");
-    return (_jsx(Board, __assign({ header: { title: title, colors: colors, childrens: childrens }, options: { height: height } }, { children: _jsx("div", __assign({ className: classNames }, { children: children })) })));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../globals.css";
+import { center, between } from "../util";
+function Header({ title, colors, childrens, }) {
+    const [bgColor, textColor] = colors ?? ["bg", "text"];
+    const headerClassNames = [
+        center.row + between.row,
+        `bg-${bgColor || "white-off"}`,
+        `text-${textColor || "black"}`,
+        "w-full h-22 px-12",
+    ].join(" ");
+    return (_jsxs("div", { className: headerClassNames, children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsx("div", { className: "flex", children: childrens?.map((children) => children) })] }));
+}
+function Board({ children, header, options, }) {
+    const { height } = options ?? {};
+    const classNames = [
+        `h-${height ?? 186} ${header ? "" : "pt-8"}`,
+        "rounded-xl bg-white/80 overflow-hidden relative w-full",
+    ].join(" ");
+    return (_jsxs("div", { className: classNames, children: [header ? _jsx(Header, { ...header }) : null, _jsx("div", { className: "h-full", children: children })] }));
+}
+export function CanvasBoard({ children, options, }) {
+    const { height } = options ?? {};
+    const classNames = ["px-12"].join(" ");
+    return (_jsx(Board, { options: { height }, children: _jsx("div", { className: classNames, children: children }) }));
+}
+export function ListBoard({ children, header, options, }) {
+    const { title, colors, childrens } = header;
+    const { height } = options ?? {};
+    const classNames = [
+        "scrollbar pt-8 px-12 overflow-y-scroll h-full pb-32",
+    ].join(" ");
+    return (_jsx(Board, { header: { title, colors, childrens }, options: { height }, children: _jsx("div", { className: classNames, children: children }) }));
+}

package/card/Card.d.ts

@@ -1,14 +1,14 @@
-/// <reference types="react" />
-import "../style.css";
-export declare function Card<T extends string | number>({ children, header, options, }: {
-    children: React.ReactNode;
-    header?: {
-        title: string;
-        bgColor?: string;
-        childrens?: React.ReactNode[];
-    };
-    options?: {
-        height?: number;
-        width?: T;
-    };
-}): import("react/jsx-runtime").JSX.Element;
+/// <reference types="react" />
+import "../globals.css";
+export declare function Card<T extends string | number>({ children, header, options, }: {
+    children: React.ReactNode;
+    header?: {
+        title: string;
+        bgColor?: string;
+        childrens?: React.ReactNode[];
+    };
+    options?: {
+        height?: number;
+        width?: T;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/card/Card.js

@@ -1,32 +1,19 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "../style.css";
-import { center, between } from "../util";
-function Header(_a) {
-    var title = _a.title, bgColor = _a.bgColor, childrens = _a.childrens;
-    var headerClassNames = [
-        center.row + between.row,
-        "".concat(bgColor || "bg-white-off"),
-        "w-full h-12 px-12",
-    ].join(" ");
-    return (_jsxs("div", __assign({ className: headerClassNames }, { children: [_jsx("div", __assign({ className: "text-xl font-bold" }, { children: title })), _jsx("div", __assign({ className: "flex" }, { children: childrens === null || childrens === void 0 ? void 0 : childrens.map(function (children) { return children; }) }))] })));
-}
-export function Card(_a) {
-    var children = _a.children, header = _a.header, options = _a.options;
-    var _b = options !== null && options !== void 0 ? options : {}, height = _b.height, width = _b.width;
-    var classNames = [
-        "h-".concat(height !== null && height !== void 0 ? height : 48, " w-").concat(width !== null && width !== void 0 ? width : "full", " p-4 max-w-232 "),
-        "rounded-xl bg-white/80 overflow-hidden relative box-shadow duration-500",
-    ].join(" ");
-    return (_jsxs("div", __assign({ className: classNames }, { children: [header ? _jsx(Header, __assign({}, header)) : null, _jsx("div", __assign({ className: "h-full" }, { children: children }))] })));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../globals.css";
+import { center, between } from "../util";
+function Header({ title, bgColor, childrens, }) {
+    const headerClassNames = [
+        center.row + between.row,
+        `${bgColor || "bg-white-off"}`,
+        "w-full h-12 px-12",
+    ].join(" ");
+    return (_jsxs("div", { className: headerClassNames, children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsx("div", { className: "flex", children: childrens?.map((children) => children) })] }));
+}
+export function Card({ children, header, options, }) {
+    const { height, width } = options ?? {};
+    const classNames = [
+        `h-${height ?? 48} w-${width ?? "full"} p-4 max-w-232 `,
+        "rounded-xl bg-white/80 overflow-hidden relative box-shadow duration-500",
+    ].join(" ");
+    return (_jsxs("div", { className: classNames, children: [header ? _jsx(Header, { ...header }) : null, _jsx("div", { className: "h-full", children: children })] }));
+}

package/card/ProfileCard.d.ts

@@ -1,14 +1,14 @@
-type Level = "PS" | "ST" | "BA" | "JR" | "HJ";
-export declare function ProfileCard<T extends string | number>({ info, gradeData, }: {
-    info: {
-        name: string;
-        birthday: string;
-        image?: string;
-    };
-    gradeData?: {
-        level?: Level;
-        score?: number;
-        grade?: number;
-    };
-}): import("react/jsx-runtime").JSX.Element;
-export {};
+type Level = "PS" | "ST" | "BA" | "JR" | "HJ";
+export declare function ProfileCard({ info, gradeData, }: {
+    info: {
+        name: string;
+        birthday: string;
+        image?: string;
+    };
+    gradeData?: {
+        level?: Level;
+        score?: number;
+        grade?: number;
+    };
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/card/ProfileCard.js

@@ -1,20 +1,8 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card } from "./Card";
-import { colorsByLevel } from "../util";
-export function ProfileCard(_a) {
-    var info = _a.info, gradeData = _a.gradeData;
-    var name = info.name, birthday = info.birthday, image = info.image;
-    var _b = gradeData !== null && gradeData !== void 0 ? gradeData : {}, level = _b.level, score = _b.score, grade = _b.grade;
-    return (_jsx(Card, __assign({ options: { width: 84 } }, { children: _jsxs("div", __assign({ className: "flex" }, { children: [_jsx("img", { src: image, alt: "profile", className: "h-20 w-20 overflow-hidden rounded-full object-cover " }), _jsxs("div", __assign({ className: "ml-auto flex flex-col gap-4" }, { children: [_jsxs("div", __assign({ className: "flex w-52 items-end gap-2 border-b-2 border-blue-navy pb-2" }, { children: [_jsx("div", __assign({ className: "text-xl font-bold" }, { children: name })), _jsx("div", { children: birthday })] })), _jsxs("div", { children: [_jsx("div", { children: "\uD559\uC6D0\uC0DD" }), _jsx("div", { children: level ? colorsByLevel[level] : "" })] })] }))] })) })));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from "./Card";
+import { colorsByLevel } from "../util";
+export function ProfileCard({ info, gradeData, }) {
+    const { name, birthday, image } = info;
+    const { level, score, grade } = gradeData ?? {};
+    return (_jsx(Card, { options: { width: 84 }, children: _jsxs("div", { className: "flex", children: [_jsx("img", { src: image, alt: "profile", className: "h-20 w-20 overflow-hidden rounded-full object-cover " }), _jsxs("div", { className: "ml-auto flex flex-col gap-4", children: [_jsxs("div", { className: "flex w-52 items-end gap-2 border-b-2 border-blue-navy pb-2", children: [_jsx("div", { className: "text-xl font-bold", children: name }), _jsx("div", { children: birthday })] }), _jsxs("div", { children: [_jsx("div", { children: "\uD559\uC6D0\uC0DD" }), _jsx("div", { children: level ? colorsByLevel[level] : "" })] })] })] }) }));
+}

package/card/index.d.ts

@@ -1 +1 @@
-export * from "./ProfileCard";
+export * from "./ProfileCard";

package/card/index.js

@@ -1 +1 @@
-export * from "./ProfileCard";
+export * from "./ProfileCard";

package/deck/index.d.ts

@@ -1,18 +1,18 @@
-/// <reference types="react" />
-import "../style.css";
-export declare function Deck<T extends string | number>({ children, titles, options, }: {
-    children: React.ReactNode;
-    titles?: {
-        title: string;
-        subTitle?: string;
-        gapTitle?: number;
-    };
-    options?: {
-        direction?: "row" | "col" | "wrap";
-        justify?: "start" | "end" | "center" | "between" | "around" | "evenly";
-        width?: T;
-        height?: number;
-        gapX?: number;
-        gapY?: number;
-    };
-}): import("react/jsx-runtime").JSX.Element;
+/// <reference types="react" />
+import "../globals.css";
+export declare function Deck<T extends string | number>({ children, titles, options, }: {
+    children: React.ReactNode;
+    titles?: {
+        title: string;
+        subTitle?: string;
+        gapTitle?: number;
+    };
+    options?: {
+        direction?: "row" | "col" | "wrap";
+        justify?: "start" | "end" | "center" | "between" | "around" | "evenly";
+        width?: T;
+        height?: number;
+        gapX?: number;
+        gapY?: number;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/deck/index.js

@@ -1,28 +1,16 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "../style.css";
-export function Deck(_a) {
-    var children = _a.children, titles = _a.titles, options = _a.options;
-    var _b = titles !== null && titles !== void 0 ? titles : {}, title = _b.title, subTitle = _b.subTitle, gapTitle = _b.gapTitle;
-    var _c = options !== null && options !== void 0 ? options : {}, direction = _c.direction, height = _c.height, width = _c.width, gapX = _c.gapX, gapY = _c.gapY, justify = _c.justify;
-    var classNames = [
-        "flex flex-col",
-        "h-".concat(height !== null && height !== void 0 ? height : "auto", " w-").concat(width !== null && width !== void 0 ? width : "full", " gap-").concat(gapTitle !== null && gapTitle !== void 0 ? gapTitle : 4, " "),
-    ].join(" ");
-    var bodyClassNames = [
-        "flex-".concat(direction !== null && direction !== void 0 ? direction : "row", " justify-").concat(justify !== null && justify !== void 0 ? justify : "start"),
-        "gap-x-".concat(gapX !== null && gapX !== void 0 ? gapX : 5, " gap-y-").concat(gapY !== null && gapY !== void 0 ? gapY : 5),
-        "flex w-full duration-500",
-    ].join(" ");
-    return (_jsxs("div", __assign({ className: classNames }, { children: [_jsxs("div", __assign({ className: "pl-1" }, { children: [_jsx("div", __assign({ className: "text-2xl font-bold" }, { children: title })), _jsx("div", __assign({ className: "" }, { children: subTitle }))] })), _jsx("div", __assign({ className: bodyClassNames }, { children: children }))] })));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../globals.css";
+export function Deck({ children, titles, options, }) {
+    const { title, subTitle, gapTitle } = titles ?? {};
+    const { direction, height, width, gapX, gapY, justify } = options ?? {};
+    const classNames = [
+        "flex flex-col",
+        `h-${height ?? "auto"} w-${width ?? "full"} gap-${gapTitle ?? 4} `,
+    ].join(" ");
+    const bodyClassNames = [
+        `flex-${direction ?? "row"} justify-${justify ?? "start"}`,
+        `gap-x-${gapX ?? 5} gap-y-${gapY ?? 5}`,
+        "flex w-full duration-500",
+    ].join(" ");
+    return (_jsxs("div", { className: classNames, children: [_jsxs("div", { className: "pl-1", children: [_jsx("div", { className: "text-2xl font-bold", children: title }), _jsx("div", { className: "", children: subTitle })] }), _jsx("div", { className: bodyClassNames, children: children })] }));
+}

package/{style.css → globals.css}

@@ -1,41 +1,40 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@font-face {
-  font-family: "Pretendard-Medium";
-  src: url("../public/fonts/Pretendard-Medium.otf") format("opentype");
-}
-
-@font-face{
-  font-family: "Kostar";
-  src: url("../public/fonts/Kostar.ttf") format("truetype");  
-}
-
-@font-face{
-  font-family: "NicoMoji";
-  src: url("../public/fonts/NicoMoji.ttf") format("truetype");
-}
-
-@font-face{
-  font-family: "Megrim";
-  src: url("../public/fonts/Megrim.ttf") format("trueType");
-}
-
-::-webkit-scrollbar {
-  width: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background-color: #173a8b;
-  opacity: 0.5;
-  border-radius: 10px;
-}
-
-
-.box-shadow {
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: "Pretendard-Medium";
+  src: url("/fonts/Pretendard-Medium.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Kostar";
+  src: url("/fonts/Kostar.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "NicoMoji";
+  src: url("/fonts/NicoMoji.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Megrim";
+  src: url("/fonts/Megrim.ttf") format("trueType");
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background-color: #173a8b;
+  opacity: 0.5;
+  border-radius: 10px;
+}
+
+.box-shadow {
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
+}

package/header/index.d.ts

@@ -1,5 +1 @@
-import "../style.css";
-export declare function DashboardHeader({ title, image }: {
-    title: string;
-    image?: [string, string];
-}): import("react/jsx-runtime").JSX.Element;
+import "../globals.css";

package/header/index.js

@@ -1,25 +1 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "../style.css";
-import { useState } from "react";
-import { circle } from "../util";
-function Menu() {
-    var classNames = ["absolute -left-24 z-40 h-80 w-48 border-2 bg-white "].join(" ");
-    return (_jsxs("div", __assign({ className: classNames + " fade-in-100 animate-in" }, { children: [_jsx("div", { children: "\u314E\u3147" }), _jsx("div", { children: "\u314E\u3147" })] })));
-}
-export function DashboardHeader(_a) {
-    var title = _a.title, image = _a.image;
-    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
-    var _c = image !== null && image !== void 0 ? image : [], src = _c[0], href = _c[1];
-    return (_jsxs("div", __assign({ className: "relative flex h-20 w-full items-center justify-between bg-white px-19 shadow-black/10 shadow-b-md" }, { children: [_jsxs("div", __assign({ className: "flex h-12 items-center gap-9" }, { children: [src && href ? (_jsx("a", __assign({ href: href }, { children: _jsx("img", { src: src, alt: "logo", className: "h-12" }) }))) : (_jsx("div", { children: "TOSEL Lab" })), _jsx("div", __assign({ className: "text-3xl font-bold" }, { children: title }))] })), _jsxs("div", __assign({ className: "relative" }, { children: [_jsx("button", __assign({ onClick: function () { return setIsOpen(!isOpen); }, className: circle(9) + "border-2" }, { children: "+" })), isOpen ? _jsx(Menu, {}) : null] }))] })));
-}
+import "../globals.css";

package/layout/dashboard/Header.d.ts

@@ -0,0 +1,5 @@
+import "../../globals.css";
+export declare function Header({ title, image, }: {
+    title: string;
+    image?: [string, string];
+}): import("react/jsx-runtime").JSX.Element;

package/layout/dashboard/Header.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../../globals.css";
+import { useState } from "react";
+import { circle } from "../../util";
+export function Header({ title, image, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [src, href] = image ?? [];
+    return (_jsxs("div", { className: "relative flex h-20 w-full items-center justify-between bg-white px-19 shadow-black/10 shadow-b-md", children: [_jsxs("div", { className: "flex h-12 items-center gap-9", children: [src && href ? (_jsx("a", { href: href, children: _jsx("img", { src: src, alt: "logo", className: "h-12" }) })) : (_jsx("div", { children: "TOSEL Lab" })), _jsx("div", { className: "text-3xl font-bold", children: title })] }), _jsxs("div", { className: "relative", children: [_jsx("button", { onClick: () => setIsOpen(!isOpen), className: circle(9) + "border-2", children: "+" }), isOpen ? _jsx(Menu, {}) : null] })] }));
+}
+function Menu() {
+    const classNames = [
+        "absolute -left-24 z-40 h-80 w-48 border-2 bg-white ",
+    ].join(" ");
+    return (_jsxs("div", { className: classNames + " fade-in-100 animate-in", children: [_jsx("div", { children: "\u314E\u3147" }), _jsx("div", { children: "\u314E\u3147" })] }));
+}

package/layout/dashboard/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function DashboardLayout({ navigations, children, }: {
+    navigations: React.ReactNode[];
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/layout/dashboard/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { NavigationContainer } from "../../navigation";
+import { gradient } from "../../util";
+import { Header } from "./Header";
+export function DashboardLayout({ navigations, children, }) {
+    return (_jsxs("div", { className: gradient.lab + "min-h-screen font-pretendard-medium", children: [_jsx(Header, { title: "dashboard", image: ["/images/tosel-blue-lab-spiral.png", "https://lab.tosel.co.kr"] }), _jsxs("div", { className: "flex gap-12 px-9 pt-16", children: [_jsx(NavigationContainer, { children: navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index))) }), children] })] }));
+}

package/layout/index.d.ts

@@ -0,0 +1 @@
+export * from "./dashboard";

package/layout/index.js

@@ -0,0 +1 @@
+export * from "./dashboard";

package/modal/index.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-import "../style.css";
-export declare function NoticeModal({ titles, children, buttons, close, }: {
-    titles?: string[];
-    children: React.ReactNode;
-    buttons?: [string, () => unknown | (() => Promise<unknown>)][];
-    close?: () => void;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function AlertModal(): import("react/jsx-runtime").JSX.Element;
+/// <reference types="react" />
+import "../globals.css";
+export declare function NoticeModal({ titles, children, buttons, close, }: {
+    titles?: string[];
+    children: React.ReactNode;
+    buttons?: [string, () => unknown | (() => Promise<unknown>)][];
+    close?: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function AlertModal(): import("react/jsx-runtime").JSX.Element;