@edu-tosel/design 1.0.14 → 1.0.15

package/interface/Card.d.ts

@@ -60,7 +60,7 @@ export interface ChartCardProps extends Omit<CardProps, "children"> {
 export interface TableCardProps<T> extends Omit<CardProps, "children"> {
     dataSets: T[];
     dataField: {
-        [p in keyof T]: DataField;
+        [p in keyof T]: Partial<DataField>;
     };
     options?: CardOptions;
 }
@@ -88,4 +88,11 @@ export interface InfoCardProps extends CardProps {
 export interface AddCardProps extends Omit<CardProps, "children"> {
     onClick: OnClick;
 }
+export interface RowCardProps<T> {
+    onClick?: OnClick;
+    dataSet: T;
+    dataField?: {
+        [p in keyof T]?: Partial<DataField>;
+    };
+}
 export {};

package/interface/HTMLElement.d.ts

@@ -1,29 +1,31 @@
-import { Dispatch } from "react";
-import { OnClick, Size } from "./Property";
-export type HTMLElementType = "text" | "button" | "input" | "select";
+import { OnClick, Size, State } from "./Property";
+export declare const HTMLElementType: {
+    readonly TEXT: "text";
+    readonly BUTTON: "button";
+    readonly INPUT: "input";
+    readonly SELECT: "select";
+    readonly TOGGLE: "toggle";
+};
+export type HTMLElementType = (typeof HTMLElementType)[keyof typeof HTMLElementType];
 export interface HTMLElement {
     options?: {
         width?: Size;
     };
 }
-export interface HTMLElementSetting {
-    [key: string]: {
-        label: string;
-        type: HTMLElementType;
-        placeholder?: string;
-        options?: [string, string][];
-        onChnage?: Dispatch<string>;
-    };
-}
 export interface HTMLButtonElement extends HTMLElement {
     title: string;
     onClick: OnClick;
 }
 export interface HTMLSelectElement extends HTMLElement {
-    onChange: Dispatch<string>;
+    state: State<string>;
     selectOptions?: [string | number, string][];
 }
 export interface HTMLInputElement extends HTMLElement {
-    onChange: Dispatch<string>;
+    state: State<string>;
     placeholder?: string;
 }
+export interface HTMLToggleElement extends HTMLElement {
+    state: State<boolean>;
+    labels: [[true, string], [false, string]];
+    isDisabled?: boolean;
+}

package/interface/HTMLElement.js

@@ -1 +1,7 @@
-export {};
+export const HTMLElementType = {
+    TEXT: "text",
+    BUTTON: "button",
+    INPUT: "input",
+    SELECT: "select",
+    TOGGLE: "toggle",
+};

package/interface/Overlay.d.ts

@@ -1,3 +1,20 @@
+import { HTMLElementType } from "./HTMLElement";
+import { State, Titles } from "./Property";
 export interface OverlayProps {
+    titles: Titles;
     isVisible?: boolean;
+    event?: string;
+    children?: React.ReactNode;
+}
+export interface InfoOverlayProps extends OverlayProps {
+}
+export interface ManageOverlayProps extends InfoOverlayProps {
+    elements?: {
+        title: string;
+        state: State<string> | State<boolean>;
+        type: HTMLElementType;
+        selectOptions?: [string | number, string][];
+        labels?: [string | boolean, string][];
+        isDisabled?: boolean;
+    }[];
 }

package/interface/Property.d.ts

@@ -9,7 +9,8 @@ import { Dispatch, SetStateAction } from "react";
  * const [state, setState] = useState<T>(initialState);
  * @typedef {Array<T, Dispatch<SetStateAction<T>>>} State
  */
-export type State<T> = [T, Dispatch<SetStateAction<T>>];
+export type StateAction<T> = Dispatch<SetStateAction<T>>;
+export type State<T> = [T, StateAction<T>];
 /**
  * Size type
  * @enum {string}
@@ -47,7 +48,8 @@ export type Titles = {
 };
 export type DataField = {
     title: string | number;
-    size?: string | number;
+    type: string;
+    size: string | number;
 };
 export interface Log<K extends string, T extends string | number> {
     prints: K[];

package/interface/index.d.ts

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

package/interface/index.js

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

package/layout/template/Shelf.js

@@ -3,13 +3,13 @@ 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",
+        displays: "inline-flex flex-col gap-12 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",
+        displays: "flex flex-row flex-wrap gap-x-7.5",
         classNames,
     };
     return (_jsx(ShelfDesign, { titles: titles, classNames: cn(container), options: {
@@ -19,7 +19,7 @@ function Wrap({ classNames, titles, children, debug, }) {
 }
 function Row({ titles, children, debug }) {
     const container = {
-        displays: "flex flex-row gap-y-5",
+        displays: "flex flex-row gap-7.5",
     };
     return (_jsx(ShelfDesign, { titles: titles, classNames: cn(container), options: {
             titleSize: "text-lg xl:text-2xl",

package/layout/template/dashboard/index.js

@@ -1,13 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
+import { Fragment, useEffect } 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 { isDark, flag, setFlag, isOwn, setIsOwn, clearView } = useWidgetStore();
     const [title, image, imageUrl] = subject ?? ["", "", ""];
     const [bgColor, textColor] = colors ?? ["white", "black"];
+    useEffect(() => {
+        if (isOwn) {
+            return setIsOwn(false);
+        }
+        return clearView();
+    }, [flag]);
     const container = {
         sizes: "min-h-screen h-screen xl:h-auto",
         background: !isDark ? `bg-${bgColor}` : "bg-black/80",
@@ -16,8 +22,8 @@ function Layout({ subject, colors, navigations, children, }) {
     };
     const body = {
         sizes: "h-full ",
-        displays: "flex gap-12 xl:gap-8 ",
-        paddings: "pt-15 xl:pl-2 2xl:px-9 xl:pt-10",
+        displays: "flex gap-12 xl:gap-7.5 ",
+        paddings: "pt-15 xl:pl-2 2xl:px-12 xl:pt-7.5",
     };
     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] })] }));
 }

package/layout/widget/Events.js

@@ -7,8 +7,14 @@ function Show({ widgets, children }) {
                 const isVisible = typeof flag === "boolean"
                     ? flag
                     : events?.some(({ event }) => event === flag);
+                const event = () => {
+                    if (typeof flag === "string") {
+                        return flag;
+                    }
+                };
                 if (React.isValidElement(Component)) {
                     const ComponentWithVisibility = React.cloneElement(Component, {
+                        event: event(),
                         isVisible,
                     });
                     return _jsx(Fragment, { children: ComponentWithVisibility }, index);

package/layout/widget/Shelf.js

@@ -4,10 +4,11 @@ import { cn, isDebug } from "../../util";
 export default function Shelf({ children, classNames, options, titles, debug, }) {
     const { titleSize, subtitleSize } = options ?? {};
     const container = {
+        displays: "flex flex-col gap-4",
         debug: debug && isDebug(`border-2  border-${debug}`),
     };
     const titleBox = {
-        container: "flex flex-col pb-2",
+        container: "flex flex-col text-gray-dim",
         title: {
             text: titleSize ?? "text-xl xl:text-3xl",
             font: "font-bold",
@@ -20,5 +21,5 @@ export default function Shelf({ children, classNames, options, titles, debug, })
         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 })] }));
+    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/navigation/Navigation.js

@@ -1,27 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { center, cn } from "../util";
+import { cn } from "../util";
 import { useWidgetStore } from "../store";
+import checkPathMatch from "../util/checkPathMatch";
 export const buttonClassNames = (href, nowPath, color) => {
     const { isDark } = useWidgetStore();
     const [bg, [text, selectedText]] = color ?? ["white", ["white", "black"]];
-    const classNames = [
-        center.row(6),
-        "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) => {
-        const nowPathFormat = nowPath
-            .split("/")
-            .filter((segment) => !/^\d+$/.test(segment))
-            .join("/");
-        return href.split("/").pop() === nowPathFormat.split("/").pop();
+    const container = {
+        displays: "flex flex-row items-center justify-center xl:justify-start gap-2.5",
+        sizes: " w-full xl:w-51 h-11 ",
+        styles: "xl:rounded-2xl xl:pl-5 font-bold ",
     };
     const toggle = checkPathMatch(href, nowPath)
         ? !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(" ");
+            `xl:bg-transparent xl:hover:bg-white/50 hover:text-green-dark text-${text} dark:text-white`;
+    return [cn(container), toggle].join(" ");
 };
 export function NavigationContainer({ children, }) {
     const container = {

package/overlay/template/Info.d.ts

@@ -0,0 +1,2 @@
+import { InfoOverlayProps } from "../../interface/Overlay";
+export default function Info({ event, isVisible, }: Omit<InfoOverlayProps, "titles">): import("react/jsx-runtime").JSX.Element;

package/overlay/template/Info.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import OverlayDesign from "../widget/Overlay.design";
+export default function Info({ event, isVisible, }) {
+    return (_jsx(OverlayDesign, { titles: { title: "유저 관리" }, event: event, isVisible: isVisible, children: _jsx("div", { children: "TEST" }) }));
+}

package/overlay/template/Manage.d.ts

@@ -0,0 +1,2 @@
+import { ManageOverlayProps } from "../../interface";
+export default function Manage({ titles, isVisible, event, elements, }: ManageOverlayProps): import("react/jsx-runtime").JSX.Element;

package/overlay/template/Manage.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select, Toggle } from "../..";
+import OverlayDesign from "../widget/Overlay.design";
+import { useId } from "react";
+export default function Manage({ titles, isVisible, event, elements, }) {
+    const id = useId();
+    return (_jsx(OverlayDesign, { titles: titles, event: event, isVisible: isVisible, children: elements?.map(({ title, type, labels, state, isDisabled, selectOptions }) => {
+            if (type === "select")
+                return (_jsx(Frame, { title: title, children: _jsx(Select, { state: state, selectOptions: selectOptions }) }, id + title));
+            if (type === "toggle")
+                return (_jsx(Frame, { title: title, children: _jsx(Toggle, { state: state, labels: labels, isDisabled: isDisabled }) }, id + title));
+            return null;
+        }) }));
+}
+function Frame({ title, children, }) {
+    return (_jsxs("div", { className: "flex items-center gap-3.75", children: [_jsx("div", { className: "w-20 text-sm font-bold text-gray-dim", children: title }), children] }));
+}

package/overlay/template/index.d.ts

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

package/overlay/template/index.js

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

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

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

package/overlay/widget/Overlay.design.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTransition, animated } from "react-spring";
+import { cn } from "../../util";
+import { useWidgetStore } from "../../store";
+export default function OverlayDesign({ titles, children, event, isVisible, }) {
+    const { removeView, setIsOwn } = useWidgetStore();
+    const { title } = titles;
+    const container = {
+        positions: "absolute top-0 right-0 z-30",
+        sizes: "h-full h",
+        styles: "box-shadow-sm bg-white",
+    };
+    const body = {
+        positions: "relative",
+        paddings: "pt-12 pl-12",
+        displays: "flex flex-col gap-3.5",
+    };
+    const transitions = useTransition(isVisible, {
+        from: { width: "0%" },
+        enter: { width: "80%", maxWidth: "540px" },
+        leave: { width: "0%" },
+        config: { duration: 300 },
+    });
+    return transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(container), onClick: () => setIsOwn(true), children: [_jsxs("div", { className: cn(body), children: [_jsx("div", { className: "font-bold text-2xl", children: title }), _jsx("div", { className: "flex flex-col gap-3", children: children })] }), event && (_jsx("button", { className: "absolute top-3 left-3 bg-black w-6 h-6", onClick: () => removeView(event) }))] })));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",
@@ -14,7 +14,10 @@
   "type": "module",
   "scripts": {},
   "dependencies": {
+    "date-fns": "^2.30.0",
+    "date-fns-tz": "^2.0.1",
     "react": "^18.2.0",
+    "react-datepicker": "^6.4.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
     "react-lottie-player": "^1.5.6",

package/store/index.d.ts

@@ -3,6 +3,7 @@ interface WidgetProps {
     events: WidgetEvent[];
     setView: (prop: string) => void;
     removeView: (prop: string) => void;
+    clearView: () => void;
     setModal: (prop: string) => void;
     removeModal: (prop: string) => void;
     clearModal: () => void;
@@ -13,6 +14,8 @@ interface WidgetProps {
     clearTempData: () => void;
     flag: boolean;
     setFlag: () => void;
+    isOwn: boolean;
+    setIsOwn: (prop: boolean) => void;
     isDark: boolean;
     setDark: () => void;
 }

package/store/index.js

@@ -1,14 +1,21 @@
 import { create } from "zustand";
 export const useWidgetStore = create((set) => ({
     events: [],
-    setView: (prop) => set((state) => ({
-        events: [...state.events, { event: prop, type: "view" }],
-    })),
+    setView: (prop) => set((state) => {
+        if (state.events.find(({ event }) => event === prop) !== undefined)
+            return state;
+        return {
+            events: [...state.events, { event: prop, type: "view" }],
+        };
+    }),
     removeView: (prop) => {
         set((state) => ({
             events: state.events.filter(({ event }) => event !== prop),
         }));
     },
+    clearView: () => set((state) => ({
+        events: state.events.filter(({ type }) => type !== "view"),
+    })),
     order: {},
     setOrder: (id, prop) => {
         set((state) => {
@@ -52,6 +59,8 @@ export const useWidgetStore = create((set) => ({
     clearTempData: () => set({ tempData: {} }),
     flag: false,
     setFlag: () => set((state) => ({ flag: !state.flag })),
+    isOwn: false,
+    setIsOwn: (prop) => set({ isOwn: prop }),
     isDark: false,
     setDark: () => set((state) => ({ isDark: !state.isDark })),
 }));

package/tailwind.config.ts

@@ -84,6 +84,8 @@ export default {
         "sun-calc": "calc(50% - 6rem)",
         1: "0.25rem",
         2.5: "0.625rem",
+        3.75: "0.9375rem",
+        4.75: "1.1875rem",
         6.25: "1.5625rem",
         6.5: "1.625rem",
         7: "1.75rem",
@@ -93,6 +95,7 @@ export default {
         11: "2.75rem",
         12: "3rem",
         13.25: "3.3125rem",
+        13.75: "3.4375rem",
         14: "3.5rem",
         14.5: "3.625rem",
         15: "3.75rem",
@@ -100,6 +103,8 @@ export default {
         18: "4.5rem",
         18.75: "4.6875rem",
         19: "4.75rem",
+        19.25: "4.8125rem",
+        21: "5.25rem",
         21.75: "5.4375rem",
         22: "5.5rem",
         23: "5.75rem",
@@ -120,11 +125,14 @@ export default {
         48: "12rem",
         49: "12.25rem",
         50: "12.5rem",
+        51: "12.75rem",
         52: "13rem",
+        52.5: "13.125rem",
         54: "13.5rem",
         56: "14rem",
         62: "15.5rem",
         64: "16rem",
+        67.5: "16.875rem",
         68: "17rem",
         69: "17.25rem",
         70: "17.5rem",
@@ -157,13 +165,24 @@ export default {
         132: "33rem",
         135: "33.75rem",
         136: "34rem",
+        138.75: "34.6875rem",
         140: "35rem",
         144: "36rem",
+        145: "36.25rem",
+        145.25: "36.375rem",
+        146: "36.5rem",
+        147: "36.75rem",
         148: "37rem",
+        151.5: "37.875rem",
+        151.75: "37.9375rem",
+        152: "38rem",
+        153: "38.25rem",
         158: "39.5rem",
+        159: "39.75rem",
         160: "40rem",
         164: "41rem",
         168: "42rem",
+        171.5: "42.875rem",
         172: "43rem",
         176: "44rem",
         178: "44.5rem",

package/util/checkPathMatch.d.ts

@@ -0,0 +1,2 @@
+declare const checkPathMatch: (href: string, nowPath: string) => boolean;
+export default checkPathMatch;

package/util/checkPathMatch.js

@@ -0,0 +1,8 @@
+const checkPathMatch = (href, nowPath) => {
+    const nowPathFormat = nowPath
+        .split("/")
+        .filter((segment) => !/^\d+$/.test(segment))
+        .join("/");
+    return href.split("/").pop() === nowPathFormat.split("/").pop();
+};
+export default checkPathMatch;

package/version.txt

@@ -1 +1 @@
-1.0.14
+1.0.15

package/interface/Menu.d.ts

@@ -1,6 +0,0 @@
-import { Log, HTMLElementSetting, Button } from "../interface";
-export interface SideMenuProps<K extends string, T extends string | number> {
-    setting: HTMLElementSetting;
-    log?: Log<K, T>;
-    buttons?: Button[];
-}

package/interface/Menu.js

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

package/menu/index.d.ts

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

package/menu/index.js

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

package/menu/template/SideMenu.d.ts

@@ -1,2 +0,0 @@
-import { SideMenuProps } from "../../interface/Menu";
-export default function SideMenu<K extends string, T extends string | number>({ log, setting, buttons, }: SideMenuProps<K, T>): import("react/jsx-runtime").JSX.Element;

package/menu/template/SideMenu.js

@@ -1,20 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useWidgetStore } from "../../store";
-import { cn } from "../../util";
-import HTMLElement from "../widget/HTMLElement";
-export default function SideMenu({ log, setting, buttons, }) {
-    const { tempData, setTempData, clearTempData, events, removeView } = useWidgetStore();
-    const isOpen = events.some(({ event }) => event === "sideMenu");
-    const positions = "absolute top-20 right-0";
-    const paddings = "pt-8";
-    const sizes = `${isOpen ? "w-160" : "w-0"} h-full xl:h-158`;
-    const styles = `${isOpen ? "opacity-100 z-30" : "opacity-0 z-0"} bg-gray-200 duration-500`;
-    const { prints, logs } = log ?? {};
-    return (_jsx("div", { className: cn(positions, sizes, styles, paddings), children: _jsxs("div", { className: `relative w-full h-full flex flex-col items-center gap-12 ${isOpen ? "block" : "hidden"}`, children: [_jsxs("div", { className: "w-9/10 border-2 border-black p-2 h-80 relative", children: [_jsx("div", { className: "grid grid-cols-2", children: Object.entries(setting).map(([key, value]) => (_jsxs("div", { className: "text-base font-bold flex gap-2", children: [_jsxs("div", { className: "w-16", children: [value["label"], ":"] }), _jsx(HTMLElement, { type: value["type"], value: tempData[key], options: value["options"], onChange: (value) => setTempData({
-                                            ...tempData,
-                                            [key]: value,
-                                        }) })] }, key))) }), _jsx("div", { className: "absolute bottom-2 right-2 flex justify-end gap-2", children: buttons?.map(([title, onClick]) => (_jsx("button", { onClick: onClick, className: "px-2 py-1 bg-blue-500 text-white", children: title }, title))) })] }), _jsx("div", { className: "border-2 border-black w-9/10 p-2 h-48 overflow-y-scroll", children: logs?.map((log, i) => (_jsx("div", { className: "text-base flex gap-2", children: prints?.map((print) => (_jsx("div", { className: "", children: log[print] }, print))) }, i))) }), _jsx("button", { onClick: () => {
-                        clearTempData();
-                        return removeView("sideMenu");
-                    }, className: "absolute left-0 top-2/5 text-3xl font-bold", children: ">" })] }) }));
-}

package/menu/widget/HTMLElement.d.ts

@@ -1,8 +0,0 @@
-import { Dispatch } from "react";
-import { HTMLElementType } from "../../interface";
-export default function HTMLElement({ type, value, options, onChange, }: {
-    type: HTMLElementType;
-    value: string | number;
-    options?: [string, string][];
-    onChange?: Dispatch<string>;
-}): import("react/jsx-runtime").JSX.Element | undefined;

package/menu/widget/HTMLElement.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function HTMLElement({ type, value, options, onChange, }) {
-    if (type === "text")
-        return _jsx("div", { children: value });
-    if (type === "input")
-        return (_jsx("input", { className: "w-32", value: value, onChange: (e) => onChange?.(e.target.value) }));
-    if (type === "select")
-        return (_jsx("select", { value: value, onChange: (e) => onChange?.(e.target.value), children: options?.map(([value, label]) => (_jsx("option", { value: value, children: label }, value))) }));
-}

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

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

package/overlay/template/Overlay.design.js

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

package/overlay/widget/Overlay.d.ts

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

package/overlay/widget/Overlay.js

@@ -1,17 +0,0 @@
-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" }) })));
-}