@edu-tosel/design 0.1.5 → 0.1.7

package/board/Board.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare function Board({ children, options, }: {
+    children: React.ReactNode;
+    options: {
+        height?: number;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/board/Board.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Board({ children, options, }) {
+    const { height } = options ?? {};
+    const classNames = [
+        `min-h-screen xl:min-h-0 xl:h-186 `,
+        "xl:rounded-xl bg-white/80 relative w-full ",
+    ].join(" ");
+    return _jsx("div", { className: classNames + "", children: children });
+}

package/board/CanvasBoard.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare function CanvasBoard({ children, options, }: {
+    children: React.ReactNode;
+    options?: {
+        height?: number;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/board/CanvasBoard.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../util";
+import { Board } from "./Board";
+export function CanvasBoard({ children, options, }) {
+    const { height } = options ?? {};
+    const layouts = "flex flex-wrap gap-12 ";
+    const sizes = "h-full ";
+    const paddings = "pb-36 xl:pb-12 px-2 xs:px-4 xl:pl-10 xl:pr-2 pt-2 xs:pt-4 xl:pt-8";
+    const styles = "xl:overflow-y-scroll ";
+    return (_jsx(Board, { options: { height }, children: _jsx("div", { className: cn(layouts, sizes, paddings, styles), children: children }) }));
+}

package/board/Header.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function Header({ title, colors, childrens, }: {
+    title: string;
+    colors?: [string, string];
+    childrens?: React.ReactNode[];
+}): import("react/jsx-runtime").JSX.Element;

package/board/Header.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { between, center } from "../util";
+export 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) })] }));
+}

package/board/ListBoard.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare function ListBoard({ children, options, }: {
+    children: React.ReactNode;
+    options?: {
+        height?: number;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/board/ListBoard.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Board } from "./Board";
+export function ListBoard({ children, options, }) {
+    const { height } = options ?? {};
+    const classNames = ["pt-8 px-12 overflow-y-scroll h-full pb-32"].join(" ");
+    return (_jsx(Board, { options: { height }, children: _jsx("div", { className: classNames, children: children }) }));
+}

package/board/index.d.ts

@@ -1,19 +1,3 @@
-/// <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;
+export * from "./CanvasBoard";
+export * from "./ListBoard";

package/board/index.js

@@ -1,34 +1,3 @@
-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 }) }));
-}
+export * from "./CanvasBoard";
+export * from "./ListBoard";

package/card/Card.d.ts

@@ -1,14 +1,15 @@
 /// <reference types="react" />
 import "../globals.css";
-export declare function Card<T extends string | number>({ children, header, options, }: {
+export type Size = "small" | "medium" | "large" | "xLarge";
+export declare function Card({ children, options, }: {
     children: React.ReactNode;
-    header?: {
-        title: string;
-        bgColor?: string;
-        childrens?: React.ReactNode[];
-    };
     options?: {
-        height?: number;
-        width?: T;
+        height?: Size;
+        width?: Size;
+        text?: {
+            size?: string;
+            color?: string;
+        };
+        onClick?: () => unknown | (() => Promise<unknown>);
     };
 }): import("react/jsx-runtime").JSX.Element;

package/card/Card.js

@@ -1,19 +1,30 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } 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",
+import { cn } from "../util";
+const widthSize = {
+    small: "md:w-60",
+    medium: "md:w-90",
+    large: "md:w-135",
+    xLarge: "md:w-225",
+};
+const heightSize = {
+    small: "h-72 sm:h-48",
+    medium: "h-72 sm:h-48",
+    large: "h-80",
+    xLarge: "h-80",
+};
+export function Card({ children, options, }) {
+    const { height, width, text, onClick } = options ?? {};
+    const { size: textSize, color: textColor } = text ?? {};
+    const sizes = [
+        `${heightSize[height ?? "small"]}`,
+        `w-full ${widthSize[width ?? "small"]}`,
     ].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",
+    const positions = "relative";
+    const styles = [
+        `${onClick ? "cursor-pointer" : ""}`,
+        `text-${textSize ?? "base"}`,
+        `rounded-xl bg-white/80 overflow-hidden box-shadow duration-500`,
     ].join(" ");
-    return (_jsxs("div", { className: classNames, children: [header ? _jsx(Header, { ...header }) : null, _jsx("div", { className: "h-full", children: children })] }));
+    return (_jsx("div", { onClick: onClick, className: cn(sizes, positions, styles), children: children }));
 }

package/card/ChartCard.d.ts

@@ -0,0 +1,20 @@
+import "../globals.css";
+interface ChartCardProps {
+    data: Record<string, string | number>[];
+    xAxis: string;
+    yAxis: string;
+    lines?: {
+        dataKey: string;
+        stroke: string;
+    }[];
+    bars?: {
+        dataKey: string;
+        fill: string;
+    }[];
+    areas?: {
+        dataKey: string;
+        fill: string;
+    }[];
+}
+export declare function ChartCard({ data, xAxis, yAxis, lines, bars, areas, }: ChartCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/card/ChartCard.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../globals.css";
+import { Area, Bar, ComposedChart, Line, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
+import { Card } from "./Card";
+export function ChartCard({ data, xAxis, yAxis, lines, bars, areas, }) {
+    return (_jsx(Card, { options: { width: "xLarge", height: "large", text: { size: "xs" } }, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(ComposedChart, { data: data, children: [_jsx(XAxis, { dataKey: xAxis }), _jsx(YAxis, { dataKey: yAxis }), _jsx(Tooltip, {}), lines?.map((line) => (_jsx(Line, { ...line }, line.dataKey))), bars?.map((bar) => (_jsx(Bar, { ...bar }, bar.dataKey))), areas?.map((area) => (_jsx(Area, { ...area }, area.dataKey)))] }) }) }));
+}

package/card/ProfileCard.js

@@ -4,5 +4,5 @@ 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] : "" })] })] })] }) }));
+    return (_jsx(Card, { options: { width: "small" }, 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/TableCard.d.ts

@@ -0,0 +1,12 @@
+import "../globals.css";
+export declare function TableCard({ data, fields, sizes, options, }: {
+    data: Record<string, string | number>[];
+    fields: Record<string, string>;
+    sizes: Record<string, string>;
+    options?: {
+        color?: {
+            background: string;
+            text: string;
+        };
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/card/TableCard.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../globals.css";
+import { Card } from "./Card";
+export function TableCard({ data, fields, sizes, options, }) {
+    const { color } = options ?? {};
+    const { background: bgColor, text: textColor } = color ?? {};
+    const keys = Object.keys(fields);
+    const fieldsClassNames = [
+        `flex h-11 items-center  font-bold pl-4`,
+        `bg-${bgColor ?? "gray-300"} text-${textColor ?? "black"}`,
+    ].join(" ");
+    return (_jsx(Card, { options: { width: "large", height: "large" }, children: _jsxs("div", { className: "overflow-hidden text-xs xs:text-sm sm:text-base", children: [_jsx("div", { className: fieldsClassNames, children: keys.map((key) => (_jsx("div", { className: `w-${sizes[key]}`, children: fields[key] }, key))) }), data.map((row, index) => (_jsx("div", { className: "flex items-center pl-4 h-11 ", children: keys.map((key) => (_jsx("div", { className: `truncate w-${sizes[key] ?? "auto"}`, children: row[key] }, key))) }, index)))] }) }));
+}

package/card/TrumpCard.d.ts

@@ -0,0 +1,19 @@
+import { Size } from "./Card";
+type ImageSize = "sub" | "full";
+export declare function TrumpCard({ titles, options, }: {
+    titles: {
+        title: string;
+        subTitle?: string[];
+        color?: string;
+    };
+    options?: {
+        width?: Size;
+        image?: {
+            path: string;
+            size?: ImageSize;
+        };
+        onClick?: () => unknown | (() => Promise<unknown>);
+        subButton?: [string, string, () => unknown | (() => Promise<unknown>)];
+    };
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/card/TrumpCard.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LineBreaks } from "../text";
+import { Card } from "./Card";
+export function TrumpCard({ titles, options, }) {
+    const { title, subTitle, color: titleColor } = titles;
+    const { onClick, width, image, subButton } = options ?? {};
+    const [buttonText, buttonBgColor, buttonAction] = subButton ?? [
+        null,
+        "red-crimson",
+        () => { },
+    ];
+    const { path, size } = image ?? { size: "sub" };
+    const imageClassNames = () => {
+        if (size === "full")
+            return "w-full h-full object-cover";
+        return "absolute bottom-0 right-0 w-full xs:w-auto max-w-120 z-0 max-h-44 object-contain";
+    };
+    return (_jsxs(Card, { options: { width: width, onClick: onClick }, children: [_jsxs("div", { className: `absolute top-8 left-8 w-48 flex flex-col gap-2 z-10 text-${titleColor}`, children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsx(LineBreaks, { gap: 0, texts: subTitle ?? [""] }), subButton ? (_jsx("button", { className: `text-white rounded-md bg-${buttonBgColor} w-45 h-11 flex justify-center items-center`, onClick: buttonAction, children: buttonText })) : null] }), path ? (_jsx("img", { src: path, alt: "trump-image", loading: "lazy", className: imageClassNames() })) : null] }));
+}

package/card/index.d.ts

@@ -1 +1,4 @@
 export * from "./ProfileCard";
+export * from "./TrumpCard";
+export * from "./ChartCard";
+export * from "./TableCard";

package/card/index.js

@@ -1 +1,4 @@
 export * from "./ProfileCard";
+export * from "./TrumpCard";
+export * from "./ChartCard";
+export * from "./TableCard";

package/deck/Deck.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare function Deck<T extends string | number>({ children, titles, options, }: {
+    children: React.ReactNode;
+    titles?: {
+        title: string;
+        subTitle?: string;
+        gapTitle?: number;
+    };
+    options?: {
+        width?: T;
+        height?: number;
+        gapX?: number;
+        gapY?: number;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/deck/Deck.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Deck({ children, titles, options, }) {
+    const { title, subTitle, gapTitle } = titles ?? {};
+    const { height, gapX, gapY } = options ?? {};
+    const containerClassNames = [
+        `flex flex-col h-${height ?? "auto"} gap-${gapTitle ?? 4} `,
+    ].join(" ");
+    const bodyClassNames = [
+        `flex flex-col sm:flex-row `,
+        `gap-x-${gapX ?? 5} gap-y-${gapY ?? 5}`,
+        "duration-500",
+    ].join(" ");
+    return (_jsxs("div", { className: containerClassNames, children: [_jsxs("div", { className: "pl-1", children: [_jsx("div", { className: "text-xl xl:text-2xl font-bold", children: title }), _jsx("div", { className: "", children: subTitle })] }), _jsx("div", { className: bodyClassNames, children: children })] }));
+}

package/deck/index.d.ts

@@ -1,18 +1 @@
-/// <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;
+export * from "./Deck";

package/deck/index.js

@@ -1,16 +1 @@
-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 })] }));
-}
+export * from "./Deck";

package/index.d.ts

@@ -0,0 +1,9 @@
+import "./globals.css";
+export * from "./board";
+export * from "./card";
+export * from "./deck";
+export * from "./layout";
+export * from "./modal";
+export * from "./navigation";
+export * from "./shelf";
+export * from "./text";

package/index.js

@@ -0,0 +1,9 @@
+import "./globals.css";
+export * from "./board";
+export * from "./card";
+export * from "./deck";
+export * from "./layout";
+export * from "./modal";
+export * from "./navigation";
+export * from "./shelf";
+export * from "./text";

package/layout/dashboard/Header.js

@@ -1,15 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "../../globals.css";
 import { useState } from "react";
-import { circle } from "../../util";
+import { cn } 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] })] }));
+    return (_jsx("div", { className: "fixed top-0 left-0 xl:relative flex h-20 w-full items-center justify-between bg-white px-9 shadow-black/10 shadow-b-md z-40", children: _jsxs("div", { className: "flex h-12 items-center gap-12", children: [src && href ? (_jsx("a", { href: href, children: _jsx("img", { src: src, alt: "logo", className: "h-12 w-50" }) })) : (_jsx("div", { className: "text-2xl", children: "TOSEL" })), _jsx("div", { className: "text-3xl font-bold ", children: title })] }) }));
 }
-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" })] }));
+function Menu({ flag }) {
+    const positions = "absolute right-0 z-40 ";
+    const layouts = "w-48 overflow-hidden";
+    const styles = "shadow-md bg-white";
+    const animations = () => {
+        const height = flag ? "h-80" : "h-0";
+        return [height, "duration-500"].join(" ");
+    };
+    return (_jsxs("div", { className: cn(positions, layouts, styles, animations()), children: [_jsx("div", { children: "\u314E\u3147" }), _jsx("div", { children: "\u314E\u3147" })] }));
 }

package/layout/dashboard/index.d.ts

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

package/layout/dashboard/index.js

@@ -1,8 +1,10 @@
 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] })] }));
+import { cn } from "../../util";
+export function DashboardLayout({ subject, colors, navigations, children, }) {
+    const [title, image, imageUrl] = subject ?? ["", "", ""];
+    const [bgColor, textColor] = colors ?? ["white", "black"];
+    return (_jsxs("div", { className: cn(`bg-${bgColor}`, `text-${textColor}`, `min-h-screen font-pretendard-medium`), children: [_jsx(Header, { title: title, image: [image, imageUrl] }), _jsxs("div", { className: "flex gap-12  xl:px-9 xl:pt-12 mt-20 xl:m-0", children: [_jsx(NavigationContainer, { children: navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index))) }), children] })] }));
 }

package/modal/Modal.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+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;

package/modal/Modal.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { col, absolute } from "../util";
+function Modal({ children }) {
+    const classNames = [
+        "z-50 flex min-h-screen w-full items-center justify-center bg-black/10 backdrop-blur-sm fixed top-0 left-0",
+    ].join(" ");
+    const modalClassNames = [
+        "h-100 w-2/3 min-w-76 max-w-176 rounded-xl bg-white relative",
+    ].join(" ");
+    return (_jsx("div", { className: classNames, children: _jsx("div", { className: modalClassNames, children: children }) }));
+}
+export function NoticeModal({ titles, children, buttons, close, }) {
+    const [title, subTitle] = titles || ["", ""];
+    const buttonClassNames = [
+        "rounded-2xl bg-black px-8 py-2 text-lg font-bold text-white",
+    ].join(" ");
+    return (_jsxs(Modal, { children: [_jsxs("div", { className: col(3) + "px-25 pt-18 h-full pb-12", children: [_jsxs("div", { className: col(6), children: [_jsx("div", { className: "text-3xl font-bold", children: title }), _jsx("div", { className: "h-2 w-14 rounded-full bg-pale-lavender" }), _jsx("div", { className: "text-xl font-bold", children: subTitle })] }), _jsx("div", { children: children }), buttons ? (_jsx("div", { className: "mt-auto flex justify-end gap-4", children: buttons.map(([text, onClick]) => (_jsx("button", { className: buttonClassNames, onClick: onClick, children: text }, text))) })) : null] }), _jsx("button", { className: absolute.tl(5, 7) + "bg-black rounded-full h-9 w-9", onClick: close })] }));
+}
+export function AlertModal() {
+    return (_jsx("div", { children: _jsx("div", {}) }));
+}

package/modal/index.d.ts

@@ -1,9 +1 @@
-/// <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;
+export * from "./Modal";

package/modal/index.js

@@ -1,23 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "../globals.css";
-import { col, absolute } from "../util";
-function Modal({ children }) {
-    const classNames = [
-        absolute.tl() +
-            "z-50 flex min-h-screen w-full items-center justify-center bg-black/10 backdrop-blur-sm",
-    ].join(" ");
-    const modalClassNames = [
-        "h-100 w-2/3 min-w-76 max-w-176 rounded-xl bg-white relative",
-    ].join(" ");
-    return (_jsx("div", { className: classNames, children: _jsx("div", { className: modalClassNames, children: children }) }));
-}
-export function NoticeModal({ titles, children, buttons, close, }) {
-    const [title, subTitle] = titles || ["", ""];
-    const buttonClassNames = [
-        "rounded-2xl bg-black px-8 py-2 text-lg font-bold text-white",
-    ].join(" ");
-    return (_jsxs(Modal, { children: [_jsxs("div", { className: col(3) + "px-25 pt-18 h-full pb-12", children: [_jsxs("div", { className: col(6), children: [_jsx("div", { className: "text-3xl font-bold", children: title }), _jsx("div", { className: "h-2 w-14 rounded-full bg-pale-lavender" }), _jsx("div", { className: "text-xl font-bold", children: subTitle })] }), _jsx("div", { children: children }), buttons ? (_jsx("div", { className: "mt-auto flex justify-end gap-4", children: buttons.map(([text, onClick]) => (_jsx("button", { className: buttonClassNames, onClick: onClick, children: text }, text))) })) : null] }), _jsx("button", { className: absolute.tl(5, 7) + "bg-black rounded-full h-9 w-9", onClick: close })] }));
-}
-export function AlertModal() {
-    return (_jsx("div", { children: _jsx("div", {}) }));
-}
+export * from "./Modal";

package/navigation/Navigation.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const buttonClassNames: (href: string, nowPath: string, color?: [string, string]) => string;
+export declare function NavigationContainer({ children, }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/navigation/Navigation.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { center, cn } from "../util";
+export const buttonClassNames = (href, nowPath, color) => {
+    const [text, bg] = color ?? ["black", "white"];
+    const classNames = [
+        center.row(6),
+        `text-${text}`,
+        "font-bold w-full xl:w-50 h-11 xl:rounded-2xl flex justify-center xl:justify-start xl:pl-5",
+    ].join(" ");
+    const checkPathMatch = (href, nowPath) => {
+        if (href === "")
+            return !nowPath.slice(1).includes("/");
+        return nowPath.includes(href);
+    };
+    const toggle = checkPathMatch(href, nowPath)
+        ? `bg-${bg}`
+        : "bg-gray-500 xl:bg-transparent";
+    return [classNames, toggle].join(" ");
+};
+export function NavigationContainer({ children, }) {
+    const layouts = "flex flex-row xl:flex-col z-40";
+    const positions = "fixed bottom-0 left-0 xl:static";
+    const sizes = "w-full xl:w-auto";
+    const styles = "";
+    return (_jsx("div", { className: cn(layouts, positions, sizes, styles), children: children }));
+}

package/navigation/index.d.ts

@@ -1,6 +1 @@
-/// <reference types="react" />
-import "../globals.css";
-export declare const buttonClassNames: (href: string, nowPath: string, color?: [string, string]) => string;
-export declare function NavigationContainer({ children, }: {
-    children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+export * from "./Navigation";

package/navigation/index.js

@@ -1,16 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "../globals.css";
-import { center } from "../util";
-export const buttonClassNames = (href, nowPath, color) => {
-    const [text, bg] = color ?? ["black", "white"];
-    const classNames = [
-        center.row(6),
-        `text-${text}`,
-        "font-bold w-50 h-11 rounded-2xl pl-5",
-    ].join(" ");
-    const toggle = nowPath === href ? `bg-${bg}` : "bg-transparent";
-    return [classNames, toggle].join(" ");
-};
-export function NavigationContainer({ children, }) {
-    return _jsx("div", { className: center.col() + "w-54", children: children });
-}
+export * from "./Navigation";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",
@@ -15,6 +15,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.3",
+    "recharts": "^2.11.0",
+    "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.2.2"
   },

package/shelf/Shelf.d.ts

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

package/shelf/Shelf.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Shelf({ children }) {
+    return (_jsx("div", { className: "inline-flex flex-col gap-12 w-full xl:w-auto", children: children }));
+}

package/shelf/index.d.ts

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

package/shelf/index.js

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

package/text/LineBreaks.d.ts

@@ -0,0 +1,4 @@
+export declare function LineBreaks({ texts, gap }: {
+    texts: string[];
+    gap?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/text/LineBreaks.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { col } from "../util";
+export function LineBreaks({ texts, gap }) {
+    return (_jsx("div", { className: col(gap), children: texts.map((text, index) => (_jsx("div", { className: "leading-tight", children: text }, index))) }));
+}

package/text/index.d.ts

@@ -1,5 +1 @@
-import "../globals.css";
-export declare function LineBreaks({ texts, gap }: {
-    texts: string[];
-    gap?: number;
-}): import("react/jsx-runtime").JSX.Element;
+export * from "./LineBreaks";

package/text/index.js

@@ -1,6 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "../globals.css";
-import { col } from "../util";
-export function LineBreaks({ texts, gap }) {
-    return (_jsx("div", { className: col(gap), children: texts.map((text, index) => (_jsx("div", { children: text }, index))) }));
-}
+export * from "./LineBreaks";

package/util/colors.js

@@ -6,5 +6,5 @@ export const colorsByLevel = {
     HJ: "hj-blue",
 };
 export const gradient = {
-    lab: "bg-gradient-to-br from-violet-light/20 to-blue-sky/40 ",
+    lab: "gradient-to-br from-violet-light/20 to-blue-sky/40 ",
 };

package/version.txt

@@ -1 +1 @@
-0.1.5
+0.1.7

package/header/index.d.ts

@@ -1 +0,0 @@
-import "../globals.css";

package/header/index.js

@@ -1 +0,0 @@
-import "../globals.css";

package/tailwind.config.js

@@ -1,334 +0,0 @@
-import tailwindcss from "tailwindcss";
-// import tailwindScrollbarHide from "tailwind-scrollbar-hide";
-import tailwindcssAnimate from "tailwindcss-animate";
-// import twElements from "tw-elements/dist/plugin";
-// import tailwindcssDirectionalShadows from "tailwindcss-directional-shadows";
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    // "./node_modules/tw-elements/dist/js/**/*.js",
-    "./index.html",
-    "./src/**/*.{js,jsx,ts,tsx}",
-  ],
-  theme: {
-    extend: {
-      fontFamily: {
-        "pretendard-medium": ["pretendard-medium"],
-        kostar: ["kostar"],
-        nicomoji: ["nicomoji"],
-        megrim: ["megrim"],
-      },
-      backgroundImage: {
-        "image-space": "url('/images/home/space.png')",
-      },
-      keyframes: {
-        slideBackground: {
-          "0%, 100%": { backgroundPosition: "left center" },
-          "50%": { backgroundPosition: "right center" },
-        },
-      },
-      colors: {
-        "white-off": "#F5F5F5",
-        "red-burgundy": "#933652",
-        "red-crimson": "#760023",
-        "red-velvet": "#AC647A",
-        "green-dark": "#105652",
-        "blue-sky": "#44C5F3",
-        "blue-navy": "#173A8B",
-        "blue-pastel": "#CED6E6",
-        "violet-light": "#9979F6",
-        "gray-light": "#F0F0F0",
-        "gray-medium": "#7F7F7F",
-        "gray-dim": "#4C4C4C",
-        "silver-lavender": "#E7E9F2",
-        "silver-latte": "#FBF3E4",
-        "silver-pale": "#DFD8CA",
-
-        // Brand Colors
-        "ps-pink": "#E3006E",
-        "ps-pink-light": "#FFBADB",
-        "st-orange": "#ED6A00",
-        "st-orange-light": "#F5D2B6",
-        "ba-yellow": "#FCCE30",
-        "ba-yellow-light": "#FFEFB7",
-        "jr-blue": "#52A2DA",
-        "jr-blue-light": "#D6EEFF",
-        "hj-blue": "#385EAB",
-        "hj-blue-light": "#A8BFE5",
-      },
-      inset: {
-        "1/20": "5%",
-        "1/10": "10%",
-        "2/10": "5%",
-        "1/5": "20%",
-        "2/5": "40%",
-        "1/4": "25%",
-        "1/3": "33.3333333%",
-        "5/100": "5%",
-        "10/100": "10%",
-        "15/100": "15%",
-        "43/100": "43%",
-        "46/100": "46%",
-      },
-      width: {
-        "2/3": "66.6666667%",
-        "1/7": "14.2857143%",
-        "2/7": "28.5714286%",
-        "3/7": "42.8571429%",
-        "4/7": "57.1428571%",
-        "1/8": "12.5%",
-        "3/10": "30%",
-        "1/10": "10%",
-        "4/10": "40%",
-        "6/10": "60%",
-        "7/10": "70%",
-        "9/10": "90%",
-        "10/100": "10%",
-        "12/100": "12%",
-        "15/100": "15%",
-        "35/100": "35%",
-        "45/100": "45%",
-        "55/100": "55%",
-        "65/100": "65%",
-        "85/100": "85%",
-        176: "44rem",
-        478: "478px",
-      },
-      height: {
-        "4/7": "57.1428571%",
-        "3/7": "42.8571429%",
-        "5/12": "41.6666667%",
-        "1/10": "10%",
-        "3/10": "30%",
-        "4/10": "40%",
-        "6/10": "60%",
-        "7/10": "70%",
-        "9/10": "90%",
-      },
-      spacing: {
-        "sun-calc": "calc(50% - 6rem)",
-        1: "0.25rem",
-        7: "1.75rem",
-        11: "2.75rem",
-        12: "3rem",
-        15: "3.75rem",
-        18: "4.5rem",
-        19: "4.75rem",
-        22: "5.5rem",
-        25: "6.25rem",
-        26: "6.5rem",
-        27: "6.75rem",
-        30: "7.5rem",
-        34: "8.5rem",
-        38: "9.5rem",
-        40: "10rem",
-        42: "10.5rem",
-        49: "12.25rem",
-        50: "12.5rem",
-        52: "13rem",
-        56: "14rem",
-        62: "15.5rem",
-        64: "16rem",
-        68: "17rem",
-        69: "17.25rem",
-        70: "17.5rem",
-        72: "18rem",
-        73: "18.25rem",
-        75: "18.75rem",
-        76: "19rem",
-        78: "20rem",
-        84: "21rem",
-        85: "21.25rem",
-        88: "22rem",
-        90: "22.5rem",
-        92: "23rem",
-        96: "24rem",
-        98: "24.5rem",
-        100: "25rem",
-        104: "26rem",
-        106: "26.5rem",
-        108: "27rem",
-        110: "27.5rem",
-        112: "28rem",
-        116: "29rem",
-        120: "30rem",
-        122: "30.5rem",
-        124: "31rem",
-        126: "31.5rem",
-        128: "32rem",
-        132: "33rem",
-        136: "34rem",
-        140: "35rem",
-        144: "36rem",
-        148: "37rem",
-        160: "40rem",
-        164: "41rem",
-        168: "42rem",
-        172: "43rem",
-        176: "44rem",
-        180: "45rem",
-        182: "45.5rem",
-        186: "46.5rem",
-        200: "50rem",
-        216: "54rem",
-        220: "55rem",
-        228: "57rem",
-        232: "58rem",
-        240: "60rem",
-        248: "62rem",
-        255: "63.75rem",
-        256: "64rem",
-        260: "65rem",
-        272: "68rem",
-        280: "70rem",
-        288: "72rem",
-        300: "75rem",
-        312: "78rem",
-        320: "80rem",
-        360: "90rem",
-        386: "96.5rem",
-        480: "120rem",
-        500: "125rem",
-        520: "140rem",
-      },
-      backgroundSize: {
-        auto: "auto",
-        cover: "cover",
-        contain: "contain",
-        16: "4rem",
-        64: "16rem",
-        80: "20rem",
-        88: "22rem",
-        92: "23rem",
-        96: "24rem",
-        100: "25rem",
-        128: "32rem",
-      },
-      transitionDelay: {
-        750: "750ms",
-        900: "900ms",
-        1000: "1000ms",
-        1250: "1250ms",
-        1350: "1200ms",
-        1500: "1500ms",
-        1600: "1600ms",
-        1750: "1750ms",
-        1800: "1800ms",
-        2000: "2000ms",
-        2100: "2100ms",
-        2250: "2250ms",
-        2500: "2500ms",
-        2700: "2700ms",
-        3000: "3000ms",
-        4000: "4000ms",
-        5000: "5000ms",
-      },
-      transitionDuration: {
-        2000: "2000ms",
-        60000: "60000ms",
-        300000: "300000ms",
-      },
-      opacity: {
-        32: ".32",
-      },
-      scale: {
-        101: "1.01",
-        110: "1.1",
-        120: "1.2",
-        200: "2",
-      },
-      skew: {
-        20: "20deg",
-        30: "30deg",
-        39: "39deg",
-        45: "45deg",
-        60: "60deg",
-      },
-      brightness: {
-        10: ".1",
-        20: ".2",
-        30: ".3",
-        40: ".4",
-      },
-      screens: {
-        xxxs: "332px",
-        xxs: "393px",
-        xs: "480px",
-        sm: "640px",
-        md: "768px", // IPad Mini
-        ml: "964px", // IPad Air, IPad Pro 11.
-        lg: "1024px", // IPad Mini Horizontal Viewport
-        xl: "1280px",
-        "2xl": "1536px",
-      },
-    },
-  },
-  safelist: [
-    {
-      pattern: /overflow-*./,
-    },
-    {
-      pattern: /col-.*/,
-    },
-    {
-      pattern: /row-.*/,
-    },
-    {
-      pattern: /flex-.*/,
-    },
-    {
-      pattern: /justify-.*/,
-    },
-    {
-      pattern: /items-.*/,
-    },
-    {
-      pattern: /grid-.*/,
-    },
-    {
-      pattern: /gap-.*/,
-    },
-    {
-      pattern: /border-.*/,
-    },
-    {
-      pattern: /min-.*/,
-    },
-    { pattern: /w-.*/ },
-    { pattern: /h-.*/ },
-    {
-      pattern: /top-.*/,
-    },
-    {
-      pattern: /-top-.*/,
-    },
-    {
-      pattern: /bottom*.*/,
-    },
-    {
-      pattern: /left-.*/,
-    },
-    {
-      pattern: /right*.*/,
-    },
-    { pattern: /bg-.*/ },
-    { pattern: /text-.*/ },
-    {
-      pattern: /p-.*/,
-    },
-    {
-      pattern: /from-.*/,
-    },
-    {
-      pattern: /to-.*/,
-    },
-    {
-      pattern: /via-.*/,
-    },
-    {
-      pattern: /delay-.*/,
-    },
-  ],
-  plugins: [tailwindcss(), tailwindcssAnimate],
-};