@edu-tosel/design 1.0.45 → 1.0.46

package/modal/template/ConfirmModal/Tag.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ConfirmModal from "../../design/ConfirmModal.design";
+import { cn } from "../../../util";
+import { selectOne, selectPlural } from "../../../util/select";
+export default function Tag(props) {
+    const { state, tags, options } = props.tag;
+    const { selectHow } = options || { selectHow: "plural" };
+    const button = (key) => ({
+        sizes: "h-10",
+        styles: "rounded-full",
+        animations: "duration-300",
+        boundaries: state[0].includes(key)
+            ? "bg-green-dark text-white"
+            : "border border-gray-medium",
+    });
+    return (_jsx(ConfirmModal, { ...props, children: _jsx("div", { className: "grid grid-cols-4 gap-2.5 mt-4.75", children: tags.map(([key, value]) => (_jsx("button", { onClick: () => selectHow === "one"
+                    ? selectOne({ state, key })
+                    : selectPlural({ state, key }), className: cn(button(key)), children: value }, key))) }) }));
+}

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

@@ -3,5 +3,7 @@ declare function ConfirmModal(props: ConfirmProps): import("react/jsx-runtime").
 declare namespace ConfirmModal {
     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/ConfirmModal/index.js

@@ -2,9 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Confirm from "./Confirm";
 import Input from "./Input";
 import Reimage from "./Reimage";
+import Tag from "./Tag";
+import Switch from "./Switch";
 function ConfirmModal(props) {
     return _jsx(Confirm, { ...props });
 }
 ConfirmModal.Input = Input;
 ConfirmModal.Reimage = Reimage;
+ConfirmModal.Switch = Switch;
+ConfirmModal.Tag = Tag;
 export default ConfirmModal;

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, action, options, state, }: Omit<ModalProps, "children"> & {
+export default function Input<T>({ titles, showAction, options, 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, action, options, state, }) {
+export default function Input({ titles, showAction, options, state, }) {
     const { buttons } = options ?? {};
-    return (_jsx(ModalDesign, { titles: titles, action: action, 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) }) }));
+    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) }) }));
 }

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

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

package/overlay/design/Overlay.design.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTransition, animated } from "react-spring";
 import { cn } from "../../util";
-import { useWidgetStore } from "../../store";
-export default function OverlayDesign({ titles, children, action, }) {
-    const { removeView, setIsOwn } = useWidgetStore();
+import { useActionStore } from "../../store";
+export default function OverlayDesign({ titles, children, showAction, }) {
+    const { removeView, setIsOwn } = useActionStore();
     const { title } = titles;
-    const { isVisible, event } = action ?? {};
+    const { isVisible, event } = showAction ?? {};
     const container = {
         positions: "absolute top-0 right-0 z-30",
         sizes: "h-full",

package/overlay/template/Info.d.ts

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

package/overlay/template/Info.js

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

package/overlay/template/Manage.d.ts

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

package/overlay/template/Manage.js

@@ -4,13 +4,13 @@ import OverlayDesign from "../design/Overlay.design";
 import Frame from "../design/Frame.design";
 import { useId } from "react";
 import { cn } from "../../util";
-export default function Manage({ titles, action, elements, buttons, }) {
+export default function Manage({ titles, showAction, elements, buttons, }) {
     const id = useId();
     const body = {
         sizes: "w-full min-h-160 xl:h-120 ",
         styles: "overflow-y-scroll",
     };
-    return (_jsxs(OverlayDesign, { titles: titles, action: action, children: [_jsx("div", { className: cn(body), children: elements?.map(({ title, type, labels, state, selectOptions, disabled }) => {
+    return (_jsxs(OverlayDesign, { titles: titles, showAction: showAction, children: [_jsx("div", { className: cn(body), children: elements?.map(({ title, type, labels, state, selectOptions, disabled }) => {
                     if (type === "text")
                         return (_jsx(Frame, { title: title, children: _jsx("div", { className: "text-base pl-4", children: state[0] }) }, id + title));
                     if (type === "select")

package/package.json

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

package/store/index.d.ts

@@ -1,6 +1,6 @@
-import { Order, WidgetEvent } from "../interface";
-interface WidgetProps {
-    events: WidgetEvent[];
+import { Order, ActionEvent } from "../interface";
+interface ActionProps {
+    events: ActionEvent[];
     setView: (prop: string) => void;
     removeView: (prop: string) => void;
     clearView: () => void;
@@ -21,5 +21,5 @@ interface WidgetProps {
     isDark: boolean;
     setDark: () => void;
 }
-export declare const useWidgetStore: import("zustand").UseBoundStore<import("zustand").StoreApi<WidgetProps>>;
+export declare const useActionStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ActionProps>>;
 export {};

package/store/index.js

@@ -1,5 +1,5 @@
 import { create } from "zustand";
-export const useWidgetStore = create((set) => ({
+export const useActionStore = create((set) => ({
     events: [],
     setView: (prop) => set((state) => {
         state.setIsOwn(true);