@edu-tosel/design 0.1.8 → 1.0.0

package/board/Board.d.ts

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

package/board/Board.js

@@ -1,9 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export function Board({ children, options, }) {
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Board({ children, widget, options }) {
     const { height } = options ?? {};
+    const { events, widgets } = widget ?? {};
     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 });
+    return (_jsxs("div", { className: classNames + "", children: [children, _jsx(_Fragment, { children: widgets?.map(([widgetEvent, Component]) => {
+                    return events?.some(({ event }) => event === widgetEvent) ? (_jsx(_Fragment, { children: Component })) : null;
+                }) })] }));
 }

package/board/CanvasBoard.d.ts

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

package/board/CanvasBoard.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../util";
 import { Board } from "./Board";
-export function CanvasBoard({ children, options, }) {
+export function CanvasBoard({ children, widget, 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 paddings = "pb-36 xl:pb-12 px-2 xs:px-4 xl:pl-8 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 }) }));
+    return (_jsx(Board, { widget: widget, options: { height }, children: _jsx("div", { className: cn(layouts, sizes, paddings, styles), children: children }) }));
 }

package/card/Card.d.ts

@@ -1,15 +1,3 @@
-/// <reference types="react" />
 import "../globals.css";
-export type Size = "small" | "medium" | "large" | "xLarge";
-export declare function Card({ children, options, }: {
-    children: React.ReactNode;
-    options?: {
-        height?: Size;
-        width?: Size;
-        text?: {
-            size?: string;
-            color?: string;
-        };
-        onClick?: () => unknown | (() => Promise<unknown>);
-    };
-}): import("react/jsx-runtime").JSX.Element;
+import { CardProps } from "../interface/Card";
+export declare function Card({ children, options }: CardProps): import("react/jsx-runtime").JSX.Element;

package/card/Card.js

@@ -2,23 +2,25 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import "../globals.css";
 import { cn } from "../util";
 const widthSize = {
-    small: "md:w-60",
-    medium: "md:w-90",
-    large: "md:w-135",
-    xLarge: "md:w-225",
+    xs: "",
+    sm: "md:w-60",
+    md: "md:w-90",
+    lg: "md:w-135",
+    xl: "md:w-225",
 };
 const heightSize = {
-    small: "h-72 sm:h-48",
-    medium: "h-72 sm:h-48",
-    large: "h-80",
-    xLarge: "h-80",
+    xs: "",
+    sm: "h-72 sm:h-48",
+    md: "h-72 sm:h-48",
+    lg: "h-80",
+    xl: "h-125",
 };
-export function Card({ children, options, }) {
+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"]}`,
+        `${heightSize[height ?? "sm"]}`,
+        `w-full ${widthSize[width ?? "sm"]}`,
     ].join(" ");
     const positions = "relative";
     const styles = [

package/card/ChartCard.d.ts

@@ -1,20 +1,3 @@
 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;
-    }[];
-}
+import { ChartCardProps } from "../interface/Card";
 export declare function ChartCard({ data, xAxis, yAxis, lines, bars, areas, }: ChartCardProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/card/ChartCard.js

@@ -3,5 +3,5 @@ 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)))] }) }) }));
+    return (_jsx(Card, { options: { width: "xl", height: "lg", 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: "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] : "" })] })] })] }) }));
+    return (_jsx(Card, { options: { width: "sm" }, 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

@@ -1,12 +1,3 @@
 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;
+import { TableCardProps } from "../interface/Card";
+export declare function TableCard({ data, fields, sizes, options }: TableCardProps): import("react/jsx-runtime").JSX.Element;

package/card/TableCard.js

@@ -1,7 +1,7 @@
 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, }) {
+export function TableCard({ data, fields, sizes, options }) {
     const { color } = options ?? {};
     const { background: bgColor, text: textColor } = color ?? {};
     const keys = Object.keys(fields);
@@ -9,5 +9,5 @@ export function TableCard({ data, fields, sizes, options, }) {
         `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)))] }) }));
+    return (_jsx(Card, { options: { width: "lg", height: "lg" }, 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

@@ -1,19 +1,2 @@
-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 {};
+import { TrumpCardProps } from "../interface/Card";
+export declare function TrumpCard({ titles, options }: TrumpCardProps): import("react/jsx-runtime").JSX.Element;

package/card/TrumpCard.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LineBreaks } from "../text";
 import { Card } from "./Card";
-export function TrumpCard({ titles, options, }) {
+export function TrumpCard({ titles, options }) {
     const { title, subTitle, color: titleColor } = titles;
     const { onClick, width, image, subButton } = options ?? {};
     const [buttonText, buttonBgColor, buttonAction] = subButton ?? [

package/deck/Deck.js

@@ -3,10 +3,10 @@ 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} `,
+        `flex sm:w-full flex-col h-${height ?? "auto"} gap-${gapTitle ?? 4} `,
     ].join(" ");
     const bodyClassNames = [
-        `flex flex-col sm:flex-row `,
+        `flex flex-col sm:flex-row sm:w-full `,
         `gap-x-${gapX ?? 5} gap-y-${gapY ?? 5}`,
         "duration-500",
     ].join(" ");

package/globals.css

@@ -4,22 +4,22 @@
 
 @font-face {
   font-family: "Pretendard-Medium";
-  src: url("/fonts/Pretendard-Medium.otf") format("opentype");
+  src: url("../src/asset/fonts/Pretendard-Medium.otf") format("opentype");
 }
 
 @font-face {
   font-family: "Kostar";
-  src: url("/fonts/Kostar.ttf") format("truetype");
+  src: url("../src/asset/fonts/Kostar.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "NicoMoji";
-  src: url("/fonts/NicoMoji.ttf") format("truetype");
+  src: url("../src/asset/fonts/NicoMoji.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "Megrim";
-  src: url("/fonts/Megrim.ttf") format("trueType");
+  src: url("../src/asset/fonts/Megrim.ttf") format("trueType");
 }
 
 ::-webkit-scrollbar {
@@ -38,3 +38,30 @@
 .box-shadow {
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
 }
+
+.x-shape {
+  position: relative;
+  width: 0.83625rem;
+  height: 0.83625rem;
+}
+
+.x-shape::before,
+.x-shape::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2.5px;
+  border-radius: 2px;
+  height: 100%;
+  background-color: white;
+  transform-origin: center;
+}
+
+.x-shape::before {
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.x-shape::after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}

package/interface/Board.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { WidgetEvent } from "./Widget";
+export interface BoardProps {
+    children: React.ReactNode;
+    widget?: {
+        events: WidgetEvent[];
+        widgets: [[string, React.ReactNode]];
+    };
+    options?: {
+        height?: number;
+    };
+}

package/interface/Board.js

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

package/interface/Card.d.ts

@@ -0,0 +1,70 @@
+/// <reference types="react" />
+import { ImageSize, Size } from "./Property";
+/**
+ * CardProps is an interface.
+ * @interface CardProps
+ * @property {React.ReactNode} children
+ * @property {object} options
+ * @property {Size} options.height
+ * @property {Size} options.width
+ * @property {object} options.text
+ * @property {string} options.text.size
+ * @property {string} options.text.color
+ * @property {() => unknown | (() => Promise<unknown>)} options.onClick
+ */
+export interface CardProps {
+    children: React.ReactNode;
+    options?: {
+        height?: Size;
+        width?: Size;
+        text?: {
+            size?: string;
+            color?: string;
+        };
+        onClick?: () => unknown | (() => Promise<unknown>);
+    };
+}
+export 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 interface TableCardProps {
+    data: Record<string, string | number>[];
+    fields: Record<string, string>;
+    sizes: Record<string, string>;
+    options?: {
+        color?: {
+            background: string;
+            text: string;
+        };
+    };
+}
+export interface TrumpCardProps {
+    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>)];
+    };
+}

package/interface/Card.js

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

package/interface/Modal.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { Button, Scripts, Size } from "./Property";
+export interface ModalProps {
+    children: React.ReactNode;
+    options?: {
+        width?: Size;
+        height?: Size;
+        padding?: Record<string, number>;
+        buttons?: Button[];
+    };
+}
+export interface AlertModalProps {
+    title: string;
+    scripts: Scripts;
+    options?: {
+        buttons?: Button[];
+    };
+}

package/interface/Modal.js

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

package/interface/Property.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Size type
+ * @enum {string}
+ * @readonly
+ * @description - Size type for the component
+ * @property {"xs"} xs - Extra small size
+ * @property {"sm"} sm - Small size
+ * @property {"md"} md - Medium size
+ * @property {"lg"} lg - Large size
+ * @property {"xl"} xl - Extra large size
+ */
+export type Size = "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * Image size type
+ * @enum {string}
+ * @readonly
+ * @description - Size type for the image
+ * @property {"sub"} sub - Sub size
+ * @property {"full"} full - Full size
+ */
+export type ImageSize = "sub" | "full";
+export type OnClick = () => unknown | Promise<unknown>;
+export type Button = [string, OnClick];
+export type Scripts = {
+    script: string;
+    subScript?: string;
+};
+export type Titles = {
+    title: string;
+    subTitle?: string[];
+    color?: string;
+};

package/interface/Property.js

@@ -0,0 +1,12 @@
+/**
+ * Size type
+ * @enum {string}
+ * @readonly
+ * @description - Size type for the component
+ * @property {"xs"} xs - Extra small size
+ * @property {"sm"} sm - Small size
+ * @property {"md"} md - Medium size
+ * @property {"lg"} lg - Large size
+ * @property {"xl"} xl - Extra large size
+ */
+export {};

package/interface/Widget.d.ts

@@ -0,0 +1,4 @@
+export interface WidgetEvent {
+    event: string;
+    type: "view" | "modal";
+}

package/interface/Widget.js

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

package/interface/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Property";
+export * from "./Widget";
+export * from "./Board";

package/interface/index.js

@@ -0,0 +1,3 @@
+export * from "./Property";
+export * from "./Widget";
+export * from "./Board";

package/modal/AlertModal.d.ts

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

package/modal/AlertModal.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { col } from "../util";
+import { Modal } from "./Modal";
+export default function AlertModal({ title, scripts, options, }) {
+    const { script, subScript } = scripts ?? {};
+    const { buttons } = options ?? {};
+    return (_jsx(Modal, { options: { buttons }, children: _jsx("div", { className: col(3) + "pl-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: script })] }) }) }));
+}

package/modal/Modal.d.ts

@@ -1,8 +1,2 @@
-/// <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;
+import { ModalProps } from "../interface/Modal";
+export declare function Modal({ children, options }: ModalProps): import("react/jsx-runtime").JSX.Element;

package/modal/Modal.js

@@ -1,21 +1,26 @@
-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", {}) }));
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useWidgetStore } from "../store";
+import { absolute, cn } from "../util";
+const background = "z-50 flex min-h-screen w-full items-center justify-center bg-black/10 backdrop-blur-sm fixed top-0 left-0";
+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-176",
+};
+const heightSize = {
+    xs: "",
+    sm: "h-100",
+    md: "h-72 sm:h-48",
+    lg: "h-120",
+    xl: "h-180",
+};
+export function Modal({ children, options }) {
+    const { buttons, width, height } = options ?? {};
+    const { clearModal } = useWidgetStore();
+    const sizes = `${heightSize[height ?? "sm"]} ${widthSize[width ?? "md"]}`;
+    const styles = "rounded-xl bg-white relative";
+    return (_jsx("div", { className: background, children: _jsxs("div", { className: cn(sizes, styles), children: [children, _jsx(_Fragment, { children: buttons ? (_jsx("div", { className: `${absolute.br(5, 7)} flex justify-end gap-4`, children: buttons.map(([text, onClick]) => (_jsx("button", { className: "rounded-2xl bg-black px-8 py-2 text-lg font-bold text-white", onClick: onClick, children: text }, text))) })) : null }), _jsx("button", { className: absolute.tl(5, 7) +
+                        "bg-black rounded-full h-9 w-9 flex justify-center items-center", onClick: clearModal, children: _jsx("div", { className: "x-shape" }) })] }) }));
 }

package/modal/TestModal.d.ts

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

package/modal/TestModal.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal } from "./Modal";
+export default function TestModal({ children }) {
+    return (_jsx(Modal, { options: { width: "lg", height: "xl", buttons: [["gd", () => { }]] }, children: _jsx("div", { className: "pt-18 pl-25", children: children }) }));
+}

package/modal/index.d.ts

@@ -1 +1,2 @@
-export * from "./Modal";
+export { default as TestModal } from "./TestModal";
+export { default as AlertModal } from "./AlertModal";

package/modal/index.js

@@ -1 +1,2 @@
-export * from "./Modal";
+export { default as TestModal } from "./TestModal";
+export { default as AlertModal } from "./AlertModal";

package/navigation/Navigation.js

@@ -1,7 +1,7 @@
 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 [bg, text] = color ?? ["white", "black"];
     const classNames = [
         center.row(6),
         `text-${text}`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "0.1.8",
+  "version": "1.0.0",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",

package/store/index.d.ts

@@ -0,0 +1,10 @@
+import { WidgetEvent } from "../interface/Widget";
+interface WidgetProps {
+    events: WidgetEvent[];
+    setView: (prop: string) => void;
+    setModal: (prop: string) => void;
+    removeModal: (prop: string) => void;
+    clearModal: () => void;
+}
+export declare const useWidgetStore: import("zustand").UseBoundStore<import("zustand").StoreApi<WidgetProps>>;
+export {};

package/store/index.js

@@ -0,0 +1,18 @@
+import { create } from "zustand";
+export const useWidgetStore = create((set) => ({
+    events: [],
+    setView: (prop) => set((state) => ({
+        events: [...state.events, { event: prop, type: "view" }],
+    })),
+    setModal: (prop) => set((state) => ({
+        events: [...state.events, { event: prop, type: "modal" }],
+    })),
+    removeModal: (prop) => {
+        set((state) => ({
+            events: state.events.filter(({ event }) => event !== prop),
+        }));
+    },
+    clearModal: () => set((state) => ({
+        events: state.events.filter(({ type }) => type !== "modal"),
+    })),
+}));

package/tailwind.config.ts

@@ -275,8 +275,9 @@ export default {
         xs: "480px",
         sm: "640px",
         md: "768px", // IPad Mini
-        ml: "964px", // IPad Air, IPad Pro 11.
+        xm: "964px", // IPad Air, IPad Pro 11.
         lg: "1024px", // IPad Mini Horizontal Viewport
+        ml: "1160px", // IPad Air, IPad Pro 11.
         xl: "1280px",
         "2xl": "1536px",
       },

package/version.txt

@@ -1 +1 @@
-0.1.8
+1.0.0