@edu-tosel/design 1.0.65 → 1.0.67

package/widget/template/Select/Tag.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../util";
+import { selectOne, selectPlural } from "../../../util/select";
+export default function SelectTag(props) {
+    const { state, selectOptions, selectHow, option } = props;
+    const { className, background, text } = option || {
+        selectHow: "plural",
+    };
+    const container = {
+        sizes: "w-full",
+        displays: "grid grid-cols-4 gap-2.5",
+        className,
+    };
+    const isSelectedStyle = [
+        background ?? "bg-green-dark",
+        text ?? "text-white",
+    ].join(" ");
+    const button = (key) => ({
+        sizes: "h-10",
+        styles: "rounded-full",
+        animations: "duration-300",
+        boundaries: state[0].includes(key)
+            ? isSelectedStyle
+            : "border border-gray-medium",
+    });
+    return (_jsx("div", { className: cn(container), children: selectOptions.map(({ title, value }) => (_jsx("button", { onClick: () => selectHow === "one"
+                ? selectOne({ state, key: value })
+                : selectPlural({ state, key: value }), className: cn(button(value)), children: title }, value))) }));
+}

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

@@ -1,6 +1,14 @@
 import _Select from "./Select";
 import LG from "./Select.LG";
+import Tag from "./Tag";
+import Handle from "./Handle";
+import Switch from "./Switch";
+import Swipe from "./Swipe";
 declare const Select: typeof _Select & {
     LG: typeof LG;
+    Tag: typeof Tag;
+    Handle: typeof Handle;
+    Switch: typeof Switch;
+    Swipe: typeof Swipe;
 };
 export default Select;

package/widget/template/Select/index.js

@@ -1,4 +1,8 @@
 import _Select from "./Select";
 import LG from "./Select.LG";
-const Select = Object.assign(_Select, { LG });
+import Tag from "./Tag";
+import Handle from "./Handle";
+import Switch from "./Switch";
+import Swipe from "./Swipe";
+const Select = Object.assign(_Select, { LG, Tag, Handle, Switch, Swipe });
 export default Select;

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

@@ -1,3 +1,17 @@
-import { SwitchProps } from "../../../interface";
-declare function Switch<T>({ state, values, display, option }: SwitchProps<T>): import("react/jsx-runtime").JSX.Element;
-export default Switch;
+import { Size, State } from "../../../interface";
+interface Option<T> {
+    title: string;
+    value: T;
+    icon?: string;
+}
+interface SelectSwitchProps<T> {
+    state: State<T>;
+    selectOptions: Option<T>[];
+    option?: {
+        size?: Size;
+        text?: string;
+        className?: string;
+    };
+}
+declare function SelectSwitch<T>({ state, selectOptions, option, }: SelectSwitchProps<T>): import("react/jsx-runtime").JSX.Element;
+export default SelectSwitch;

package/widget/template/Switch/Switch.js

@@ -5,12 +5,12 @@ const paddingSize = {
     lg: "p-2.5",
 };
 const widthSize = {
-    md: "w-25",
-    lg: "w-47.5",
+    md: "w-81",
+    lg: "w-100",
 };
 const heightSize = {
-    md: "h-7.5",
-    lg: "h-15",
+    md: "h-10.5",
+    lg: "h-20",
 };
 const gapSize = {
     md: "gap-x-1.5",
@@ -20,25 +20,24 @@ const textSize = {
     md: "text-sm",
     lg: "text-base",
 };
-function Switch({ state, values, display, option }) {
+function SelectSwitch({ state, selectOptions, option, }) {
     const { text, size, className } = option ?? {};
     const container = {
+        sizes: `${widthSize[size ?? "md"]} ${heightSize[size ?? "md"]}`,
         displays: `flex ${gapSize[size ?? "md"]}`,
         paddings: paddingSize[size ?? "md"],
-        styles: "rounded-full bg-gray-light p-2.5",
+        styles: "rounded-full bg-gray-light",
         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 (_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 })] }));
         }) }));
 }
-export default Switch;
+export default SelectSwitch;

package/widget/template/Obstacle.d.ts

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

package/widget/template/Obstacle.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../../util";
-export default function Obstacle({ disabled }) {
-    const obstacle = {
-        positions: "absolute",
-        sizes: "w-full h-full",
-        background: "bg-white/80 ",
-    };
-    return (disabled && (_jsx("div", { onClick: typeof disabled === "function" ? disabled : undefined, className: cn(obstacle) })));
-}