@edu-tosel/design 1.0.45 → 1.0.47

package/interface/Property.d.ts

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction } from "react";
-import { Replace } from "./Widget";
+import { Replace } from "./Action";
 import { HTMLLabelElement } from "./HTMLElement";
 /**
  * State type for the React component
@@ -27,7 +27,7 @@ export type State<T> = [T, StateAction<T>];
  * @property {"full"} full - Full size
  */
 export type ImageSize = "sub" | "full";
-export type Size = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "auto";
+export type Size = "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "auto";
 /**
  * Image size type
  * @enum {string}
@@ -42,7 +42,7 @@ export interface Button extends HTMLLabelElement {
 export type FileRead = string | ArrayBuffer | null;
 export type Disabled = boolean | OnClick;
 export type Scripts = {
-    script: string;
+    script?: string;
     subscript?: string | string[];
 };
 export type Titles = {
@@ -55,7 +55,7 @@ export type Titles = {
 };
 export type DataSet<T = any> = {
     items?: T[];
-    renderItem: (item: T) => React.ReactNode;
+    renderItem: (item: T, index?: number) => React.ReactNode;
     titles?: Titles;
     interaction?: React.ReactNode;
     onClick?: OnClick<T>;

package/interface/Shelf.d.ts

@@ -1,5 +1,5 @@
 import { Button, Titles } from "./Property";
-import { EventsProps } from "./Widget";
+import { EventsProps } from "./Action";
 interface Options<T> {
     titleSize?: string;
     subtitleSize?: string;
@@ -11,7 +11,7 @@ interface Options<T> {
 }
 export interface ShelfProps<T> {
     children: React.ReactNode;
-    widgets?: EventsProps & {
+    action?: EventsProps & {
         tabs?: Button[];
     };
     titles?: Titles;

package/interface/UtilityType.d.ts

@@ -0,0 +1,2 @@
+type Flexify<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+export type { Flexify };

package/interface/UtilityType.js

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

package/interface/index.d.ts

@@ -1,7 +1,8 @@
+export * from "./Action";
 export * from "./Card";
 export * from "./HTMLElement";
 export * from "./Layout";
 export * from "./Overlay";
 export * from "./Property";
 export * from "./Shelf";
-export * from "./Widget";
+export * from "./widget";

package/interface/index.js

@@ -1,7 +1,8 @@
+export * from "./Action";
 export * from "./Card";
 export * from "./HTMLElement";
 export * from "./Layout";
 export * from "./Overlay";
 export * from "./Property";
 export * from "./Shelf";
-export * from "./Widget";
+export * from "./widget";

package/interface/widget/Switch.d.ts

@@ -0,0 +1,19 @@
+import { Size, State } from "../Property";
+interface Switch<T> {
+    state: State<T>;
+    values: T[];
+}
+export type Display = Record<string, {
+    title: string;
+    icon?: string;
+}>;
+interface Options {
+    size?: Size;
+    text?: string;
+    className?: string;
+}
+export interface SwitchProps<T> extends Switch<T> {
+    display?: Display;
+    options?: Options;
+}
+export {};

package/interface/widget/Switch.js

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

package/interface/widget/index.d.ts

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

package/interface/widget/index.js

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

package/layout/design/DataField.design.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cn } from "../../util";
-import { useWidgetStore } from "../../store";
+import { useActionStore } from "../../store";
 export default function DataFieldDesign({ id, dataField, options, }) {
-    const { order, setOrder } = useWidgetStore();
+    const { order, setOrder } = useActionStore();
     const { padding, position } = options ?? {};
     const orders = order[id] ?? [];
     const container = {

package/layout/design/Row.design.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { cn } from "../../util";
-import { Label } from "../../html";
+import { Label } from "../../widget";
 export default function RowDesign({ item, dataField, options, onClick, buttons, }) {
     const { size, padding, text, noHover, className, isPointer } = options ?? {};
     const id = useId();

package/layout/index.d.ts

@@ -1,4 +1,4 @@
-export { default as Events } from "./template/Events";
+export { default as Action } from "./template/Action";
 export * from "./template/Dashboard";
 export { default as Promotion } from "./template/Promotion";
 export { default as Sign } from "./template/Sign";
@@ -6,3 +6,4 @@ export { default as DataField } from "./template/DataField";
 export { default as Gallery } from "./template/Gallery";
 export { default as Row } from "./template/Row";
 export { default as Shelf } from "./template/Shelf";
+export { default as Tab } from "./template/Tab";

package/layout/index.js

@@ -1,4 +1,4 @@
-export { default as Events } from "./template/Events";
+export { default as Action } from "./template/Action";
 export * from "./template/Dashboard";
 export { default as Promotion } from "./template/Promotion";
 export { default as Sign } from "./template/Sign";
@@ -6,3 +6,4 @@ export { default as DataField } from "./template/DataField";
 export { default as Gallery } from "./template/Gallery";
 export { default as Row } from "./template/Row";
 export { default as Shelf } from "./template/Shelf";
+export { default as Tab } from "./template/Tab";

package/layout/template/Action.d.ts

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

package/layout/template/{Events.js → Action.js}

@@ -1,9 +1,9 @@
 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) => {
+import { useActionStore } from "../../store";
+function Show({ actions, children }) {
+    const { events } = useActionStore();
+    return (_jsxs(_Fragment, { children: [children, actions?.map(([flag, Component], index) => {
                 const isVisible = typeof flag === "boolean"
                     ? flag
                     : events?.some(({ event }) => event === flag);
@@ -14,7 +14,7 @@ function Show({ widgets, children }) {
                 };
                 if (React.isValidElement(Component)) {
                     const ComponentWithVisibility = React.cloneElement(Component, {
-                        action: {
+                        showAction: {
                             event: event(),
                             isVisible,
                         },
@@ -24,12 +24,12 @@ function Show({ widgets, children }) {
                 return null;
             })] }));
 }
-function Replace({ widgets, children }) {
-    const { events } = useWidgetStore();
-    if (!widgets)
+function Replace({ actions, children }) {
+    const { events } = useActionStore();
+    if (!actions)
         return _jsx(_Fragment, { children: children });
-    const trueComponents = widgets
-        .filter(([widget]) => widget)
+    const trueComponents = actions
+        .filter(([action]) => action)
         .map(([flag, Component], index) => {
         if (typeof flag === "string") {
             return events?.some(({ event }) => event === flag) ? (_jsx(_Fragment, { children: Component })) : null;
@@ -39,8 +39,8 @@ function Replace({ widgets, children }) {
         .filter((component) => component !== null);
     return _jsx(_Fragment, { children: trueComponents.length > 0 ? trueComponents : children });
 }
-const Events = {
+const Action = {
     Show,
     Replace,
 };
-export default Events;
+export default Action;

package/layout/template/Gallery.d.ts

@@ -1,6 +1,6 @@
 import { Button, EventsProps } from "../../interface";
-export default function Gallery({ widgets, children, options, }: {
-    widgets?: EventsProps & {
+export default function Gallery({ action, children, options, }: {
+    action: EventsProps & {
         tabs?: Button[];
     };
     children: React.ReactNode;

package/layout/template/Gallery.js

@@ -1,7 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Events from "./Events";
-import Tab from "../design/Tab.design";
-export default function Gallery({ widgets, children, options, }) {
+import Action from "./Action";
+import Tab from "./Tab";
+import { cn } from "../../util";
+export default function Gallery({ action, children, options, }) {
     const { tabTextColor } = options ?? {};
-    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, textColor: tabTextColor })] }));
+    const tabBox = {
+        positions: "xl:absolute xl:-bottom-18 xl:left-0 z-5",
+    };
+    return (_jsxs("div", { className: "relative w-full flex", children: [_jsx(Action.Replace, { actions: action?.replaces, children: _jsx(Action.Show, { actions: action?.shows, children: children }) }), action?.tabs && (_jsx(Tab, { tabs: action?.tabs, options: {
+                    className: cn(tabBox),
+                    text: tabTextColor,
+                } }))] }));
 }

package/layout/template/Shelf.js

@@ -11,7 +11,9 @@ function Shelf({ titles, debug, children }) {
     const container = {
         displays: "inline-flex flex-col gap-12",
     };
-    return (_jsx(ShelfDesign, { titles: titles, className: cn(container), debug: debug, children: children }));
+    return (_jsx(ShelfDesign, { titles: titles, className: cn(container), debug: debug, options: {
+            titleSize: "text-lg xl:text-2xl",
+        }, children: children }));
 }
 function Wrap({ className, titles, children, debug, options, }) {
     const container = {

package/layout/template/Tab.d.ts

@@ -0,0 +1,16 @@
+import { Button, Size, State } from "../../interface";
+interface Options {
+    background?: string;
+    text?: string;
+    className?: string;
+    width?: Size;
+    height?: Size;
+}
+export default function Tab({ tabs, options, state, }: {
+    tabs: (Button & {
+        isStatic?: boolean;
+    })[];
+    options?: Options;
+    state?: State<boolean[]>;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/Tab.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../util";
+const widthSize = {
+    md: "w-25",
+    lg: "w-32",
+};
+const heightSize = {
+    md: "h-7.5",
+    lg: "h-9",
+};
+export default function Tab({ tabs, options, state, }) {
+    const { className, background, text, width, height } = options ?? {};
+    const [tabsSelection, setTabsSelection] = state
+        ? state
+        : useState(tabs.map((_, i) => i === 0));
+    const container = {
+        className,
+        positions: "absolute",
+        displays: "hidden xl:flex xl:items-center xl:gap-2.5",
+        sizes: "w-auto",
+        paddings: "p-2.5",
+        backgrounds: background ?? "bg-white/30",
+        styles: "rounded-xl ",
+    };
+    const button = {
+        styles: "rounded-md duration-500 ",
+        sizes: `${heightSize[height ?? "lg"]} ${widthSize[width ?? "lg"]}`,
+        font: text ?? "text-green-dark",
+    };
+    return (_jsx("div", { className: cn(container), children: tabs.map(({ title, onClick, isStatic, options }, index) => (_jsx("button", { onClick: () => {
+                !isStatic &&
+                    setTabsSelection(tabsSelection.map((_, i) => i === index));
+                return onClick && onClick();
+            }, className: cn(button, `${!isStatic && tabsSelection[index] && "bg-white rounded-2xl"}`, `${isStatic &&
+                `${options?.background ?? "bg-green-dark"} ${options?.text ?? "text-white"} `}`), children: title }, title))) }));
+}

package/layout/widget/dashboard/Header.js

@@ -1,13 +1,13 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn, gradient } from "../../../util";
-import { useWidgetStore } from "../../../store";
+import { useActionStore } from "../../../store";
 import Menu from "./Menu";
-import { Events } from "../..";
+import { Action } from "../..";
 import Notification from "./Notification";
 import SVG from "../../../asset/SVG";
-import { Label } from "../../../html";
+import { Label } from "../../../widget";
 export function Header({ title, logo, notification, menu, options, }) {
-    const { setView, setIsOwn } = useWidgetStore();
+    const { setView, setIsOwn } = useActionStore();
     const { notifications, flag, onClick, color } = notification;
     const { text, background, className } = options ?? {};
     const container = {
@@ -19,7 +19,7 @@ export function Header({ title, logo, notification, menu, options, }) {
         styles: "px-5 xl:px-8 2xl:px-16 box-shadow",
         className,
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex h-12 items-center gap-8 xl:gap-24 2xl:gap-26", children: [logo ? _jsx(_Fragment, { children: logo }) : _jsx("div", { className: "text-2xl", children: "TOSEL" }), _jsx("div", { className: "hidden lg:flex text-3xl font-pretendard-bold", children: title })] }), _jsx("div", { className: "relative flex gap-5.25", children: _jsxs(Events.Show, { widgets: [
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex h-12 items-center gap-8 xl:gap-24 2xl:gap-26", children: [logo ? _jsx(_Fragment, { children: logo }) : _jsx("div", { className: "text-2xl", children: "TOSEL" }), _jsx("div", { className: "hidden lg:flex text-3xl font-pretendard-bold", children: title })] }), _jsx("div", { className: "relative flex gap-5.25", children: _jsxs(Action.Show, { actions: [
                         ["notification", _jsx(Notification, { notifications: notifications })],
                         [menu ? "menu" : false, menu && _jsx(Menu, { ...menu })],
                     ], children: [_jsx(SVG.Notification, { flag: flag, onClick: () => {

package/layout/widget/dashboard/Layout.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useEffect } from "react";
 import { Header } from "./Header";
 import { cn } from "../../../util";
-import { useWidgetStore } from "../../../store";
+import { useActionStore } from "../../../store";
 import { NavigationContainer } from "./Navigation";
 export default function Layout({ header, navigations, children, options, }) {
-    const { isDark, flag, setFlag, isOwn, setIsOwn, clearView } = useWidgetStore();
+    const { isDark, flag, setFlag, isOwn, setIsOwn, clearView } = useActionStore();
     const { title, options: headerOptions, logo, notification, menu } = header;
     const { background } = options ?? {};
     useEffect(() => {

package/layout/widget/dashboard/Menu.d.ts

@@ -1,2 +1,2 @@
 import { MenuProps } from "../../../interface";
-export default function Menu({ action, profile, input, onClick }: MenuProps): JSX.Element;
+export default function Menu({ showAction, profile, input, onClick, }: MenuProps): JSX.Element;

package/layout/widget/dashboard/Menu.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTransition, animated } from "react-spring";
 import { cn, gradient } from "../../../util";
-import { useWidgetStore } from "../../../store";
-import { Label } from "../../../html";
-export default function Menu({ action, profile, input, onClick }) {
-    const { isVisible } = action ?? {};
-    const { setIsOwn, removeModal } = useWidgetStore();
+import { useActionStore } from "../../../store";
+import { Label } from "../../../widget";
+export default function Menu({ showAction, profile, input, onClick, }) {
+    const { isVisible } = showAction ?? {};
+    const { setIsOwn, removeModal } = useActionStore();
     const container = {
         displays: "flex flex-col p-2.5",
         positions: "absolute top-0 right-0 z-45 ",

package/layout/widget/dashboard/Notification.d.ts

@@ -1,2 +1,2 @@
 import { DashboardNotification } from "../../../interface";
-export default function Notification({ action, notifications, }: DashboardNotification): JSX.Element;
+export default function Notification({ showAction, notifications, }: DashboardNotification): JSX.Element;

package/layout/widget/dashboard/Notification.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTransition, animated } from "react-spring";
 import { cn } from "../../../util";
-import Events from "../../template/Events";
-export default function Notification({ action, notifications, }) {
-    const { isVisible } = action ?? {};
+import Action from "../../template/Action";
+export default function Notification({ showAction, notifications, }) {
+    const { isVisible } = showAction ?? {};
     const container = {
         positions: "absolute right-12 z-45",
         displays: "flex flex-col ",
@@ -32,7 +32,7 @@ export default function Notification({ action, notifications, }) {
         leave: { opacity: 0 },
         config: { duration: 200 },
     });
-    return transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(container), children: [_jsx("div", { className: cn(headerBox), children: "\uC0C8 \uC54C\uB9BC" }), _jsx("div", { className: cn(body), children: _jsx(Events.Replace, { widgets: [
+    return transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(container), children: [_jsx("div", { className: cn(headerBox), children: "\uC0C8 \uC54C\uB9BC" }), _jsx("div", { className: cn(body), children: _jsx(Action.Replace, { actions: [
                         [notifications?.length === 0, _jsx("div", { children: "\uC54C\uB9BC\uC774 \uC5C6\uC2B5\uB2C8\uB2E4" })],
                     ], children: notifications?.map(({ id, script, link }) => (_jsx("div", { onClick: () => {
                             link && window.open(link, "_blank");

package/layout/widget/dashboard/buttonClassNames.js

@@ -1,8 +1,8 @@
-import { useWidgetStore } from "../../../store";
+import { useActionStore } from "../../../store";
 import { cn } from "../../../util";
 import checkPathMatch from "../../../util/checkPathMatch";
 const buttonClassNames = (href, nowPath, color) => {
-    const { isDark } = useWidgetStore();
+    const { isDark } = useActionStore();
     const [bg, [text, selectedText]] = color ?? ["white", ["white", "black"]];
     const container = {
         displays: "flex flex-row items-center justify-center xl:justify-start gap-2.5",

package/layout/widget/dashboard/mypage/Layout.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useEffect } from "react";
 import { Header } from "../Header";
 import { cn } from "../../../../util";
-import { useWidgetStore } from "../../../../store";
+import { useActionStore } from "../../../../store";
 import Profile from "./Profile";
 import { NavigationContainer } from "../Navigation";
 export default function MyPageLayout({ header, profile, navigations, children, options, }) {
-    const { isDark, flag, setFlag, isOwn, setIsOwn, clearView } = useWidgetStore();
+    const { isDark, flag, setFlag, isOwn, setIsOwn, clearView } = useActionStore();
     const { title, options: headerOptions, logo, notification } = header;
     const { background } = options ?? {};
     useEffect(() => {

package/layout/widget/dashboard/mypage/Profile.js

@@ -3,7 +3,7 @@ import { useId, useState } from "react";
 import { animated, useTransition } from "react-spring";
 import { cn, gradient } from "../../../../util";
 import Card from "../../../../card/design/Card.design";
-import { Label, Toggle } from "../../../../html";
+import { Label, Toggle } from "../../../../widget";
 import SVG from "../../../../asset/SVG";
 function Profile({ name, birthday, image, modify }) {
     const [hover, setHover] = useState(false);

package/layout/widget/sign/WithTitle.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Input } from "../../../html";
+import { Input } from "../../../widget";
 function WithTitle({ title, placeholder, state, flag, type, }) {
     return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "leading-none", children: title }), _jsx(Input.LG, { placeholder: placeholder, state: state, flag: flag, type: type })] }));
 }

package/modal/design/ConfirmModal.design.d.ts

@@ -1,2 +1,2 @@
 import { ConfirmModalProps } from "../../interface/Modal";
-export default function ConfirmModalDesign({ titles, action, buttons, children, options, }: ConfirmModalProps): import("react/jsx-runtime").JSX.Element;
+export default function ConfirmModalDesign({ titles, showAction, buttons, children, options, }: ConfirmModalProps): import("react/jsx-runtime").JSX.Element;

package/modal/design/ConfirmModal.design.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Label } from "../../html";
+import { Label } from "../../widget";
 import { cn } from "../../util";
 import ModalDesign from "../design/Modal.design";
-export default function ConfirmModalDesign({ titles, action, buttons, children, options, }) {
+export default function ConfirmModalDesign({ titles, showAction, buttons, children, options, }) {
     const container = {
         displays: "flex flex-col",
     };
@@ -10,7 +10,7 @@ export default function ConfirmModalDesign({ titles, action, buttons, children,
         positions: "absolute bottom-5 left-5",
         displays: "flex gap-2.5",
     };
-    return (_jsx(ModalDesign, { titles: titles, action: action, options: options, children: _jsxs("div", { className: cn(container), children: [children, _jsx("div", { className: cn(buttonBox), children: buttons.map(({ title, onClick, options }) => (_jsx(Label.Button, { title: title, onClick: onClick, options: {
+    return (_jsx(ModalDesign, { titles: titles, showAction: showAction, options: options, children: _jsxs("div", { className: cn(container), children: [children, _jsx("div", { className: cn(buttonBox), children: buttons.map(({ title, onClick, options }) => (_jsx(Label.Button, { title: title, onClick: onClick, options: {
                             ...options,
                             width: "lg",
                             height: "sm",

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

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

package/modal/design/Modal.design.js

@@ -1,7 +1,7 @@
 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 { useActionStore } from "../../store";
 import { cn } from "../../util";
 import isDebug from "../../util/isDebug";
 import { useEffect, useState } from "react";
@@ -25,24 +25,25 @@ const heightSize = {
     "2xl": "max-w-176",
     full: "h-full",
 };
-export default function ModalDesign({ titles, action, children, options, debug, }) {
-    const { isVisible, event } = action ?? {};
-    const { width, height, noClose } = options ?? {};
+export default function ModalDesign({ titles, showAction, children, options, debug, }) {
+    const { isVisible, event } = showAction ?? {};
+    const { position, width, height, noClose, noBackground, isShadow } = options ?? {};
     const [detection, setDetection] = useState(null);
-    const { setIsOwn, removeModal } = useWidgetStore();
+    const { setIsOwn, removeModal } = useActionStore();
     useEffect(() => {
         setDetection(document.getElementById("portal"));
     }, []);
     const background = {
         positions: "z-50 fixed top-0 left-0",
-        displays: "flex items-center justify-center ",
+        displays: position ?? "flex items-center justify-center ",
         sizes: "min-h-screen w-full ",
-        styles: "bg-black/10 backdrop-blur-sm ",
+        styles: !noBackground && "bg-black/10 backdrop-blur-sm ",
     };
     const container = {
         paddings: "p-5",
         sizes: `${heightSize[height ?? "lg"]} ${widthSize[width ?? "md"]}`,
         styles: "rounded-xl bg-white relative overflow-hidden",
+        shadows: isShadow && "box-shadow",
         debug: debug && isDebug(`border-2 border-${debug}`),
     };
     const titleBox = {

package/modal/template/Alert.d.ts

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

package/modal/template/Alert.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ModalDesign from "../design/Modal.design";
-export default function Alert({ titles, action, scripts, options, }) {
+export default function Alert({ titles, showAction, scripts, options, }) {
     const { script } = scripts ?? {};
     const { buttons } = options ?? {};
-    return (_jsx(ModalDesign, { titles: titles, action: action, className: "pt-18 px-25", options: { buttons }, children: _jsx("div", { className: "flex flex-col gap-3", children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsx("div", { className: "h-2 w-14 rounded-full bg-pale-lavender" }), _jsx("div", { className: "text-xl font-pretendard-bold", children: script })] }) }) }));
+    return (_jsx(ModalDesign, { titles: titles, showAction: showAction, className: "pt-18 px-25", options: { buttons }, children: _jsx("div", { className: "flex flex-col gap-3", children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsx("div", { className: "h-2 w-14 rounded-full bg-pale-lavender" }), _jsx("div", { className: "text-xl font-pretendard-bold", children: script })] }) }) }));
 }

package/modal/template/ConfirmModal/Input.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ConfirmModal from "../../design/ConfirmModal.design";
-import { Input as _Input } from "../../../html";
+import { Input as _Input } from "../../../widget";
 export default function Input(props) {
     const { inputs } = props;
     return (_jsx(ConfirmModal, { ...props, children: _jsx("div", { className: "flex flex-col gap-3", children: inputs.map((input, index) => (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "font-pretendard-bold", children: input.title }), _jsx(_Input.LG, { ...input })] }, index))) }) }));

package/modal/template/ConfirmModal/Switch.d.ts

@@ -0,0 +1,11 @@
+import { SwitchProps } from "../../../interface";
+import { ConfirmModalProps } from "../../../interface/Modal";
+interface SwitchModalProps<T> extends ConfirmModalProps {
+    switch: SwitchProps<T>;
+}
+declare function SwitchModal<T>(props: SwitchModalProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace SwitchModal {
+    var Handle: typeof SwitchModalHandle;
+}
+declare function SwitchModalHandle<T>(props: Omit<SwitchModalProps<T>, "display">): import("react/jsx-runtime").JSX.Element;
+export default SwitchModal;

package/modal/template/ConfirmModal/Switch.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Switch } from "../../../widget";
+import ConfirmModalDesign from "../../design/ConfirmModal.design";
+import { cn } from "../../../util";
+function SwitchModalDesign(props) {
+    const container = {
+        displays: "flex flex-col justify-center items-center",
+        sizes: "w-full",
+    };
+    return (_jsx(ConfirmModalDesign, { ...props, children: _jsx("div", { className: cn(container), children: props.children }) }));
+}
+function SwitchModal(props) {
+    return (_jsx(SwitchModalDesign, { ...props, children: _jsxs(_Fragment, { children: [_jsx(Switch, { ...props.switch }), props.children] }) }));
+}
+function SwitchModalHandle(props) {
+    return (_jsx(SwitchModalDesign, { ...props, children: _jsxs(_Fragment, { children: [_jsx(Switch.Handle, { ...props.switch }), props.children] }) }));
+}
+SwitchModal.Handle = SwitchModalHandle;
+export default SwitchModal;

package/modal/template/ConfirmModal/Tag.d.ts

@@ -0,0 +1,13 @@
+import { ConfirmModalProps } from "../../../interface/Modal";
+import { State } from "../../../interface";
+interface TagModalProps<T> extends Omit<ConfirmModalProps, "children"> {
+    tag: {
+        state: State<T[]>;
+        tags: [T, string][];
+        options?: {
+            selectHow?: "one" | "plural";
+        };
+    };
+}
+export default function Tag<T>(props: TagModalProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};