@edu-tosel/design 1.0.61 → 1.0.63

package/modal/design/ConfirmModal.design.js

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

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

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

package/modal/design/Modal.design.js

@@ -25,9 +25,9 @@ const heightSize = {
     "2xl": "max-w-176",
     full: "h-full",
 };
-export default function ModalDesign({ titles, showAction, children, options, debug, }) {
+export default function ModalDesign({ titles, showAction, children, option, debug, }) {
     const { isVisible, event } = showAction ?? {};
-    const { position, width, height, noClose, noBackground, isShadow } = options ?? {};
+    const { position, width, height, noClose, noBackground, isShadow } = option ?? {};
     const [detection, setDetection] = useState(null);
     const { setIsOwn, removeModal } = useActionStore();
     useEffect(() => {
@@ -57,8 +57,5 @@ export default function ModalDesign({ titles, showAction, children, options, deb
         config: { duration: 200 },
     });
     return (detection &&
-        ReactDOM.createPortal(transitions((styles, item) => item && (_jsx(animated.div, { style: styles, className: cn(background), onClick: () => setIsOwn(true), children: _jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: "text-xl leading-none font-pretendard-bold", children: titles.title }), _jsx("div", { className: "bg-gray-light w-13.75 h-2 mt-3" }), _jsx("div", { className: "mt-5", children: LineBreaks({
-                                    texts: titles.subtitle,
-                                    className: "text-base leading-none text-end font-pretendard-bold",
-                                }) })] }), children, !noClose && event && (_jsx(SVG.Close, { onClick: () => removeModal(event), className: "absolute top-5 left-5" }))] }) }))), document.body));
+        ReactDOM.createPortal(transitions((styles, item) => item && (_jsx(animated.div, { style: styles, className: cn(background), onClick: () => setIsOwn(true), children: _jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: "text-xl leading-none font-pretendard-bold", children: titles.title }), _jsx("div", { className: "bg-gray-light w-13.75 h-2 mt-3" }), _jsx(LineBreaks, { texts: titles.subtitle, className: "mt-5 text-base leading-none text-end font-pretendard-bold" })] }), children, !noClose && event && (_jsx(SVG.Close, { onClick: () => removeModal(event), className: "absolute top-5 left-5" }))] }) }))), document.body));
 }

package/modal/template/Alert.d.ts

@@ -1,2 +1,2 @@
 import { AlertModalProps } from "../../interface/Modal";
-export default function Alert({ titles, showAction, scripts, options, }: AlertModalProps): import("react/jsx-runtime").JSX.Element;
+export default function Alert({ titles, showAction, scripts, option, }: 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, showAction, scripts, options, }) {
+export default function Alert({ titles, showAction, scripts, option, }) {
     const { script } = scripts ?? {};
-    const { buttons } = options ?? {};
-    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 })] }) }) }));
+    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 })] }) }) }));
 }

package/modal/template/Confirm/Alert.js

@@ -8,7 +8,7 @@ export default function Alert(props) {
         margins: "mt-2.5",
         sizes: "w-full h-60",
     };
-    return (_jsx(ConfirmModalDesign, { ...props, children: _jsxs("div", { className: cn(container), children: [_jsx("div", { className: "leading-none text-xl font-pretendard-bold", children: props.scripts.script }), _jsx(LineBreaks, { className: "text-center", texts: props.scripts.subscript }), _jsx("div", { className: "leading-none font-pretendard-bold text-crimson-burgundy", children: props.scripts.alert })] }), options: {
+    return (_jsx(ConfirmModalDesign, { ...props, children: _jsxs("div", { className: cn(container), children: [_jsx("div", { className: "leading-none text-xl font-pretendard-bold", children: props.scripts.script }), _jsx(LineBreaks, { className: "text-center", texts: props.scripts.subscript }), _jsx("div", { className: "leading-none font-pretendard-bold text-crimson-burgundy", children: props.scripts.alert })] }), option: {
             width: "md",
             height: "lg",
         } }));

package/modal/template/Confirm/Confirm.js

@@ -7,7 +7,7 @@ export default function Confirm(props) {
         margins: "mt-2.5",
         sizes: "w-full h-60",
     };
-    return (_jsx(ConfirmModalDesign, { ...props, children: _jsx("div", { className: cn(container), children: props.children }), options: {
+    return (_jsx(ConfirmModalDesign, { ...props, children: _jsx("div", { className: cn(container), children: props.children }), option: {
             width: "md",
             height: "lg",
         } }));

package/modal/template/Confirm/Input.js

@@ -3,5 +3,5 @@ import ConfirmModal from "../../design/ConfirmModal.design";
 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))) }) }));
+    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.Form, { ...input })] }, index))) }) }));
 }

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

@@ -5,7 +5,7 @@ interface TagModalProps<T> extends Omit<ConfirmModalProps, "children"> {
         state: State<T[]>;
         tags: [T, string][];
         process?: [boolean, React.ReactNode];
-        options?: {
+        option?: {
             selectHow?: "one" | "plural";
         };
     };

package/modal/template/Confirm/Tag.js

@@ -4,8 +4,8 @@ import { cn } from "../../../util";
 import { selectOne, selectPlural } from "../../../util/select";
 import { animated, useTransition } from "react-spring";
 export default function Tag(props) {
-    const { state, tags, options, process } = props.tag;
-    const { selectHow } = options || { selectHow: "plural" };
+    const { state, tags, option, process } = props.tag;
+    const { selectHow } = option || { selectHow: "plural" };
     const button = (key) => ({
         sizes: "h-10",
         styles: "rounded-full",

package/modal/template/Input.d.ts

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

package/modal/template/Input.js

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

package/modal/template/Postcode.js

@@ -22,7 +22,7 @@ export default function PostcodeModal({ state, showAction, }) {
     return (_jsx(ModalDesign, { titles: {
             title: "주소를 검색하고 선택해주세요",
             subtitle: "주소를 검색하고 선택해주세요",
-        }, showAction: showAction, options: {
+        }, showAction: showAction, option: {
             width: "lg",
             height: "xl",
         }, children: _jsx(Suspense, { fallback: _jsx(Loading.Spinner, {}), children: isClient && (_jsx(DaumPostcodeEmbed, { onComplete: handler, className: "mt-16" })) }) }));

package/overlay/design/Overlay.design.js

@@ -9,7 +9,7 @@ export default function OverlayDesign({ titles, children, showAction, }) {
     const container = {
         positions: "absolute top-0 right-0 z-30",
         sizes: "h-full",
-        styles: "box-shadow-sm bg-white",
+        styles: "box-shadow-md bg-white",
     };
     const body = {
         positions: "relative",

package/overlay/template/Manage.js

@@ -16,18 +16,18 @@ export default function Manage({ titles, showAction, elements, buttons, }) {
                     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, options: { disabled } }) }, id + title));
+                        return (_jsx(Frame, { title: title, children: _jsx(Toggle, { state: state, labels: labels, option: { disabled } }) }, id + title));
                     if (type === "input")
-                        return (_jsx(Frame, { title: title, children: _jsx(Input, { state: state, options: {
+                        return (_jsx(Frame, { title: title, children: _jsx(Input, { state: state, option: {
                                     width: "md",
                                     disabled,
                                 } }) }, id + title));
                     return null;
-                }) }), _jsx("div", { className: "absolute bottom-12 right-12 flex gap-4", children: buttons?.map(({ title, onClick, options }) => (_jsx(Label.Button, { title: title, onClick: onClick, options: {
+                }) }), _jsx("div", { className: "absolute bottom-12 right-12 flex gap-4", children: buttons?.map(({ title, onClick, option }) => (_jsx(Label.Button, { title: title, onClick: onClick, option: {
                         width: "sm",
                         height: "xs",
-                        background: options?.background ?? "bg-crimson-dark",
-                        text: options?.text ?? "text-white",
+                        background: option?.background ?? "bg-crimson-dark",
+                        text: option?.text ?? "text-white",
                         disabled: !onClick ? true : false,
                     } }, id + title))) })] }));
 }

package/package.json

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

package/tailwind.config.ts

@@ -242,6 +242,7 @@ export default {
         132: "33rem",
         135: "33.75rem",
         136: "34rem",
+        138.5: "34.625rem",
         138.75: "34.6875rem",
         140: "35rem",
         144: "36rem",

package/version.txt

@@ -1 +1 @@
-1.0.61
+1.0.63

package/widget/design/Label.design.d.ts

@@ -1,2 +1,2 @@
 import { LabelWidget } from "../../interface";
-export default function LabelDesign({ title, onClick, options, hoverState, }: LabelWidget): import("react/jsx-runtime").JSX.Element;
+export default function LabelDesign({ title, onClick, option, hoverState, }: LabelWidget): import("react/jsx-runtime").JSX.Element;

package/widget/design/Label.design.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../util";
-import Obstacle from "../Obstacle";
+import Obstacle from "../template/Obstacle";
 const widthSize = {
     xs: "w-10",
     sm: "w-22.5",
@@ -11,9 +11,9 @@ const heightSize = {
     xs: "h-6.25",
     sm: "h-11.25",
 };
-export default function LabelDesign({ title, onClick, options, hoverState, }) {
+export default function LabelDesign({ title, onClick, option, hoverState, }) {
     const [hover, setHover] = hoverState ?? [false, () => { }];
-    const { width, height, text, background, className, disabled } = options ?? {};
+    const { width, height, text, background, className, disabled } = option ?? {};
     const container = {
         positions: "relative z-10",
         sizes: `${widthSize[width ?? "sm"]} ${heightSize[height ?? "xs"]}`,

package/widget/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Input } from "./template/Input";
 export { default as Select } from "./template/Select";
-export { default as DatePicker } from "./DatePicker";
+export { default as DatePicker } from "./template/DatePicker";
+export { default as CheckBox } from "./template/CheckBox";
 export { default as Label } from "./template/Label";
 export { default as Switch } from "./template/Switch";
-export { default as Toggle } from "./Toggle";
+export { default as Toggle } from "./template/Toggle";

package/widget/index.js

@@ -1,6 +1,7 @@
 export { default as Input } from "./template/Input";
 export { default as Select } from "./template/Select";
-export { default as DatePicker } from "./DatePicker";
+export { default as DatePicker } from "./template/DatePicker";
+export { default as CheckBox } from "./template/CheckBox";
 export { default as Label } from "./template/Label";
 export { default as Switch } from "./template/Switch";
-export { default as Toggle } from "./Toggle";
+export { default as Toggle } from "./template/Toggle";

package/widget/template/CheckBox.d.ts

@@ -0,0 +1,2 @@
+import { CheckBoxWidget } from "../../interface";
+export default function Checkbox({ state: [checked, setChecked], labels, option, color, }: CheckBoxWidget): import("react/jsx-runtime").JSX.Element;

package/widget/{CheckBox.js → template/CheckBox.js}

@@ -8,12 +8,12 @@ const widthSize = {
     "2xl": "w-144",
     full: "w-full",
 };
-export default function Checkbox({ state: [checked, setChecked], labels, options, color, }) {
+export default function Checkbox({ state: [checked, setChecked], labels, option, color, }) {
     const checkBoxColor = {
         red: "checked:bg-[#910023]",
         blue: "checked:bg-[#173A8B]",
         green: "checked:bg-[#DFE6E5]",
     };
-    const { disabled } = options ?? {};
+    const { disabled } = option ?? {};
     return (_jsxs("div", { className: "w-auto h-6 flex items-center ", children: [_jsx("input", { type: "checkbox", className: `check-box mr-2 appearance-none w-6 h-6 border-2 border-[#E8EBF3] rounded-md ${checkBoxColor[color]} hover:box-shadow`, disabled: typeof disabled === "boolean" && disabled, checked: checked, onChange: (e) => setChecked(e.target.checked) }), _jsx("label", { htmlFor: "checkbox1", children: labels })] }));
 }

package/widget/template/DatePicker.d.ts

@@ -0,0 +1,3 @@
+import { InputWidget } from "../../interface";
+import "react-datepicker/dist/react-datepicker.css";
+export default function DatePicker({ option }: InputWidget): import("react/jsx-runtime").JSX.Element;

package/widget/{DatePicker.js → template/DatePicker.js}

@@ -13,8 +13,8 @@ const widthSize = {
     "2xl": "w-144",
     full: "w-full",
 };
-export default function DatePicker({ options }) {
-    const { width } = options ?? {};
+export default function DatePicker({ option }) {
+    const { width } = option ?? {};
     const [selectedDate, setSelectedDate] = useState(new Date());
     const calRef = useRef(null);
     return (_jsx("div", { children: _jsx(ReactDatePicker, { dateFormat: "yyyy\uB144 MM\uC6D4 dd\uC77C", icon: "fa fa-calendar", minDate: new Date("1900-01-01"), maxDate: new Date("2100-01-01"), selected: selectedDate, shouldCloseOnSelect: false, ref: calRef, onChange: (date) => setSelectedDate(date), locale: ko, className: "bg-slate-200 p-1 pl-2 pr-4 text-sm text-left rounded-md hover:bg-white focus:bg-white transition-all box-inner-shadow focus:outline-none w-68 h-8", children: _jsx("div", { className: "w-full h-auto flex justify-end items-end pr-4 pb-4", children: _jsx("button", { className: "p-2 bg-green-dark text-white rounded-md pr-4 pl-4 hover:opacity-85 hover:shadow-md transition-all", onClick: () => {

package/widget/template/EmailInput.d.ts

@@ -0,0 +1,2 @@
+import { InputWidget } from "../../interface";
+export default function EmailInput({ state, placeholder, option, }: InputWidget): import("react/jsx-runtime").JSX.Element;

package/widget/{EmailInput.js → template/EmailInput.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useState } from "react";
-import { cn } from "../util";
+import { cn } from "../../util";
 const widthSize = {
     xs: "w-28",
     sm: "w-48",
@@ -10,12 +10,12 @@ const widthSize = {
     "2xl": "w-144",
     full: "w-full",
 };
-export default function EmailInput({ state, placeholder, options, }) {
-    const { width } = options ?? {};
+export default function EmailInput({ state, placeholder, option, }) {
+    const { width } = option ?? {};
     const id = useId();
     const [value, setValue] = state;
     const [focused, setFocused] = useState(false);
-    const { text } = options ?? {};
+    const { text } = option ?? {};
     const isValidEmail = (email) => {
         return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email);
     };

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

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

package/widget/template/Input/Form.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { cn, gradient } from "../../../util";
+import Label from "../Label";
+export default function LG({ state, placeholder, flag, type, label, }) {
+    const [value, setValue] = state;
+    const [onFocus, setOnFocus] = useState(false);
+    const ref = useRef(null);
+    const container = {
+        positions: "relative",
+    };
+    const placeholderBox = {
+        positions: "absolute left-5",
+        styles: "duration-300",
+        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 inputBox = {
+        styles: styleByFlag(flag),
+        sizes: "w-102.5 h-13.5",
+        paddings: `${placeholder && "pt-3"} pl-5`,
+        fonts: "text-sm",
+        boundaries: "rounded-md outline-none",
+        focuses: onFocus ? "border " : "border-0",
+        shadows: onFocus &&
+            !(flag === 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) => 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,
+                } }))] }));
+}

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

@@ -0,0 +1,6 @@
+import { InputWidget } from "../../../interface";
+declare function Input({ state, onKeyDown, placeholder, option }: InputWidget): import("react/jsx-runtime").JSX.Element;
+declare namespace Input {
+    var Form: typeof import("./Form").default;
+}
+export default Input;

package/widget/template/Input/index.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../../../util";
+import Obstacle from "../Obstacle";
+import Form from "./Form";
+const widthSize = {
+    xs: "w-28",
+    sm: "w-48",
+    md: "w-64",
+    lg: "w-96",
+    xl: "w-128",
+    "2xl": "w-144",
+    full: "w-full",
+};
+function Input({ state, onKeyDown, placeholder, option }) {
+    const { width, disabled } = option ?? {};
+    const [value, setValue] = state;
+    const id = useId();
+    const container = {
+        positions: "relative",
+        width: `${widthSize[width ?? "xs"]} h-8`,
+        displays: "flex items-center",
+    };
+    const body = {
+        styles: "rounded-md bg-slate-200 text-xs",
+        sizes: "w-full h-full",
+        paddings: "pl-4",
+        pseudo: "focus:outline-none focus:bg-white focus:text-black box-shadow-focus",
+        effect: `transition-all`,
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("input", { className: cn(body), id: id, type: "text", value: value, placeholder: placeholder ?? "입력해주세요", onKeyDown: onKeyDown, onChange: (e) => setValue(e.target.value) }), _jsx(Obstacle, { disabled: disabled })] }));
+}
+Input.Form = Form;
+export default Input;

package/widget/template/Label.d.ts

@@ -1,7 +1,7 @@
 import { LabelWidget } from "../../interface";
-declare function Label({ title, options }: Omit<LabelWidget, "onClick">): import("react/jsx-runtime").JSX.Element;
+declare function Label({ title, option }: Omit<LabelWidget, "onClick">): import("react/jsx-runtime").JSX.Element;
 declare namespace Label {
-    var Button: ({ title, hoverTitle, onClick, options, }: Omit<LabelWidget, "hoverState"> & {
+    var Button: ({ title, hoverTitle, onClick, option, }: Omit<LabelWidget, "hoverState"> & {
         hoverTitle?: string | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
 }

package/widget/template/Label.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import LabelDesign from "../design/Label.design";
-function Label({ title, options }) {
+function Label({ title, option }) {
     const [hover, setHover] = useState(false);
-    return (_jsx(LabelDesign, { title: title, hoverState: [hover, setHover], options: { ...options, width: "sm", height: "xs" } }));
+    return (_jsx(LabelDesign, { title: title, hoverState: [hover, setHover], option: { ...option, width: "sm", height: "xs" } }));
 }
-function Button({ title, hoverTitle, onClick, options, }) {
+function Button({ title, hoverTitle, onClick, option, }) {
     const [hover, setHover] = useState(false);
-    return (_jsx(LabelDesign, { title: hoverTitle ? (!hover ? title : hoverTitle) : title, onClick: onClick, hoverState: [hover, setHover], options: {
-            ...options,
-            width: options?.width ?? "md",
-            height: options?.height ?? "sm",
+    return (_jsx(LabelDesign, { title: hoverTitle ? (!hover ? title : hoverTitle) : title, onClick: onClick, hoverState: [hover, setHover], option: {
+            ...option,
+            width: option?.width ?? "md",
+            height: option?.height ?? "sm",
         } }));
 }
 Label.Button = Button;

package/widget/{Obstacle.d.ts → template/Obstacle.d.ts}

@@ -1,4 +1,4 @@
-import { Disabled } from "../interface";
+import { Disabled } from "../../interface";
 export default function Obstacle({ disabled }: {
     disabled?: Disabled;
 }): false | import("react/jsx-runtime").JSX.Element | undefined;

package/widget/{Obstacle.js → template/Obstacle.js}

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../util";
+import { cn } from "../../util";
 export default function Obstacle({ disabled }) {
     const obstacle = {
         positions: "absolute",

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

@@ -1,2 +1,2 @@
 import { SelectWidget } from "../../../interface";
-export default function SelectLG<T>({ state, selectOptions, placeholder, options, }: SelectWidget<T>): import("react/jsx-runtime").JSX.Element;
+export default function SelectLG<T>({ state, selectOptions, placeholder, option, }: SelectWidget<T>): import("react/jsx-runtime").JSX.Element;

package/widget/template/Select/Select.LG.js

@@ -14,7 +14,7 @@ const heightSize = {
     xs: "h-6.5",
     sm: "h-9",
 };
-export default function SelectLG({ state, selectOptions, placeholder, options, }) {
+export default function SelectLG({ state, selectOptions, placeholder, option, }) {
     const id = useId();
     const { setIsOwn, setIsOwnId } = useActionStore();
     const [value, setValue] = state;
@@ -58,7 +58,7 @@ export default function SelectLG({ state, selectOptions, placeholder, options, }
     };
     const button = {
         displays: "flex items-center",
-        sizes: `${widthSize[options?.width ?? "md"]} ${heightSize[options?.height ?? "sm"]}`,
+        sizes: `${widthSize[option?.width ?? "md"]} ${heightSize[option?.height ?? "sm"]}`,
         styles: "pl-1 rounded-md focus:outline-none duration-100 text-gray-400",
         shadow: isOpen || isHover ? "box-shadow" : "shadow-none",
     };
@@ -70,7 +70,7 @@ export default function SelectLG({ state, selectOptions, placeholder, options, }
     const body = {
         positions: "absolute z-30",
         displays: "flex flex-col gap-1",
-        sizes: `${widthSize[options?.width ?? "md"]} min-h-6.5 max-h-40`,
+        sizes: `${widthSize[option?.width ?? "md"]} min-h-6.5 max-h-40`,
         paddings: "p-2",
         styles: "bg-white box-shadow rounded-md box-shadow overflow-y-scroll",
     };

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

@@ -1,2 +1,2 @@
 import { SelectWidget } from "../../../interface";
-export default function Select<T>({ state, selectOptions, placeholder, options, }: SelectWidget<T>): import("react/jsx-runtime").JSX.Element;
+export default function Select<T>({ state, selectOptions, placeholder, option, }: SelectWidget<T>): import("react/jsx-runtime").JSX.Element;

package/widget/template/Select/Select.js

@@ -13,7 +13,7 @@ const widthSize = {
 const heightSize = {
     xs: "h-6.5",
 };
-export default function Select({ state, selectOptions, placeholder, options, }) {
+export default function Select({ state, selectOptions, placeholder, option, }) {
     const id = useId();
     const { setIsOwn, setIsOwnId } = useActionStore();
     const [value, setValue] = state;
@@ -56,7 +56,7 @@ export default function Select({ state, selectOptions, placeholder, options, })
     };
     const button = {
         displays: "flex items-center",
-        sizes: `${widthSize[options?.width ?? "md"]} ${heightSize[options?.height ?? "xs"]}`,
+        sizes: `${widthSize[option?.width ?? "md"]} ${heightSize[option?.height ?? "xs"]}`,
         styles: "pl-1 rounded-md focus:outline-none duration-100 text-gray-400",
         shadow: isOpen || isHover ? "box-shadow" : "shadow-none",
     };
@@ -68,7 +68,7 @@ export default function Select({ state, selectOptions, placeholder, options, })
     const body = {
         positions: "absolute z-30",
         displays: "flex flex-col gap-1",
-        sizes: `${widthSize[options?.width ?? "md"]} min-h-6.5 max-h-23.75`,
+        sizes: `${widthSize[option?.width ?? "md"]} min-h-6.5 max-h-23.75`,
         paddings: "pl-1 py-1",
         styles: "bg-white box-shadow rounded-md box-shadow overflow-y-scroll",
     };

package/widget/template/Switch/Handle.d.ts

@@ -1,2 +1,2 @@
 import { SwitchProps } from "../../../interface";
-export default function Handle<T>({ state, values, options, }: Omit<SwitchProps<T>, "display">): import("react/jsx-runtime").JSX.Element;
+export default function Handle<T>({ state, values, option, }: Omit<SwitchProps<T>, "display">): import("react/jsx-runtime").JSX.Element;

package/widget/template/Switch/Handle.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn, gradient } from "../../../util";
-export default function Handle({ state, values, options, }) {
-    const { className } = options ?? {};
+export default function Handle({ state, values, option, }) {
+    const { className } = option ?? {};
     const valueIndex = values?.indexOf(state?.[0]);
     const container = {
         positions: "relative",

package/widget/template/Switch/Switch.d.ts

@@ -1,3 +1,3 @@
 import { SwitchProps } from "../../../interface";
-declare function Switch<T>({ state, values, display, options }: SwitchProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Switch<T>({ state, values, display, option }: SwitchProps<T>): import("react/jsx-runtime").JSX.Element;
 export default Switch;

package/widget/template/Switch/Switch.js

@@ -20,8 +20,8 @@ const textSize = {
     md: "text-sm",
     lg: "text-base",
 };
-function Switch({ state, values, display, options }) {
-    const { text, size, className } = options ?? {};
+function Switch({ state, values, display, option }) {
+    const { text, size, className } = option ?? {};
     const container = {
         displays: `flex ${gapSize[size ?? "md"]}`,
         paddings: paddingSize[size ?? "md"],

package/widget/{Toggle.d.ts → template/Toggle.d.ts}

@@ -1,6 +1,6 @@
-import { Widget, State } from "../interface";
+import { Widget, State } from "../../interface";
 export interface HTMLToggleElement extends Widget {
     state: State<boolean>;
     labels?: [[true, string], [false, string]];
 }
-export default function Toggle({ state: [chekced, setChecked], labels, options, }: HTMLToggleElement): import("react/jsx-runtime").JSX.Element;
+export default function Toggle({ state: [chekced, setChecked], labels, option, }: HTMLToggleElement): import("react/jsx-runtime").JSX.Element;

package/widget/{Toggle.js → template/Toggle.js}

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../util";
-export default function Toggle({ state: [chekced, setChecked], labels, options, }) {
-    const { disabled, className } = options ?? {};
+import { cn } from "../../util";
+export default function Toggle({ state: [chekced, setChecked], labels, option, }) {
+    const { disabled, className } = option ?? {};
     const container = {
         displays: "flex items-center",
         sizes: "h-6",

package/card/template/ProgressCard.d.ts

@@ -1,10 +0,0 @@
-import { Titles } from "../../interface";
-import { Theme } from "../../interface";
-type Step = [string, boolean];
-interface ProgressCardProps {
-    titles: Titles;
-    steps: Step[];
-    theme?: Theme;
-}
-export default function ProgressCard({ titles, steps, theme, }: ProgressCardProps): import("react/jsx-runtime").JSX.Element;
-export {};