@edu-tosel/design 1.0.327 → 1.0.329

package/layout/template/sign/Box.js

@@ -7,9 +7,9 @@ function Box({ children, className, texts }) {
         className,
     };
     const alarmText = {
-        textStyles: "text-crimson-burgundy font-medium text-xs leading-none",
+        textStyles: "text-red-500 font-medium text-xs leading-none",
     };
-    return (_jsxs("div", { className: "w-full", children: [_jsx("div", { className: cn(container), children: children }), texts && (_jsx("div", { className: "mt-2", children: texts.map((text) => (_jsx("div", { className: cn(alarmText), children: text }))) }))] }));
+    return (_jsxs("div", { className: "w-full", children: [_jsx("div", { className: cn(container), children: children }), texts && (_jsx("div", { className: "mt-3 flex flex-col gap-1 px-2", children: texts.map((text) => (_jsx("div", { className: cn(alarmText), children: text }))) }))] }));
 }
 function Fix({ children, className }) {
     return (_jsx(Box, { className: className, sizes: "w-full max-w-112.5 h-65 xs:h-67.5 pt-8 xs:pt-10.25 px-2.5 xs:px-5 pb-2.5 xs:pb-5", children: children }));

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.329",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",

package/version.txt

@@ -1 +1 @@
-1.0.327
+1.0.329

package/widget/template/Input/Form.js

@@ -21,7 +21,7 @@ export default function InputForm({ title, state, placeholder, isValid, type, on
     const styleByFlag = () => {
         const gray = "bg-gray-light/50 border-green-dark";
         const green = "bg-green-dark/10 text-green-dark border-green-dark";
-        const red = "bg-red-50 text-red-400 border-red-500";
+        const red = "bg-red-50 text-red-500 border-red-500";
         if (typeof isValid === "undefined")
             return gray;
         if (typeof isValid === "function")
@@ -42,9 +42,7 @@ export default function InputForm({ title, state, placeholder, isValid, type, on
         fonts: "text-sm",
         boundaries: "rounded-md outline-none",
         focuses: onFocus ? "border " : "border-0",
-        shadows: onFocus &&
-            !(isValid === false) &&
-            "shadow-[0px_0px_10px_0px_rgba(16,86,82,0.38)]",
+        shadows: onFocus && !(isValid === false) && "shadow-green",
     };
     useEffect(() => {
         if (type === "password") {