add checkbox

src/renderer/components/shared/bsm-button.component.tsx

@@ -4,6 +4,7 @@ import React from "react";
 import { BsmImage } from "./bsm-image.component";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
 import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
+import { useBestTextColor } from "renderer/hooks/use-best-text-color.hook";
 
 type BsmButtonType = "primary"|"success"|"cancel"|"error";
 
@@ -32,16 +33,7 @@ export function BsmButton({className, style, imgClassName, iconClassName, icon,
 
   const primaryColor = typeColor === "primary" ? useThemeColor("first-color") : null;
 
-  const textColor = !primaryColor ? null : (() => {
-    const hex = primaryColor.replaceAll("#", "");
-    const uicolors = [parseInt(hex.substring(0, 2), 16) / 255, parseInt(hex.substring(0, 2), 16) / 255, parseInt(hex.substring(0, 2), 16) / 255];
-    const c = uicolors.map(col => {
-        if (col <= 0.03928) { return col / 12.92; }
-        return Math.pow((col + 0.055) / 1.055, 2.4);
-    });
-    const L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);
-    return (L > 0.179) ? "#000" : "fff";
-  })();
+  const textColor = !primaryColor ? null : useBestTextColor(primaryColor);
 
   const renderTypeColor = (() => {
     if(typeColor === "primary"){ return ""; }
@@ -57,7 +49,7 @@ export function BsmButton({className, style, imgClassName, iconClassName, icon,
       <div onClick={e => onClick && onClick(e)} className={`${className} overflow-hidden cursor-pointer group ${(!withBar && (!!typeColor || !!color)) && "hover:brightness-[1.15]"} ${disabled && "brightness-75 cursor-not-allowed"} ${renderTypeColor}`} style={{...style, ...((!!primaryColor || !!color) && {backgroundColor: primaryColor ?? color})}}>
         { image && <BsmImage image={image} className={imgClassName}/> }
         { icon && <BsmIcon icon={icon} className={iconClassName ?? "h-full w-full text-gray-800 dark:text-white"}/> }
-        {text && (type === "submit" ? <button className="w-full h-full" style={{...(!!textColor && {color: textColor})}}>{t(text)}</button> : <span style={{...(!!textColor && {color: textColor})}} >{t(text)}</span>)}
+        {text && (type === "submit" ? <button type="submit" className="w-full h-full" style={{...(!!textColor && {color: textColor})}}>{t(text)}</button> : <span style={{...(!!textColor && {color: textColor})}} >{t(text)}</span>)}
         { withBar && (
           <div className="absolute bottom-0 left-0 w-full h-1 bg-current" style={{color: secondColor}}>
             <div className="absolute top-0 left-0 h-full w-full bg-current brightness-50"/>

src/renderer/components/shared/bsm-checkbox.component.tsx

@@ -0,0 +1,32 @@
+import { useState } from "react"
+import { BsmIcon } from "../svgs/bsm-icon.component"
+import { motion } from "framer-motion"
+import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
+import { useBestTextColor } from "renderer/hooks/use-best-text-color.hook";
+
+type Props = {className?:string, checked?: boolean, onChange?: (val: boolean) => void, disabled?: boolean}
+
+export function BsmCheckbox({className, checked, onChange, disabled} : Props) {
+
+    const [isChecked, setIsChecked] = useState(true);
+    const checkedColor = useThemeColor("first-color");
+    const iconColor = useBestTextColor(checkedColor);
+
+    const handleClick = () => {
+        if(disabled){ return; }
+        onChange && onChange(!checked);
+        setIsChecked(val => !val);
+    }
+
+    return (
+        <div className={`group ${className}`}>
+            {!disabled && <div className="glow-on-hover !w-[calc(100%+6px)] !h-[calc(100%+6px)] !-top-[3px] !-left-[3px] group-hover:opacity-100"/>}
+            
+            <div className={`w-full h-full bg-inherit border-2 rounded-md overflow-hidden flex items-center justify-center relative ${disabled ? "brightness-75 cursor-not-allowed" : "cursor-pointer"}`} onClick={handleClick}>
+                <motion.span className="absolute w-full h-full flex items-center justify-center" style={{backgroundColor: checkedColor}} initial={isChecked ? {scale: 1} : {scale: 0}} animate={isChecked ? {scale: 1} : {scale: 0}} transition={{duration: .1}}>
+                    <BsmIcon icon="check" style={{color: iconColor}}/>
+                </motion.span>
+            </div>
+        </div>
+  )
+}