@edu-tosel/design 1.0.327 → 1.0.328

package/layout/template/sign/Button.d.ts

@@ -1,18 +1,17 @@
 import { OnClick, State } from "../../../interface";
-import { ReactNode } from "react";
 interface ButtonProps {
     title: string;
     onClick: OnClick;
     disabled?: boolean;
     size?: string;
-    icon?: ReactNode;
+    icon?: React.ReactNode;
     bg?: string;
 }
 interface SelectButtonProps {
     state: State<string>;
     buttons: {
         type: string;
-        icon: string;
+        icon: string | React.ReactNode;
         title: string;
     }[];
 }

package/layout/template/sign/Button.js

@@ -19,7 +19,7 @@ function Button({ title, onClick, disabled, size, icon, bg }) {
         }, className: cn(container), children: [title, icon && icon] }));
 }
 function Inner({ title, onClick, bg }) {
-    return (_jsx(Button, { title: title, onClick: onClick, size: "w-full sm:w-102.5 h-13.5", bg: bg }));
+    return (_jsx(Button, { title: title, onClick: onClick, size: "w-full h-13.5", bg: bg }));
 }
 function Selection({ buttons, state }) {
     const [value, setValue] = state;
@@ -27,12 +27,14 @@ function Selection({ buttons, state }) {
         return {
             displays: "flex flex-1 justify-center items-center gap-3",
             sizes: "h-15",
-            backgrounds: value === type ? "bg-green-dark/10 shadow-green" : "bg-gray-light",
+            backgrounds: value === type
+                ? "bg-green-dark/10 text-green-dark "
+                : "bg-gray-light text-gray-medium",
             styles: "rounded-lgx",
             animations: "duration-300",
         };
     };
-    return (_jsx("div", { className: "flex gap-2.5", children: buttons.map(({ icon, title, type }) => (_jsxs("button", { className: cn(container(type)), onClick: () => setValue(type), children: [_jsx("img", { src: icon }), _jsx("div", { children: title })] }, type))) }));
+    return (_jsx("div", { className: "flex gap-2.5", children: buttons.map(({ icon, title, type }) => (_jsxs("button", { className: cn(container(type)), onClick: () => setValue(type), children: [typeof icon === "string" ? _jsx("img", { src: icon }) : icon, _jsx("div", { children: title })] }, type))) }));
 }
 function WithTitle({ buttons, title, state }) {
     return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "leading-none", children: title }), _jsx(Selection, { buttons: buttons, state: state })] }));

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.327
+1.0.328