fix: fix errors with biomejs

packages/react/components/Button.tsx

@@ -1,8 +1,9 @@
+import { type AsChild, Slot, type VariantProps, vcn } from "@pswui-lib";
 import React from "react";
-import { vcn, VariantProps, Slot, AsChild } from "@pswui-lib";
 
 const colors = {
-  disabled: "disabled:brightness-50 disabled:cursor-not-allowed disabled:opacity-50 disabled:saturate-50",
+  disabled:
+    "disabled:brightness-50 disabled:cursor-not-allowed disabled:opacity-50 disabled:saturate-50",
   outline: {
     focus: "dark:focus-visible:outline-white/20 focus-visible:outline-black/10",
   },
@@ -118,7 +119,12 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       className: buttonVariants(variantProps),
     };
 
-    return <Comp ref={ref} {...compProps} />;
+    return (
+      <Comp
+        ref={ref}
+        {...compProps}
+      />
+    );
   },
 );
 

packages/react/components/Checkbox.tsx

@@ -1,5 +1,5 @@
+import { type VariantProps, vcn } from "@pswui-lib";
 import React from "react";
-import { VariantProps, vcn } from "@pswui-lib";
 
 const checkboxColors = {
   background: {
@@ -99,10 +99,11 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
             viewBox="0 0 24 24"
             className={`${checked ? "opacity-100" : "opacity-0"} transition-opacity duration-75 ease-in-out`}
           >
+            <title>checked</title>
             <path
               fill="currentColor"
               d="M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z"
-            ></path>
+            />
           </svg>
         </label>
       </>

packages/react/components/Dialog/Component.tsx

@@ -1,12 +1,12 @@
+import { Slot, type VariantProps, vcn } from "@pswui-lib";
 import React, { useState } from "react";
-import { Slot, VariantProps, vcn } from "@pswui-lib";
 import ReactDOM from "react-dom";
 
 import {
   DialogContext,
+  type IDialogContext,
   initialDialogContext,
   useDialogContext,
-  IDialogContext,
 } from "./Context";
 
 /**
@@ -114,7 +114,11 @@ const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlay>(
               onClick?.(e);
             }}
           >
-            <div className={"w-screen max-w-full min-h-screen flex flex-col justify-center items-center"}>
+            <div
+              className={
+                "w-screen max-w-full min-h-screen flex flex-col justify-center items-center"
+              }
+            >
               {/* Layer for overflow positioning */}
               {children}
             </div>
@@ -191,8 +195,8 @@ const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
         ref={ref}
         className={dialogContentVariant(variantProps)}
         onClick={(e) => {
-          e.stopPropagation()
+          e.stopPropagation();
-          onClick?.(e)
+          onClick?.(e);
         }}
       >
         {children}

packages/react/components/Dialog/Context.ts

@@ -1,4 +1,9 @@
-import { Dispatch, SetStateAction, useContext, createContext } from "react";
+import {
+  type Dispatch,
+  type SetStateAction,
+  createContext,
+  useContext,
+} from "react";
 
 /**
  * =========================

packages/react/components/Drawer.tsx

@@ -1,13 +1,13 @@
+import { type AsChild, Slot, type VariantProps, vcn } from "@pswui-lib";
 import React, {
-  ComponentPropsWithoutRef,
+  type ComponentPropsWithoutRef,
-  TouchEvent as ReactTouchEvent,
+  type TouchEvent as ReactTouchEvent,
   forwardRef,
   useContext,
   useEffect,
   useRef,
   useState,
 } from "react";
-import { AsChild, Slot, VariantProps, vcn } from "@pswui-lib";
 import { createPortal } from "react-dom";
 
 interface IDrawerContext {
@@ -57,8 +57,7 @@ const DrawerRoot = ({ children, closeThreshold, opened }: DrawerRootProps) => {
       opened: opened ?? prev.opened,
       closeThreshold: closeThreshold ?? prev.closeThreshold,
     }));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [closeThreshold, opened, setState]);
-  }, [closeThreshold, opened]);
 
   return (
     <DrawerContext.Provider value={state}>{children}</DrawerContext.Provider>
@@ -302,8 +301,7 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
         window.removeEventListener("touchmove", onMouseMove);
         window.removeEventListener("touchend", onMouseUp);
       };
-      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [state, setState, dragState, position]);
-    }, [state, dragState, position]);
 
     return (
       <div

packages/react/components/Input.tsx

@@ -1,5 +1,5 @@
+import { type VariantProps, vcn } from "@pswui-lib";
 import React from "react";
-import { VariantProps, vcn } from "@pswui-lib";
 
 const inputColors = {
   background: {
@@ -92,7 +92,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   const innerRef = React.useRef<HTMLInputElement | null>(null);
 
   React.useEffect(() => {
-    if (innerRef && innerRef.current) {
+    if (innerRef?.current) {
       innerRef.current.setCustomValidity(invalid ?? "");
     }
   }, [invalid]);

packages/react/components/Label.tsx

@@ -1,5 +1,5 @@
+import { type VariantProps, vcn } from "@pswui-lib";
 import React from "react";
-import { VariantProps, vcn } from "@pswui-lib";
 
 const [labelVariant, resolveLabelVariantProps] = vcn({
   base: "has-[input[disabled]]:brightness-75 has-[input[disabled]]:cursor-not-allowed has-[input:invalid]:text-red-500",

packages/react/components/Popover.tsx

@@ -1,5 +1,5 @@
+import { type AsChild, Slot, type VariantProps, vcn } from "@pswui-lib";
 import React, { useContext, useEffect, useRef } from "react";
-import { AsChild, Slot, VariantProps, vcn } from "@pswui-lib";
 
 interface IPopoverContext {
   opened: boolean;
@@ -119,7 +119,7 @@ const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(
       return () => {
         document.removeEventListener("mousedown", handleOutsideClick);
       };
-    }, [internalRef, setState]);
+    }, [setState]);
 
     return (
       <div
@@ -130,7 +130,11 @@ const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(
         })}
         ref={(el) => {
           internalRef.current = el;
-          typeof ref === "function" ? ref(el) : ref && (ref.current = el);
+          if (typeof ref === "function") {
+            ref(el);
+          } else if (ref) {
+            ref.current = el;
+          }
         }}
       >
         {children}

packages/react/components/Switch.tsx

@@ -1,5 +1,5 @@
+import { type VariantProps, vcn } from "@pswui-lib";
 import React from "react";
-import { VariantProps, vcn } from "@pswui-lib";
 
 const switchColors = {
   background: {

packages/react/components/Tabs/Component.tsx

@@ -1,7 +1,7 @@
-import { AsChild, Slot, VariantProps, vcn } from "@pswui-lib";
+import { type AsChild, Slot, type VariantProps, vcn } from "@pswui-lib";
 import React from "react";
 
-import { TabContextBody, TabContext, Tab } from "./Context";
+import { type Tab, TabContext, type TabContextBody } from "./Context";
 
 interface TabProviderProps {
   defaultName: string;
@@ -30,7 +30,12 @@ interface TabListProps
 const TabList = (props: TabListProps) => {
   const [variantProps, restProps] = resolveTabListVariantProps(props);
 
-  return <div className={TabListVariant(variantProps)} {...restProps} />;
+  return (
+    <div
+      className={TabListVariant(variantProps)}
+      {...restProps}
+    />
+  );
 };
 
 const [TabTriggerVariant, resolveTabTriggerVariantProps] = vcn({
@@ -76,7 +81,7 @@ const TabTrigger = (props: TabTriggerProps) => {
       });
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [name]);
+  }, [name, setContext]);
 
   const Comp = props.asChild ? Slot : "button";
 
@@ -119,7 +124,10 @@ const TabContent = (props: TabContentProps) => {
   const { name, ...restProps } = restPropsBeforeParse;
   const [context] = React.useContext(TabContext);
 
-  if (context.active[1] === name) {
+  if (context.active[1] !== name) {
+    return null;
+  }
+
   return (
     <Slot
       className={tabContentVariant({
@@ -128,9 +136,6 @@ const TabContent = (props: TabContentProps) => {
       {...restProps}
     />
   );
-  } else {
-    return null;
-  }
 };
 
 export { TabProvider, TabList, TabTrigger, TabContent };

packages/react/components/Toast/Component.tsx

@@ -1,20 +1,20 @@
+import { type VariantProps, vcn } from "@pswui-lib";
 import React, { useEffect, useId, useRef } from "react";
 import ReactDOM from "react-dom";
-import { VariantProps, vcn } from "@pswui-lib";
 
-import { toastVariant } from "./Variant";
 import {
-  ToastOption,
+  type ToastOption,
-  toasts,
-  subscribeSingle,
-  getSingleSnapshot,
-  notifySingle,
   close,
-  notify,
   defaultToastOption,
-  subscribe,
+  getSingleSnapshot,
   getSnapshot,
+  notify,
+  notifySingle,
+  subscribe,
+  subscribeSingle,
+  toasts,
 } from "./Store";
+import { toastVariant } from "./Variant";
 
 const ToastTemplate = ({
   id,
@@ -74,7 +74,7 @@ const ToastTemplate = ({
         );
         transitionDuration = style
           ? {
-              value: parseFloat(style[1] ?? "0"),
+              value: Number.parseFloat(style[1] ?? "0"),
               unit: style[3] ?? style[2] ?? "s",
             }
           : null;
@@ -96,7 +96,7 @@ const ToastTemplate = ({
       }, calculatedTransitionDuration);
       return () => clearTimeout(timeout);
     }
-  }, [id, toastData.life, toastData.closeTimeout, toastData.closeButton]);
+  }, [id, toastData.life, toastData.closeTimeout]);
 
   return (
     <div
@@ -107,13 +107,18 @@ const ToastTemplate = ({
       ref={ref}
     >
       {toastData.closeButton && (
-        <button className="absolute top-2 right-2" onClick={() => close(id)}>
+        <button
+          className="absolute top-2 right-2"
+          onClick={() => close(id)}
+          type={"button"}
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="1.2rem"
             height="1.2rem"
             viewBox="0 0 24 24"
           >
+            <title>Close</title>
             <path
               fill="currentColor"
               d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"
@@ -167,7 +172,7 @@ const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
   if (toasterInstance && id !== toasterInstance.id) {
     if (process.env.NODE_ENV === "development" && !muteDuplicationWarning) {
       console.warn(
-        `Multiple Toaster instances detected. Only one Toaster is allowed.`,
+        "Multiple Toaster instances detected. Only one Toaster is allowed.",
       );
     }
     return null;

packages/react/components/Toast/Hook.ts

@@ -1,4 +1,4 @@
-import { addToast, update, close } from "./Store";
+import { addToast, close, update } from "./Store";
 
 export function useToast() {
   return {

packages/react/components/Toast/Store.ts

@@ -1,4 +1,4 @@
-import { ToastBody } from "./Variant";
+import type { ToastBody } from "./Variant";
 
 export interface ToastOption {
   closeButton: boolean;
@@ -54,11 +54,11 @@ export function getSingleSnapshot(id: `${number}`) {
 }
 
 export function notify() {
-  subscribers.forEach((subscriber) => subscriber());
+  for (const subscriber of subscribers) subscriber();
 }
 
 export function notifySingle(id: `${number}`) {
-  toasts[id].subscribers.forEach((subscriber) => subscriber());
+  for (const subscriber of toasts[id].subscribers) subscriber();
 }
 
 export function close(id: `${number}`) {

packages/react/components/Toast/Variant.ts

@@ -1,4 +1,4 @@
-import { VariantProps, vcn } from "@pswui-lib";
+import { type VariantProps, vcn } from "@pswui-lib";
 
 const toastColors = {
   background: "bg-white dark:bg-black",

packages/react/components/Tooltip.tsx

@@ -1,5 +1,5 @@
+import { type AsChild, Slot, type VariantProps, vcn } from "@pswui-lib";
 import React, { useState } from "react";
-import { AsChild, Slot, VariantProps, vcn } from "@pswui-lib";
 
 interface TooltipContextBody {
   position: "top" | "bottom" | "left" | "right";

packages/react/lib/Slot.tsx

@@ -1,5 +1,5 @@
-import { twMerge } from "tailwind-merge";
 import React from "react";
+import { twMerge } from "tailwind-merge";
 
 /**
  * Merges the react props.
@@ -60,14 +60,15 @@ function mergeReactProps(
  * @returns The single ref.
  */
 function combinedRef<I>(refs: React.Ref<I | null>[]) {
-  return (instance: I | null) =>
+  return (instance: I | null) => {
-    refs.forEach((ref) => {
+    for (const ref of refs) {
       if (ref instanceof Function) {
         ref(instance);
       } else if (ref) {
         (ref as React.MutableRefObject<I | null>).current = instance;
       }
-    });
+    }
+  };
 }
 
 interface SlotProps {

packages/react/lib/vcn.ts

@@ -60,7 +60,10 @@ type VariantKV<V extends VariantType> = {
 /**
  * Used for safely casting `Object.entries(<VariantKV>)`
  */
-type VariantKVEntry<V extends VariantType> = [keyof V, BooleanString<keyof V[keyof V] & string>][]
+type VariantKVEntry<V extends VariantType> = [
+  keyof V,
+  BooleanString<keyof V[keyof V] & string>,
+][];
 
 /**
  * Takes VariantKV as parameter, return className string.
@@ -75,7 +78,9 @@ type VariantKVEntry<V extends VariantType> = [keyof V, BooleanString<keyof V[key
  *   ]
  * })
  */
-type DynamicClassName<V extends VariantType> = (variantProps: VariantKV<V>) => string
+type DynamicClassName<V extends VariantType> = (
+  variantProps: VariantKV<V>,
+) => string;
 
 /**
  * Takes VariantType, and returns a type that represents the preset object.
@@ -129,7 +134,7 @@ export function vcn<V extends VariantType>(param: {
   /**
    * Any Props -> Variant Props, Other Props
    */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // biome-ignore lint/suspicious/noExplicitAny: using unknown causes error `Index signature for type 'string' is missing in type --Props`.
   <AnyPropBeforeResolve extends Record<string, any>>(
     anyProps: AnyPropBeforeResolve,
   ) => [
@@ -161,7 +166,7 @@ export function vcn<V extends VariantType, P extends PresetType<V>>(param: {
   /**
    * Any Props -> Variant Props, Other Props
    */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // biome-ignore lint/suspicious/noExplicitAny: using unknown causes error `Index signature for type 'string' is missing in type --Props`.
   <AnyPropBeforeResolve extends Record<string, any>>(
     anyProps: AnyPropBeforeResolve,
   ) => [
@@ -196,19 +201,20 @@ export function vcn<
    * After transforming props to final version (which means "after overriding default, preset, and variant props sent via component props")
    * It turns final version of variant props to className
    */
-  function __transformer__(final: VariantKV<V>, dynamics: string[], propClassName?: string): string {
+  function __transformer__(
+    final: VariantKV<V>,
+    dynamics: string[],
+    propClassName?: string,
+  ): string {
     const classNames: string[] = [];
 
-    for (const [variantName, variantKey] of (Object.entries(final) as VariantKVEntry<V>)) {
+    for (const [variantName, variantKey] of Object.entries(
-      classNames.push(variants[variantName][variantKey.toString()])
+      final,
+    ) as VariantKVEntry<V>) {
+      classNames.push(variants[variantName][variantKey.toString()]);
     }
 
-    return twMerge(
+    return twMerge(base, ...classNames, ...dynamics, propClassName);
-      base,
-      ...classNames,
-      ...dynamics,
-      propClassName,
-    )
   }
 
   return [
@@ -244,24 +250,31 @@ export function vcn<
 
       // Omit<Partial<VariantKV<V>> & { className; preset; }, className | preset> = Partial<VariantKV<V>> (safe to cast)
       // We all know `keyof V` = string, right? (but typescript says it's not, so.. attacking typescript with unknown lol)
-      const otherVariantProps = _otherVariantProps as unknown as Partial<VariantKV<V>>
+      const otherVariantProps = _otherVariantProps as unknown as Partial<
+        VariantKV<V>
+      >;
 
       const kv: VariantKV<V> = { ...defaults };
 
       // Preset Processing
       if (presets && preset && preset in presets) {
-        for (const [variantName, variantKey] of (Object.entries((presets)[preset]) as VariantKVEntry<V>)) {
+        for (const [variantName, variantKey] of Object.entries(
-          kv[variantName] = variantKey
+          // typescript bug (casting to NonNullable<P> required)
+          (presets as NonNullable<P>)[preset],
+        ) as VariantKVEntry<V>) {
+          kv[variantName] = variantKey;
         }
       }
 
       // VariantProps Processing
-      for (const [variantName, variantKey] of (Object.entries(otherVariantProps) as VariantKVEntry<V>)) {
+      for (const [variantName, variantKey] of Object.entries(
-        kv[variantName] = variantKey
+        otherVariantProps,
+      ) as VariantKVEntry<V>) {
+        kv[variantName] = variantKey;
       }
 
       // make dynamics result
-      const dynamicClasses: string[] = []
+      const dynamicClasses: string[] = [];
       for (const dynamicFunction of dynamics) {
         dynamicClasses.push(dynamicFunction(kv));
       }

packages/react/vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from "vite";
+import { resolve } from "node:path";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "tailwindcss";
-import { resolve } from "node:path";
+import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({