@edu-tosel/design 1.0.12 → 1.0.14

package/interface/Modal.d.ts

@@ -1,14 +1,19 @@
 import { Button, Scripts, Size } from "./Property";
 export interface ModalProps {
+    isVisible?: boolean;
     children: React.ReactNode;
+    classNames?: string;
     options?: {
         width?: Size;
         height?: Size;
         padding?: boolean;
         buttons?: Button[];
+        isCloseButton?: boolean;
+        closeButtonColor?: string;
     };
+    debug?: string;
 }
-export interface AlertModalProps {
+export interface AlertModalProps extends Omit<ModalProps, "children"> {
     title: string;
     scripts: Scripts;
     options?: {

package/interface/Overlay.d.ts

@@ -0,0 +1,3 @@
+export interface OverlayProps {
+    isVisible?: boolean;
+}

package/interface/Overlay.js

@@ -0,0 +1 @@
+export {};

package/interface/Property.d.ts

@@ -42,11 +42,20 @@ export type Scripts = {
 export type Titles = {
     title: string;
     subtitle?: string | string[];
+    isSub?: boolean;
     color?: string;
 };
+export type DataField = {
+    title: string | number;
+    size?: string | number;
+};
 export interface Log<K extends string, T extends string | number> {
     prints: K[];
     logs: {
         [p in K]: T;
     }[] | undefined;
 }
+export interface Order {
+    orderBy: string;
+    orderHow: "asc" | "desc" | "";
+}

package/interface/Shelf.d.ts

@@ -0,0 +1,22 @@
+import { Button, Titles } from "./Property";
+import { EventsProps } from "./Widget";
+interface Options<T> {
+    titleSize?: string;
+    subtitleSize?: string;
+    overflowScroll?: boolean;
+    width?: T;
+    height?: number;
+    gapX?: number;
+    gapY?: number;
+}
+export interface ShelfProps<T> {
+    children: React.ReactNode;
+    widgets?: EventsProps & {
+        tabs?: Button[];
+    };
+    titles?: Titles;
+    debug?: string;
+    classNames?: string;
+    options?: Options<T>;
+}
+export {};

package/interface/Shelf.js

@@ -0,0 +1 @@
+export {};

package/interface/Widget.d.ts

@@ -2,3 +2,22 @@ export interface WidgetEvent {
     event: string;
     type: "view" | "modal";
 }
+type Event<T extends boolean | string | null | undefined> = [
+    T,
+    React.ReactNode
+];
+export type Show = Event<boolean | string>;
+export type Replace = Event<boolean | string | null | undefined>;
+export interface ShowProps {
+    widgets?: Show[];
+    children: React.ReactNode;
+}
+export interface ReplaceProps {
+    widgets?: Replace[];
+    children: React.ReactNode;
+}
+export interface EventsProps {
+    replaces?: Event<boolean | string | null | undefined>[];
+    shows?: Event<boolean | string>[];
+}
+export {};

package/interface/index.d.ts

@@ -1,3 +1,5 @@
+export * from "./Card";
 export * from "./HTMLElement";
 export * from "./Property";
+export * from "./Shelf";
 export * from "./Widget";

package/interface/index.js

@@ -1,3 +1,5 @@
+export * from "./Card";
 export * from "./HTMLElement";
 export * from "./Property";
+export * from "./Shelf";
 export * from "./Widget";

package/layout/index.d.ts

@@ -1 +1,4 @@
-export * from "./dashboard";
+export { default as Events } from "./widget/Events";
+export { default as Dashboard } from "./template/dashboard";
+export { default as Gallery } from "./template/Gallery";
+export { default as Shelf } from "./template/Shelf";

package/layout/index.js

@@ -1 +1,4 @@
-export * from "./dashboard";
+export { default as Events } from "./widget/Events";
+export { default as Dashboard } from "./template/dashboard";
+export { default as Gallery } from "./template/Gallery";
+export { default as Shelf } from "./template/Shelf";

package/layout/template/Gallery.d.ts

@@ -0,0 +1,7 @@
+import { Button, EventsProps } from "../../interface";
+export default function Gallery({ widgets, children, }: {
+    widgets?: EventsProps & {
+        tabs?: Button[];
+    };
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/layout/template/Gallery.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Events from "../widget/Events";
+import Tab from "../widget/Tab";
+export default function Gallery({ widgets, children, }) {
+    return (_jsxs("div", { className: "relative w-full flex", children: [_jsx(Events.Replace, { widgets: widgets?.replaces, children: _jsx(Events.Show, { widgets: widgets?.shows, children: children }) }), widgets?.tabs && _jsx(Tab, { tabs: widgets?.tabs })] }));
+}

package/layout/template/Shelf.d.ts

@@ -0,0 +1,8 @@
+import { ShelfProps } from "../../interface/Shelf";
+declare function Shelf({ titles, debug, children }: ShelfProps<string | number>): import("react/jsx-runtime").JSX.Element;
+declare namespace Shelf {
+    var Wrap: ({ classNames, titles, children, debug, }: ShelfProps<string | number>) => import("react/jsx-runtime").JSX.Element;
+    var Row: ({ titles, children, debug }: ShelfProps<string | number>) => import("react/jsx-runtime").JSX.Element;
+    var Col: ({ titles, children, debug }: ShelfProps<string | number>) => import("react/jsx-runtime").JSX.Element;
+}
+export default Shelf;

package/layout/template/Shelf.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../util";
+import ShelfDesign from "../widget/Shelf";
+function Shelf({ titles, debug, children }) {
+    const container = {
+        displays: "inline-flex flex-col gap-8 w-full",
+    };
+    return (_jsx(ShelfDesign, { titles: titles, classNames: cn(container), debug: debug, children: children }));
+}
+function Wrap({ classNames, titles, children, debug, }) {
+    const container = {
+        displays: "flex flex-row flex-wrap gap-x-4",
+        classNames,
+    };
+    return (_jsx(ShelfDesign, { titles: titles, classNames: cn(container), options: {
+            titleSize: "text-lg xl:text-2xl",
+            subtitleSize: "text-sm",
+        }, debug: debug, children: children }));
+}
+function Row({ titles, children, debug }) {
+    const container = {
+        displays: "flex flex-row gap-y-5",
+    };
+    return (_jsx(ShelfDesign, { titles: titles, classNames: cn(container), options: {
+            titleSize: "text-lg xl:text-2xl",
+            subtitleSize: "text-sm",
+        }, debug: debug, children: children }));
+}
+function Col({ titles, children, debug }) {
+    const container = {
+        displays: "flex flex-col flex-wrap gap-y-5",
+    };
+    return (_jsx(ShelfDesign, { titles: titles, classNames: cn(container), options: {
+            titleSize: "text-lg xl:text-2xl",
+            subtitleSize: "text-sm",
+        }, debug: debug, children: children }));
+}
+Shelf.Wrap = Wrap;
+Shelf.Row = Row;
+Shelf.Col = Col;
+export default Shelf;

package/layout/{dashboard → template/dashboard}/Header.d.ts

@@ -1,4 +1,3 @@
-import "../../globals.css";
 export declare function Header({ title, image, }: {
     title: string;
     image?: [string, string];

package/layout/template/dashboard/Header.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn, gradient } from "../../../util";
+import { useWidgetStore } from "../../../store";
+export function Header({ title, image, }) {
+    const { isDark, setDark } = useWidgetStore();
+    const [isOpen, setIsOpen] = useState(false);
+    const [src, href] = image ?? [];
+    const container = {
+        positions: "fixed xl:static top-0 left-0 z-40",
+        displays: "flex items-center justify-between ",
+        sizes: "h-15 w-full",
+        background: !isDark ? `bg-${gradient.greenToRed}` : "bg-black",
+        styles: "px-5 xl:px-8 2xl:px-16 ",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex h-12 items-center gap-8 xl:gap-24 2xl:gap-22", children: [src && href ? (_jsx("a", { href: href, children: _jsx("img", { src: src, alt: "logo", className: "h-6.25 w-28.78" }) })) : (_jsx("div", { className: "text-2xl", children: "TOSEL" })), _jsx("div", { className: "text-3xl font-bold text-white ", children: title })] }), _jsx("button", { onClick: setDark, className: "text-white", children: "DARK" })] }));
+}

package/layout/{dashboard → template/dashboard}/index.d.ts

@@ -1,6 +1,10 @@
-export declare function DashboardLayout({ subject, colors, navigations, children, }: {
+declare function Layout({ subject, colors, navigations, children, }: {
     subject: [string, string, string];
     colors?: [string, string];
     navigations: React.ReactNode[];
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
+declare const Dashboard: {
+    Layout: typeof Layout;
+};
+export default Dashboard;

package/layout/template/dashboard/index.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { NavigationContainer } from "../../../navigation";
+import { Header } from "./Header";
+import { cn } from "../../../util";
+import { useWidgetStore } from "../../../store";
+function Layout({ subject, colors, navigations, children, }) {
+    const { isDark, setFlag } = useWidgetStore();
+    const [title, image, imageUrl] = subject ?? ["", "", ""];
+    const [bgColor, textColor] = colors ?? ["white", "black"];
+    const container = {
+        sizes: "min-h-screen h-screen xl:h-auto",
+        background: !isDark ? `bg-${bgColor}` : "bg-black/80",
+        styles: `text-${textColor} font-pretendard-medium`,
+        dark: isDark && "dark",
+    };
+    const body = {
+        sizes: "h-full ",
+        displays: "flex gap-12 xl:gap-8 ",
+        paddings: "pt-15 xl:pl-2 2xl:px-9 xl:pt-10",
+    };
+    return (_jsxs("div", { className: cn(container), onClick: setFlag, children: [_jsx(Header, { title: title, image: [image, imageUrl] }), _jsxs("div", { className: cn(body), children: [_jsx(NavigationContainer, { children: navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index))) }), children] })] }));
+}
+const Dashboard = {
+    Layout,
+};
+export default Dashboard;

package/layout/template/report/Header.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+export default function Header({ groupName, examName, }) {
+    const container = {
+        positions: "relative z-20",
+        displays: "flex flex-col items-center ",
+        sizes: "w-full max-w-280",
+        styles: "py-8 bg-white shadow-md",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex justify-between w-full items-center px-2", children: [_jsx("img", { src: "/images/logos/itc.png", alt: "itc", width: 80 }), _jsx("div", { className: "flex items-center", children: _jsx("div", { className: "text-5xl font-bold", children: examName }) }), _jsx("img", { src: "/images/logos/badge-tosel-lab.png", alt: "tosel-lab", width: 80 })] }), _jsxs("div", { className: "", children: ["\uC9C0\uC815\uAD50\uC721\uAE30\uAD00: ", groupName] })] }));
+}

package/layout/widget/Events.d.ts

@@ -0,0 +1,8 @@
+import { ReplaceProps, ShowProps } from "./../../interface/Widget";
+declare function Show({ widgets, children }: ShowProps): import("react/jsx-runtime").JSX.Element;
+declare function Replace({ widgets, children }: ReplaceProps): import("react/jsx-runtime").JSX.Element;
+declare const Events: {
+    Show: typeof Show;
+    Replace: typeof Replace;
+};
+export default Events;

package/layout/widget/Events.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { Fragment } from "react";
+import { useWidgetStore } from "../../store";
+function Show({ widgets, children }) {
+    const { events } = useWidgetStore();
+    return (_jsxs(_Fragment, { children: [children, widgets?.map(([flag, Component], index) => {
+                const isVisible = typeof flag === "boolean"
+                    ? flag
+                    : events?.some(({ event }) => event === flag);
+                if (React.isValidElement(Component)) {
+                    const ComponentWithVisibility = React.cloneElement(Component, {
+                        isVisible,
+                    });
+                    return _jsx(Fragment, { children: ComponentWithVisibility }, index);
+                }
+                return null;
+            })] }));
+}
+function Replace({ widgets, children }) {
+    const { events } = useWidgetStore();
+    if (!widgets)
+        return _jsx(_Fragment, { children: children });
+    const trueComponents = widgets
+        .filter(([widget]) => widget)
+        .map(([flag, Component], index) => {
+        if (typeof flag === "string") {
+            return events?.some(({ event }) => event === flag) ? (_jsx(_Fragment, { children: Component })) : null;
+        }
+        return _jsx(Fragment, { children: Component }, index);
+    })
+        .filter((component) => component !== null);
+    return _jsx(_Fragment, { children: trueComponents.length > 0 ? trueComponents : children });
+}
+const Events = {
+    Show,
+    Replace,
+};
+export default Events;

package/layout/widget/Shelf.d.ts

@@ -0,0 +1,2 @@
+import { ShelfProps } from "../../interface";
+export default function Shelf<T extends string | number>({ children, classNames, options, titles, debug, }: ShelfProps<T>): import("react/jsx-runtime").JSX.Element;

package/layout/widget/Shelf.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LineBreaks } from "../../text";
+import { cn, isDebug } from "../../util";
+export default function Shelf({ children, classNames, options, titles, debug, }) {
+    const { titleSize, subtitleSize } = options ?? {};
+    const container = {
+        debug: debug && isDebug(`border-2  border-${debug}`),
+    };
+    const titleBox = {
+        container: "flex flex-col pb-2",
+        title: {
+            text: titleSize ?? "text-xl xl:text-3xl",
+            font: "font-bold",
+        },
+        subtitle: {
+            text: subtitleSize ?? "text-base xl:text-lg",
+        },
+    };
+    const childrenBox = {
+        sizes: "w-full",
+        classNames,
+    };
+    return (_jsxs("div", { className: cn(container), children: [titles && (_jsxs("div", { className: cn(titleBox.container), children: [_jsx("div", { className: cn(titleBox.title), children: titles.title }), _jsx(LineBreaks, { className: cn(titleBox.subtitle), texts: titles?.subtitle })] })), _jsx("div", { className: cn(childrenBox), children: children })] }));
+}

package/{board → layout}/widget/Tab.js

@@ -4,16 +4,14 @@ import { cn } from "../../util";
 export default function Tab({ tabs }) {
     const [tabsSelection, setTabsSelection] = useState(tabs.map((_, i) => i === 0));
     const container = {
-        positions: "xl:absolute xl:-bottom-14 xl:left-0 z-5",
-        displays: "hidden xl:flex xl:items-end xl:gap-4",
-        sizes: "xl:h-16",
-        paddings: "xl:px-8 xl:pb-2 ",
-        styles: "bg-white/50 rounded-b-xl ",
+        positions: "xl:absolute xl:-bottom-18 xl:left-0 z-5",
+        displays: "hidden xl:flex xl:items-center xl:gap-2.5",
+        sizes: "xl:h-14.5",
+        paddings: "px-2.5",
+        styles: "bg-white/30 rounded-xl ",
     };
     return (_jsx("div", { className: cn(container), children: tabs.map(([title, onClick], index) => (_jsx("button", { onClick: () => {
                 setTabsSelection(tabsSelection.map((_, i) => i === index));
                 return onClick();
-            }, className: `h-9 w-32 rounded-md ${tabsSelection[index]
-                ? "border-4 border-blue-500"
-                : "border-4 border-red-500"}`, children: title }, title))) }));
+            }, className: `text-green-dark duration-500 h-9 w-32 rounded-md ${tabsSelection[index] && "bg-white rounded-2xl"}`, children: title }, title))) }));
 }

package/modal/index.d.ts

@@ -1,3 +1 @@
-export { default as TestModal } from "./TestModal";
-export { default as AlertModal } from "./AlertModal";
-export { default as ControllerModal } from "./ControllerModal";
+export { default as Modal } from "./template";

package/modal/index.js

@@ -1,3 +1 @@
-export { default as TestModal } from "./TestModal";
-export { default as AlertModal } from "./AlertModal";
-export { default as ControllerModal } from "./ControllerModal";
+export { default as Modal } from "./template";

package/modal/template/Alert.d.ts

@@ -0,0 +1,2 @@
+import { AlertModalProps } from "../../interface/Modal";
+export default function Alert({ isVisible, title, scripts, options, }: AlertModalProps): import("react/jsx-runtime").JSX.Element;

package/modal/template/Alert.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { col } from "../../util";
+import ModalDesign from "../widget/Modal.design";
+export default function Alert({ isVisible, title, scripts, options, }) {
+    const { script, subScript } = scripts ?? {};
+    const { buttons } = options ?? {};
+    return (_jsx(ModalDesign, { isVisible: isVisible, classNames: "pt-18 px-25", options: { buttons, isCloseButton: true }, children: _jsx("div", { className: col(3), 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: script })] }) }) }));
+}

package/modal/template/Input.d.ts

@@ -0,0 +1,6 @@
+import { State } from "../../interface";
+import { ModalProps } from "../../interface/Modal";
+export default function Input<T>({ isVisible, title, options, state, }: Omit<ModalProps, "children"> & {
+    title?: string;
+    state: State<T>;
+}): import("react/jsx-runtime").JSX.Element;

package/modal/template/Input.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ModalDesign from "../widget/Modal.design";
+export default function Input({ isVisible, title, options, state, }) {
+    const { buttons } = options ?? {};
+    return (_jsxs(ModalDesign, { isVisible: isVisible, classNames: "pt-18 px-25", options: { buttons, isCloseButton: true }, children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsx("input", { className: "border-2 border-black w-80 h-8", value: state[0], onChange: (e) => state[1](e.target.value) })] }));
+}

package/modal/template/index.d.ts

@@ -0,0 +1,7 @@
+import Alert from "./Alert";
+import Input from "./Input";
+declare const Modal: {
+    Alert: typeof Alert;
+    Input: typeof Input;
+};
+export default Modal;

package/modal/template/index.js

@@ -0,0 +1,7 @@
+import Alert from "./Alert";
+import Input from "./Input";
+const Modal = {
+    Alert,
+    Input,
+};
+export default Modal;

package/modal/widget/Modal.design.d.ts

@@ -0,0 +1,2 @@
+import { ModalProps } from "../../interface/Modal";
+export default function ModalDesign({ isVisible, children, options, debug, }: ModalProps): import("react").ReactPortal;

package/modal/widget/Modal.design.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ReactDOM from "react-dom";
+import { useTransition, animated } from "react-spring";
+import { useWidgetStore } from "../../store";
+import { cn } from "../../util";
+import isDebug from "../../util/isDebug";
+const widthSize = {
+    xs: "w-2/3 min-w-76 max-w-176",
+    sm: "w-2/3 min-w-76 max-w-176",
+    md: "w-2/3 min-w-76 max-w-176",
+    lg: "w-full min-w-76 max-w-360",
+    xl: "w-2/3 min-w-76 max-w-360",
+    "2xl": "w-2/3 min-w-76 max-w-360",
+    full: "w-full",
+};
+const heightSize = {
+    xs: "",
+    sm: "h-100",
+    md: "h-72 sm:h-48",
+    lg: "h-120",
+    xl: "h-180",
+    "2xl": "w-2/3 min-w-76 max-w-176",
+    full: "h-full",
+};
+export default function ModalDesign({ isVisible, children, options, debug, }) {
+    const { buttons, width, height, closeButtonColor, isCloseButton } = options ?? {};
+    const { clearModal } = useWidgetStore();
+    const background = {
+        positions: "z-50 fixed top-0 left-0",
+        displays: "flex items-center justify-center ",
+        sizes: "min-h-screen w-full ",
+        styles: "bg-black/10 backdrop-blur-sm ",
+    };
+    const container = {
+        paddings: "pl-25 pt-18 pb-12",
+        sizes: `${heightSize[height ?? "sm"]} ${widthSize[width ?? "md"]}`,
+        styles: "rounded-xl bg-white relative overflow-hidden",
+        debug: debug && isDebug(`border-2 border-${debug}`),
+    };
+    const button = {
+        container: {
+            positions: "absolute bottom-8 right-10",
+            displays: "flex justify-end gap-4",
+        },
+        body: {
+            paddings: "px-8 py-2 ",
+            styles: "rounded-2xl bg-black text-2xl font-bold text-white",
+        },
+    };
+    const closeButton = {
+        positions: "absolute top-5 left-7",
+        displays: "flex justify-center items-center",
+        sizes: "h-9 w-9",
+        background: closeButtonColor ?? "bg-black",
+        styles: "rounded-full",
+    };
+    const transitions = useTransition(isVisible, {
+        from: { opacity: 0 },
+        enter: { opacity: 1 },
+        leave: { opacity: 0 },
+        config: { duration: 200 },
+    });
+    return ReactDOM.createPortal(transitions((styles, item) => item && (_jsx(animated.div, { style: styles, className: cn(background), children: _jsxs("div", { className: cn(container), children: [children, buttons ? (_jsx("div", { className: cn(button.container), children: buttons.map(([text, onClick]) => (_jsx("button", { className: cn(button.body), onClick: onClick, children: text }, text))) })) : null, isCloseButton && (_jsx("button", { className: cn(closeButton), onClick: clearModal, children: _jsx("div", { className: "x-shape" }) }))] }) }))), document.body);
+}

package/navigation/Navigation.d.ts

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

package/navigation/Navigation.js

@@ -1,24 +1,33 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { center, cn } from "../util";
+import { useWidgetStore } from "../store";
 export const buttonClassNames = (href, nowPath, color) => {
-    const [bg, text] = color ?? ["white", "black"];
+    const { isDark } = useWidgetStore();
+    const [bg, [text, selectedText]] = color ?? ["white", ["white", "black"]];
     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) => {
-        return href.split("/").pop() === nowPath.split("/").pop();
+        const nowPathFormat = nowPath
+            .split("/")
+            .filter((segment) => !/^\d+$/.test(segment))
+            .join("/");
+        return href.split("/").pop() === nowPathFormat.split("/").pop();
     };
     const toggle = checkPathMatch(href, nowPath)
-        ? `bg-${bg}`
-        : "bg-gray-500 xl:bg-transparent";
+        ? !isDark
+            ? `bg-${bg} text-${selectedText}`
+            : "bg-white text-black"
+        : (!isDark ? "bg-white " : "bg-black ") +
+            `xl:bg-transparent text-${text} dark:text-white`;
     return [classNames, toggle].join(" ");
 };
 export function NavigationContainer({ children, }) {
-    const displays = "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(displays, positions, sizes, styles), children: children }));
+    const container = {
+        positions: "fixed xl:static bottom-0 left-0 z-40",
+        displays: "flex flex-row xl:flex-col",
+        sizes: "w-full xl:w-auto",
+    };
+    return _jsx("div", { className: cn(container), children: children });
 }

package/overlay/index.d.ts

@@ -0,0 +1 @@
+export { default as Overlay } from "./template";

package/overlay/index.js

@@ -0,0 +1 @@
+export { default as Overlay } from "./template";

package/overlay/template/Overlay.design.d.ts

@@ -0,0 +1,2 @@
+import { OverlayProps } from "../../interface/Overlay";
+export default function OverlayDesign(props: OverlayProps): import("react/jsx-runtime").JSX.Element;

package/overlay/template/Overlay.design.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Overlay from "./../widget/Overlay";
+export default function OverlayDesign(props) {
+    return _jsx(Overlay, { ...props });
+}

package/overlay/template/index.d.ts

@@ -0,0 +1,3 @@
+import { OverlayProps } from "../../interface/Overlay";
+declare function Overlay(props: OverlayProps): import("react/jsx-runtime").JSX.Element;
+export default Overlay;

package/overlay/template/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import OverlayDesign from "./Overlay.design";
+function Overlay(props) {
+    return _jsx(OverlayDesign, { ...props });
+}
+export default Overlay;

package/overlay/widget/Overlay.d.ts

@@ -0,0 +1,2 @@
+import { OverlayProps } from "../../interface/Overlay";
+export default function Overlay({ isVisible }: OverlayProps): JSX.Element;

package/overlay/widget/Overlay.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTransition, animated } from "react-spring";
+import { cn } from "../../util";
+export default function Overlay({ isVisible }) {
+    const container = {
+        positions: "absolute top-0 right-0 z-40",
+        sizes: "h-full ",
+        styles: "bg-black",
+    };
+    const transitions = useTransition(isVisible, {
+        from: { opacity: 0, width: "0%" },
+        enter: { opacity: 1, width: "33.3333%" },
+        leave: { opacity: 0, width: "0%" },
+        config: { duration: 500 },
+    });
+    return transitions((styles, item) => item && (_jsx(animated.div, { style: styles, className: cn(container), children: _jsx("div", { className: "text-white text-3xl", children: "TEST" }) })));
+}