@edu-tosel/design 1.0.85 → 1.0.87

package/card/design/RollCard.design.js

@@ -24,7 +24,7 @@ export default function RollCardDesign({ titles, state, disabled, isFixed, child
     };
     return (_jsxs(Card, { option: {
             width: "2xl",
-            height: !isFixed && isOpen ? "xs" : "3xs",
+            height: !isFixed && isOpen ? "2xs" : "4xs",
             background: isDisabled || flag ? "bg-green-dark/10" : "bg-white",
             className: "p-7.5 flex flex-col gap-y-6",
         }, children: [_jsxs(Shelf.Row, { className: "justify-between", children: [_jsxs(Shelf.Col, { className: "gap-y-2.5", children: [_jsxs(Shelf.Row, { className: "gap-x-2.5 items-center", children: [titles.icon && _jsx("img", { src: titles.icon, alt: "icon" }), _jsx("div", { className: "text-xl leading-none font-pretendard-bold text-green-dark", children: titles.title })] }), _jsx("div", { className: "leading-none", children: titles.subtitle })] }), _jsxs("div", { className: "flex gap-3.5 items-center", children: [_jsx(Label, { title: !isDisabled

package/interface/Modal.d.ts

@@ -1,7 +1,9 @@
 import { ReactNode } from "react";
 import { Button, Scripts, Size, State, Titles } from "./Property";
 import { ShowAction } from "./Action";
+import { InputWidget, SelectSwitchProps, SelectTagProps } from "./widget";
 interface Option {
+    className?: string;
     width: Size;
     height: Size;
     padding: boolean;
@@ -15,12 +17,29 @@ interface ModalProps {
     titles: Titles;
     children: ReactNode;
     showAction?: ShowAction;
-    className?: string;
     option?: Partial<Option>;
     debug?: string;
 }
-interface ConfirmModalProps extends ModalProps {
+interface ConfirmModalProps<T = any> extends ModalProps {
     buttons: [Button, Button];
+    widgets?: ConfirmModalWidget<T>[];
+}
+type ConfirmModalWidget<T = string> = ConfirmModalSelectSwitchProps<T> | ConfirmModalSelectTagProps<T> | ConfirmModalInputFormProps | ConfirmModalNodeProps;
+interface ConfirmModalSelectSwitchProps<T> {
+    type: "selectSwitch";
+    data: SelectSwitchProps<T>;
+}
+interface ConfirmModalSelectTagProps<T> {
+    type: "selectTag";
+    data: SelectTagProps<T>;
+}
+interface ConfirmModalInputFormProps {
+    type: "inputForm";
+    data: InputWidget;
+}
+interface ConfirmModalNodeProps {
+    type?: undefined;
+    data: ReactNode;
 }
 interface AlertModalProps extends Omit<ModalProps, "children"> {
     scripts: Scripts;
@@ -35,4 +54,4 @@ interface DaumPostcode {
 interface DaumPostcodeModalProps extends Omit<ModalProps, "titles" | "children"> {
     state: State<DaumPostcode>;
 }
-export type { ModalProps, ConfirmModalProps, AlertModalProps, DaumPostcodeModalProps, };
+export type { ModalProps, ConfirmModalProps, ConfirmModalWidget, AlertModalProps, DaumPostcodeModalProps, };

package/interface/index.d.ts

@@ -4,6 +4,7 @@ export * from "./Card";
 export * from "./Color";
 export * from "./Data";
 export * from "./Layout";
+export * from "./Modal";
 export * from "./Overlay";
 export * from "./Property";
 export * from "./Theme";

package/interface/index.js

@@ -4,6 +4,7 @@ export * from "./Card";
 export * from "./Color";
 export * from "./Data";
 export * from "./Layout";
+export * from "./Modal";
 export * from "./Overlay";
 export * from "./Property";
 export * from "./Theme";

package/interface/widget/Select.d.ts

@@ -22,6 +22,19 @@ export interface SelectSwitchProps<T> {
         className?: string;
     };
 }
+export interface SelectTagProps<T> {
+    state: State<T[]>;
+    selectOptions: {
+        title: string;
+        value: T;
+    }[];
+    selectHow?: "one" | "plural";
+    option?: {
+        className?: string;
+        background?: string;
+        text?: string;
+    };
+}
 export interface SelectHandleProps<T> {
     state: State<T>;
     selectOptions: SelectOptionInput<T>[];

package/interface/widget/index.d.ts

@@ -31,12 +31,13 @@ export interface LabelWidget extends Widget {
 }
 type InputType = "text" | "password" | "date" | "email" | "phone" | "number";
 export interface InputWidget extends Widget {
+    title?: string;
     state: State<string> | State<string | undefined>;
     onKeyDown?: (e: React.KeyboardEvent) => void;
     placeholder?: string;
-    isValid?: boolean;
+    isValid?: boolean | ((value: string) => boolean);
     type?: InputType;
-    label?: LabelWidget;
+    button?: LabelWidget;
     maxLength?: number;
     disabled?: Disabled;
 }

package/layout/template/Tab.js

@@ -20,7 +20,7 @@ export default function Tab({ tabs, option, state, }) {
         displays: "hidden xl:flex xl:items-center xl:gap-2.5",
         sizes: "w-auto",
         paddings: "p-2.5",
-        backgrounds: boundary ?? "bg-white/30",
+        backgrounds: boundary ?? "bg-gray-light",
         styles: "rounded-xl ",
     };
     const button = {

package/modal/design/Modal.design.js

@@ -35,11 +35,12 @@ export default function ModalDesign({ titles, showAction, children, option, debu
     }, []);
     const background = {
         positions: "z-50 fixed top-0 left-0",
-        displays: position ?? "flex items-center justify-center ",
+        displays: !position && "flex items-center justify-center ",
         sizes: "min-h-screen w-full ",
         styles: !noBackground && "bg-black/10 backdrop-blur-sm ",
     };
     const container = {
+        positions: position,
         paddings: "p-5",
         sizes: `${heightSize[height ?? "lg"]} ${widthSize[width ?? "md"]}`,
         styles: "rounded-xl bg-white relative overflow-hidden",
@@ -48,7 +49,7 @@ export default function ModalDesign({ titles, showAction, children, option, debu
     };
     const titleBox = {
         displays: "flex flex-col items-end",
-        sizes: "w-full",
+        sizes: "w-full min-h-[83px]",
     };
     const transitions = useTransition(isVisible, {
         from: { opacity: 0 },

package/modal/template/Alert.js

@@ -3,5 +3,5 @@ import ModalDesign from "../design/Modal.design";
 export default function Alert({ titles, showAction, scripts, option, }) {
     const { script } = scripts ?? {};
     const { buttons } = option ?? {};
-    return (_jsx(ModalDesign, { titles: titles, showAction: showAction, className: "pt-18 px-25", option: { 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, option: { buttons, className: "pt-18 px-25" }, 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/Confirm/Confirm.d.ts

@@ -1,2 +1,2 @@
 import { ConfirmModalProps } from "../../../interface/Modal";
-export default function Confirm(props: ConfirmModalProps): import("react/jsx-runtime").JSX.Element;
+export default function Confirm(props: Omit<ConfirmModalProps, "children">): import("react/jsx-runtime").JSX.Element;

package/modal/template/Confirm/Confirm.js

@@ -1,14 +1,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 import { cn } from "../../../util";
+import { Input, Select } from "../../../widget";
 import ConfirmModalDesign from "../../design/ConfirmModal.design";
 export default function Confirm(props) {
+    const { className } = props.option ?? {};
     const container = {
         displays: "flex flex-col",
         margins: "mt-2.5",
+        className,
         sizes: "w-full h-60",
     };
-    return (_jsx(ConfirmModalDesign, { ...props, children: _jsx("div", { className: cn(container), children: props.children }), option: {
+    return (_jsx(ConfirmModalDesign, { ...props, children: _jsx("div", { className: cn(container), children: props.widgets?.map((widget, index) => (_createElement(ConfirmModalWidget, { ...widget, key: index }))) }), option: {
+            ...props.option,
             width: "md",
             height: "lg",
         } }));
 }
+function ConfirmModalWidget({ type, data }) {
+    if (type === "selectSwitch")
+        return _jsx(Select.Switch, { ...data });
+    if (type === "selectTag")
+        return _jsx(Select.Tag, { ...data });
+    if (type === "inputForm")
+        return _jsx(Input.Form, { ...data });
+    if (typeof type === "undefined")
+        return data;
+    return null;
+}

package/modal/template/Confirm/index.d.ts

@@ -1,10 +1,9 @@
 import { ConfirmModalProps } from "../../../interface/Modal";
-declare function ConfirmModal(props: ConfirmModalProps): import("react/jsx-runtime").JSX.Element;
+declare function ConfirmModal(props: Omit<ConfirmModalProps, "children">): import("react/jsx-runtime").JSX.Element;
 declare namespace ConfirmModal {
     var Alert: typeof import("./Alert").default;
     var Input: typeof import("./Input").default;
     var Reimage: typeof import("./Reimage").default;
-    var Switch: typeof import("./Switch").default;
     var Tag: typeof import("./Tag").default;
 }
 export default ConfirmModal;

package/modal/template/Confirm/index.js

@@ -4,13 +4,11 @@ import Alert from "./Alert";
 import Input from "./Input";
 import Reimage from "./Reimage";
 import Tag from "./Tag";
-import Switch from "./Switch";
 function ConfirmModal(props) {
     return _jsx(Confirm, { ...props });
 }
 ConfirmModal.Alert = Alert;
 ConfirmModal.Input = Input;
 ConfirmModal.Reimage = Reimage;
-ConfirmModal.Switch = Switch;
 ConfirmModal.Tag = Tag;
 export default ConfirmModal;

package/modal/template/Input.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import ModalDesign from "../design/Modal.design";
 export default function Input({ titles, showAction, option, state, }) {
     const { buttons } = option ?? {};
-    return (_jsx(ModalDesign, { titles: titles, showAction: showAction, className: "pt-18 px-25", option: { buttons }, children: _jsx("input", { className: "border-2 border-black w-80 h-8", value: state[0], onChange: (e) => state[1](e.target.value) }) }));
+    return (_jsx(ModalDesign, { titles: titles, showAction: showAction, option: { buttons, className: "pt-18 px-25" }, children: _jsx("input", { className: "border-2 border-black w-80 h-8", value: state[0], onChange: (e) => state[1](e.target.value) }) }));
 }

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.85
+1.0.87

package/widget/template/Input/Form.d.ts

@@ -1,2 +1,2 @@
 import { InputWidget } from "../../../interface";
-export default function LG({ state, placeholder, isValid, type, label, maxLength, disabled, }: InputWidget): import("react/jsx-runtime").JSX.Element;
+export default function InputForm({ title, state, placeholder, isValid, type, button, maxLength, disabled, }: InputWidget): import("react/jsx-runtime").JSX.Element;

package/widget/template/Input/Form.js

@@ -3,7 +3,7 @@ import { useRef, useState } from "react";
 import { cn, gradient } from "../../../util";
 import Label from "../Label";
 import Obstacle from "../Obstacle";
-export default function LG({ state, placeholder, isValid, type, label, maxLength, disabled, }) {
+export default function InputForm({ title, state, placeholder, isValid, type, button, maxLength, disabled, }) {
     const [value, setValue] = state;
     const [onFocus, setOnFocus] = useState(false);
     const ref = useRef(null);
@@ -16,15 +16,20 @@ export default function LG({ state, placeholder, isValid, type, label, maxLength
         fonts: "leading-none text-gray-medium font-pretendard-medium",
         animation: value || onFocus ? "top-2.625 text-xs" : "top-4.375 text-base",
     };
-    const styleByFlag = (flag) => {
-        if (typeof flag === "undefined")
-            return "bg-gray-light border-green-dark";
-        if (flag)
-            return "bg-green-dark/10 text-green-dark border-green-dark ";
-        return "bg-crimson-burgundy/10 text-crimson-burgundy border-crimson-burgundy";
+    const styleByFlag = () => {
+        const gray = "bg-gray-light border-green-dark";
+        const green = "bg-green-dark/10 text-green-dark border-green-dark";
+        const red = "bg-crimson-burgundy/10 text-crimson-burgundy border-crimson-burgundy";
+        if (typeof isValid === "undefined")
+            return gray;
+        if (typeof isValid === "function")
+            return isValid(value ?? "") ? green : red;
+        if (isValid)
+            return green;
+        return red;
     };
     const inputBox = {
-        styles: styleByFlag(isValid),
+        styles: styleByFlag(),
         sizes: "w-102.5 h-13.5",
         paddings: `${placeholder && "pt-3"} pl-5`,
         fonts: "text-sm",
@@ -34,16 +39,16 @@ export default function LG({ state, placeholder, isValid, type, label, maxLength
             !(isValid === false) &&
             "shadow-[0px_0px_10px_0px_rgba(16,86,82,0.38)]",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { onClick: () => ref.current?.focus(), className: cn(placeholderBox), children: placeholder }), _jsx("input", { ref: ref, className: cn(inputBox), value: value, onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onChange: (e) => {
-                    if (maxLength && e.target.value.length > maxLength)
-                        return;
-                    setValue(e.target.value);
-                }, type: type ?? "text" }), label && (_jsx(Label.Button, { title: label.title, onClick: label.onClick, option: {
-                    width: "sm",
-                    height: "xs",
-                    className: "absolute top-3.5 right-3.75",
-                    background: label.option?.background ?? gradient.bg.greenToRed,
-                    text: label.option?.text ?? "text-white",
-                    ...label.option,
-                } })), _jsx(Obstacle, { disabled: disabled })] }));
+    return (_jsxs("div", { children: [title && _jsx("div", { className: "text-gray-dark", children: title }), _jsxs("div", { className: cn(container), children: [_jsx("div", { onClick: () => ref.current?.focus(), className: cn(placeholderBox), children: placeholder }), _jsx("input", { ref: ref, className: cn(inputBox), value: value, onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onChange: (e) => {
+                            if (maxLength && e.target.value.length > maxLength)
+                                return;
+                            setValue(e.target.value);
+                        }, type: type ?? "text" }), button && (_jsx(Label.Button, { title: button.title, onClick: button.onClick, option: {
+                            width: "sm",
+                            height: "xs",
+                            className: "absolute top-3.5 right-3.75",
+                            background: button.option?.background ?? gradient.bg.greenToRed,
+                            text: button.option?.text ?? "text-white",
+                            ...button.option,
+                        } })), _jsx(Obstacle, { disabled: disabled })] })] }));
 }

package/widget/template/Select/Switch.js

@@ -38,8 +38,6 @@ function SelectSwitch({ state, selectOptions: selectOptionsInput, option, }) {
         textSizes: textSize[size ?? "md"],
         styles: "rounded-full ",
     });
-    return (_jsx("div", { className: cn(container), children: selectOptions?.map(({ value, icon, title }) => {
-            return (_jsxs("button", { onClick: () => state[1](value), className: cn(button(value === state[0])), children: [icon && _jsx("img", { src: icon }), _jsx("div", { children: title })] }));
-        }) }));
+    return (_jsx("div", { className: cn(container), children: selectOptions?.map(({ value, icon, title }) => (_jsxs("button", { onClick: () => state[1](value), className: cn(button(value === state[0])), children: [icon && _jsx("img", { src: icon }), _jsx("div", { children: title })] }, String(value)))) }));
 }
 export default SelectSwitch;

package/widget/template/Select/Tag.d.ts

@@ -1,16 +1,2 @@
-import { State } from "../../../interface";
-interface SelectTagProps<T> {
-    state: State<T[]>;
-    selectOptions: {
-        title: string;
-        value: T;
-    }[];
-    selectHow?: "one" | "plural";
-    option?: {
-        className?: string;
-        background?: string;
-        text?: string;
-    };
-}
+import { SelectTagProps } from "../../../interface";
 export default function SelectTag<T>(props: SelectTagProps<T>): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,7 +0,0 @@
-import { ConfirmModalProps } from "../../../interface/Modal";
-import { SelectSwitchProps } from "../../../interface/widget/Select";
-interface SwitchModalProps<T> extends ConfirmModalProps {
-    switch: SelectSwitchProps<T>;
-}
-declare function SwitchModal<T>(props: SwitchModalProps<T>): import("react/jsx-runtime").JSX.Element;
-export default SwitchModal;

package/modal/template/Confirm/Switch.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Select } 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(Select.Switch, { ...props.switch }), props.children] }) }));
-}
-export default SwitchModal;