@edu-tosel/design 0.1.5 → 0.1.6

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>[];
+    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.6",
   "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/tailwind.config.js

@@ -1,5 +1,5 @@
 import tailwindcss from "tailwindcss";
-// import tailwindScrollbarHide from "tailwind-scrollbar-hide";
+import tailwindScrollbarHide from "tailwind-scrollbar-hide";
 import tailwindcssAnimate from "tailwindcss-animate";
 // import twElements from "tw-elements/dist/plugin";
 // import tailwindcssDirectionalShadows from "tailwindcss-directional-shadows";
@@ -92,6 +92,8 @@ export default {
         "55/100": "55%",
         "65/100": "65%",
         "85/100": "85%",
+        90: "22.5rem",
+        120: "30rem",
         176: "44rem",
         478: "478px",
       },
@@ -106,6 +108,10 @@ export default {
         "7/10": "70%",
         "9/10": "90%",
       },
+      maxHeight: {
+        44: "11rem",
+        "9/10": "90%",
+      },
       spacing: {
         "sun-calc": "calc(50% - 6rem)",
         1: "0.25rem",
@@ -124,9 +130,13 @@ export default {
         38: "9.5rem",
         40: "10rem",
         42: "10.5rem",
+        44: "11rem",
+        45: "11.25rem",
+        48: "12rem",
         49: "12.25rem",
         50: "12.5rem",
         52: "13rem",
+        54: "13.5rem",
         56: "14rem",
         62: "15.5rem",
         64: "16rem",
@@ -158,6 +168,7 @@ export default {
         126: "31.5rem",
         128: "32rem",
         132: "33rem",
+        135: "33.75rem",
         136: "34rem",
         140: "35rem",
         144: "36rem",
@@ -170,9 +181,12 @@ export default {
         180: "45rem",
         182: "45.5rem",
         186: "46.5rem",
+        190: "47.5rem",
         200: "50rem",
         216: "54rem",
         220: "55rem",
+        224: "56rem",
+        225: "56.25rem",
         228: "57rem",
         232: "58rem",
         240: "60rem",
@@ -180,6 +194,7 @@ export default {
         255: "63.75rem",
         256: "64rem",
         260: "65rem",
+        264: "66rem",
         272: "68rem",
         280: "70rem",
         288: "72rem",
@@ -188,6 +203,7 @@ export default {
         320: "80rem",
         360: "90rem",
         386: "96.5rem",
+        408: "102rem",
         480: "120rem",
         500: "125rem",
         520: "140rem",
@@ -221,10 +237,12 @@ export default {
         2500: "2500ms",
         2700: "2700ms",
         3000: "3000ms",
+        3300: "3300ms",
         4000: "4000ms",
         5000: "5000ms",
       },
       transitionDuration: {
+        300: "300ms",
         2000: "2000ms",
         60000: "60000ms",
         300000: "300000ms",
@@ -265,6 +283,16 @@ export default {
     },
   },
   safelist: [
+    {
+      pattern: /animate-.*/,
+    },
+    {
+      pattern: /shadow-.*/,
+    },
+
+    {
+      pattern: /flex-.*/,
+    },
     {
       pattern: /overflow-*./,
     },
@@ -295,6 +323,9 @@ export default {
     {
       pattern: /min-.*/,
     },
+    {
+      pattern: /max-.*/,
+    },
     { pattern: /w-.*/ },
     { pattern: /h-.*/ },
     {
@@ -317,6 +348,30 @@ export default {
     {
       pattern: /p-.*/,
     },
+    {
+      pattern: /px-.*/,
+    },
+    {
+      pattern: /pl-.*/,
+    },
+    {
+      pattern: /py-.*/,
+    },
+    {
+      pattern: /pb-.*/,
+    },
+    {
+      pattern: /m-.*/,
+    },
+    {
+      pattern: /mx-.*/,
+    },
+    {
+      pattern: /my-.*/,
+    },
+    {
+      pattern: /z-.*/,
+    },
     {
       pattern: /from-.*/,
     },
@@ -330,5 +385,5 @@ export default {
       pattern: /delay-.*/,
     },
   ],
-  plugins: [tailwindcss(), tailwindcssAnimate],
+  plugins: [tailwindcss(), tailwindcssAnimate, tailwindScrollbarHide],
 };

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.6

package/header/index.d.ts

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

package/header/index.js

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