@edu-tosel/design 1.0.45 → 1.0.47

package/util/select.d.ts

@@ -0,0 +1,10 @@
+import { State } from "../interface";
+declare function selectPlural<T>({ state, key }: {
+    state: State<T[]>;
+    key: T;
+}): void;
+declare function selectOne<T>({ state, key }: {
+    state: State<T[]>;
+    key: T;
+}): void;
+export { selectPlural, selectOne };

package/util/select.js

@@ -0,0 +1,10 @@
+function selectPlural({ state, key }) {
+    if (state[0].includes(key)) {
+        return state[1](state[0].filter((v) => v !== key));
+    }
+    return state[1]([...state[0], key]);
+}
+function selectOne({ state, key }) {
+    return state[1]([key]);
+}
+export { selectPlural, selectOne };

package/version.txt

@@ -1 +1 @@
-1.0.45
+1.0.47

package/{html/widget → widget}/CheckBox.d.ts

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

package/{html/widget → widget}/DatePicker.d.ts

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

package/{html/widget → widget}/EmailInput.d.ts

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

package/{html/widget → widget}/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",

package/{html/widget → widget}/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/{html/widget → widget}/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/Toggle.d.ts

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

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

@@ -1,14 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../../util";
-const widthSize = {
-    xs: "w-32",
-    sm: "w-48",
-    md: "w-64",
-    lg: "w-96",
-    xl: "w-128",
-    "2xl": "w-144",
-    full: "w-full",
-};
+import { cn } from "../util";
 export default function Toggle({ state: [chekced, setChecked], labels, options, }) {
     const { disabled, className } = options ?? {};
     const container = {

package/{html → 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 "../widget/Obstacle";
+import Obstacle from "../Obstacle";
 const widthSize = {
     xs: "w-10",
     sm: "w-22.5",

package/{html → widget}/design/Select.design.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useState } from "react";
 import { cn, useFlag } from "../../util";
 import { useTransition, animated } from "react-spring";
-import { useWidgetStore } from "../../store";
+import { useActionStore } from "../../store";
 const widthSize = {
     xs: "w-10",
     sm: "w-22.5",
@@ -14,7 +14,7 @@ const heightSize = {
 };
 export default function SelectDesign({ state, selectOptions, placeholder, options, }) {
     const id = useId();
-    const { setIsOwn, setIsOwnId } = useWidgetStore();
+    const { setIsOwn, setIsOwnId } = useActionStore();
     const [value, setValue] = state;
     const [text, setText] = useState("");
     const [search, setSearch] = useState("");

package/widget/design/Tag.design.js

@@ -0,0 +1 @@
+"use strict";

package/{html → widget}/index.d.ts

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

package/{html → widget}/index.js

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

package/{html → widget}/template/Input.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useState, useRef } from "react";
 import { cn, gradient } from "../../util";
-import Obstacle from "../widget/Obstacle";
+import Obstacle from "../Obstacle";
 import Label from "./Label";
 const widthSize = {
     xs: "w-28",

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

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

package/widget/template/Switch/Handle.js

@@ -0,0 +1,26 @@
+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 ?? {};
+    const valueIndex = values?.indexOf(state?.[0]);
+    const container = {
+        positions: "relative",
+        sizes: "w-102.5 h-10",
+        styles: "rounded-full bg-gray-light p-1.25",
+        className,
+    };
+    const area = {
+        sizes: `w-${20 * (valueIndex + 1)} h-7.5`,
+        displays: "flex justify-end",
+        background: gradient.bg.greenToRed,
+        styles: "rounded-full p-1.25",
+        animations: "duration-200",
+    };
+    const handle = {
+        sizes: "w-5 h-5",
+        styles: "rounded-full bg-white",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(area), children: _jsx("div", { className: cn(handle) }) }), _jsx("div", { className: "absolute flex w-full h-full top-0 left-0", children: values?.map((value) => (_jsx("button", { onClick: () => {
+                        return state?.[1](value);
+                    }, className: "flex flex-1 h-10 " }, value))) })] }));
+}

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

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

package/widget/template/Switch/Switch.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+const paddingSize = {
+    md: "p-1.5",
+    lg: "p-2.5",
+};
+const widthSize = {
+    md: "w-25",
+    lg: "w-47.5",
+};
+const heightSize = {
+    md: "h-7.5",
+    lg: "h-15",
+};
+const gapSize = {
+    md: "gap-x-1.5",
+    lg: "gap-x-2.5",
+};
+const textSize = {
+    md: "text-sm",
+    lg: "text-base",
+};
+function Switch({ state, values, display, options }) {
+    const { text, size, className } = options ?? {};
+    const container = {
+        displays: `flex ${gapSize[size ?? "md"]}`,
+        paddings: paddingSize[size ?? "md"],
+        styles: "rounded-full bg-gray-light p-2.5",
+        className,
+    };
+    const button = (flag) => ({
+        sizes: `${widthSize[size ?? "md"]} ${heightSize[size ?? "md"]}`,
+        displays: "flex flex-1 gap-x-3 justify-center items-center",
+        backgrounds: flag ? "bg-white" : "bg-transparent",
+        text,
+        textSizes: textSize[size ?? "md"],
+        styles: "rounded-full ",
+    });
+    return (_jsx("div", { className: cn(container), children: values?.map((value) => {
+            const { title, icon } = (display && display[value]) ?? {};
+            return (_jsxs("button", { onClick: () => state[1](value), className: cn(button(value === state[0])), children: [icon && _jsx("img", { src: icon }), _jsx("div", { children: title })] }));
+        }) }));
+}
+export default Switch;

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

@@ -0,0 +1,6 @@
+import _Switch from "./Switch";
+import Handle from "./Handle";
+declare const Switch: typeof _Switch & {
+    Handle: typeof Handle;
+};
+export default Switch;

package/widget/template/Switch/index.js

@@ -0,0 +1,4 @@
+import _Switch from "./Switch";
+import Handle from "./Handle";
+const Switch = Object.assign(_Switch, { Handle });
+export default Switch;

package/html/widget/Toggle.d.ts

@@ -1,2 +0,0 @@
-import { HTMLToggleElement } from "../../interface";
-export default function Toggle({ state: [chekced, setChecked], labels, options, }: HTMLToggleElement): import("react/jsx-runtime").JSX.Element;

package/layout/design/Tab.design.d.ts

@@ -1,5 +0,0 @@
-import { Button } from "../../interface";
-export default function Tab({ tabs, textColor, }: {
-    tabs: Button[];
-    textColor?: string;
-}): import("react/jsx-runtime").JSX.Element;

package/layout/design/Tab.design.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import { cn } from "../../util";
-export default function Tab({ tabs, textColor, }) {
-    const [tabsSelection, setTabsSelection] = useState(tabs.map((_, i) => i === 0));
-    const container = {
-        positions: "xl:absolute xl:-bottom-18 xl:left-0 z-5",
-        displays: "hidden xl:flex xl:items-center xl:gap-2.5",
-        sizes: "xl:h-14.5",
-        paddings: "px-2.5",
-        styles: "bg-white/30 rounded-xl ",
-    };
-    const button = {
-        styles: "rounded-md duration-500 ",
-        sizes: "h-9 w-32 ",
-        font: textColor ?? "text-green-dark",
-    };
-    return (_jsx("div", { className: cn(container), children: tabs.map(({ title, onClick }, index) => (_jsx("button", { onClick: () => {
-                setTabsSelection(tabsSelection.map((_, i) => i === index));
-                return onClick && onClick();
-            }, className: cn(button, `${tabsSelection[index] && "bg-white rounded-2xl"}`), children: title }, title))) }));
-}

package/layout/template/Events.d.ts

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