@geops/rvf-mobility-web-component 0.1.46 → 0.1.47-beta.0

package/src/RealtimeLayer/RealtimeLayer.tsx

@@ -1,13 +1,13 @@
-import type { RealtimeMot, RealtimeTrainId } from "mobility-toolbox-js/types";
-
-import { RealtimeLayer as MtbRealtimeLayer } from "mobility-toolbox-js/ol";
-import { RealtimeLayerOptions } from "mobility-toolbox-js/ol/layers/RealtimeLayer";
+import {
+  getGraphByZoom,
+  RealtimeLayer as MtbRealtimeLayer,
+} from "mobility-toolbox-js/ol";
 import { unByKey } from "ol/Observable";
 import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
 import centerOnVehicle from "../utils/centerOnVehicle";
-import { RVF_LAYERS_NAMES } from "../utils/constants";
+import { LAYER_NAME_REALTIME } from "../utils/constants";
 import getDelayColorForVehicle from "../utils/getDelayColorForVehicle";
 import getDelayFontForVehicle from "../utils/getDelayFontForVehicle";
 import getDelayTextForVehicle from "../utils/getDelayTextForVehicle";
@@ -15,17 +15,26 @@ import getTextFontForVehicle from "../utils/getTextFontForVehicle";
 import getTextForVehicle from "../utils/getTextForVehicle";
 import useMapContext from "../utils/hooks/useMapContext";
 
-const TRACKING_ZOOM = 16;
+import type { RealtimeLayerOptions } from "mobility-toolbox-js/ol/layers/RealtimeLayer";
+import type {
+  RealtimeMot,
+  RealtimeStation,
+  RealtimeTrainId,
+  StyleMetadataGraphs,
+} from "mobility-toolbox-js/types";
 
-export type RealtimeLayerProps = RealtimeLayerOptions & Record<string, unknown>;
+const TRACKING_ZOOM = 16;
+const useGraphs = false;
 
-function RealtimeLayer(props: RealtimeLayerProps) {
+function RealtimeLayer(props: Partial<RealtimeLayerOptions>) {
   const {
     apikey,
+    baseLayer,
     isFollowing,
     isTracking,
     map,
     mots,
+    realtimebboxparameters,
     realtimeurl,
     setIsFollowing,
     setIsTracking,
@@ -42,14 +51,25 @@ function RealtimeLayer(props: RealtimeLayerProps) {
     if (!apikey || !realtimeurl) {
       return null;
     }
-    const layer = new MtbRealtimeLayer({
+    const lay = new MtbRealtimeLayer({
       apiKey: apikey,
+      bboxParameters: realtimebboxparameters
+        ?.split(" ")
+        .reduce((acc, string) => {
+          if (!string) {
+            return acc;
+          }
+          const [key, value] = string.split("=");
+          acc[key] = value;
+          return acc;
+        }, {}),
       getMotsByZoom: mots
         ? () => {
             return mots.split(",") as RealtimeMot[];
           }
         : undefined,
-      name: RVF_LAYERS_NAMES.echtzeit,
+      isQueryable: true,
+      name: LAYER_NAME_REALTIME,
       tenant,
       url: realtimeurl,
       zIndex: 1,
@@ -64,8 +84,8 @@ function RealtimeLayer(props: RealtimeLayerProps) {
       },
     });
 
-    return layer;
-  }, [apikey, mots, realtimeurl, tenant, props]);
+    return lay;
+  }, [apikey, realtimeurl, realtimebboxparameters, mots, tenant, props]);
 
   useEffect(() => {
     if (!map || !layer) {
@@ -153,11 +173,11 @@ function RealtimeLayer(props: RealtimeLayerProps) {
       // Once the map is zoomed on the vehicle we follow him, only recenter , no zoom changes.
       if (success === true) {
         interval = setInterval(() => {
-          centerOnVehicle(layer?.trajectories?.[stopSequence.id], map);
+          void centerOnVehicle(layer?.trajectories?.[stopSequence.id], map);
         }, 1000);
       }
     };
-    followVehicle(stopSequence.id);
+    void followVehicle(stopSequence.id);
 
     return () => {
       clearInterval(interval);
@@ -179,14 +199,11 @@ function RealtimeLayer(props: RealtimeLayerProps) {
     if (!stationId || !layer?.api) {
       return;
     }
-    const subscribe = async () => {
-      layer?.api?.subscribe(`station ${stationId}`, ({ content }) => {
-        if (content) {
-          setStation(content);
-        }
-      });
-    };
-    subscribe();
+    layer?.api?.subscribe(`station ${stationId}`, ({ content }) => {
+      if (content) {
+        setStation(content as RealtimeStation);
+      }
+    });
 
     return () => {
       setStation(null);
@@ -202,18 +219,19 @@ function RealtimeLayer(props: RealtimeLayerProps) {
       return;
     }
     layer.selectedVehicleId = trainId;
-    layer.highlightTrajectory(trainId);
-    const subscribe = async () => {
-      layer?.api?.subscribeStopSequence(trainId, ({ content }) => {
-        if (content) {
-          const [firstStopSequence] = content;
-          if (firstStopSequence) {
-            setStopSequence(firstStopSequence);
-          }
+    layer.highlightTrajectory(trainId).catch((err) => {
+      // eslint-disable-next-line no-console
+      console.error("Error highlighting trajectory:", err);
+    });
+
+    layer?.api?.subscribeStopSequence(trainId, ({ content }) => {
+      if (content) {
+        const [firstStopSequence] = content;
+        if (firstStopSequence) {
+          setStopSequence(firstStopSequence);
         }
-      });
-    };
-    subscribe();
+      }
+    });
 
     return () => {
       setStopSequence(null);
@@ -225,6 +243,27 @@ function RealtimeLayer(props: RealtimeLayerProps) {
     };
   }, [trainId, layer, layer?.api, setStopSequence]);
 
+  // Get graphs value
+  useEffect(() => {
+    if (!map || !baseLayer || !useGraphs) {
+      return;
+    }
+    const key = map.once("rendercomplete", () => {
+      const metadata = baseLayer.mapLibreMap?.getStyle()?.metadata as {
+        graphs: StyleMetadataGraphs;
+      };
+      const graphByZoom = [];
+      for (let i = 0; i < 26; i++) {
+        graphByZoom.push(getGraphByZoom(i, metadata?.graphs));
+      }
+      layer.engine.graphByZoom = graphByZoom;
+      layer.engine.setBbox();
+    });
+    return () => {
+      unByKey(key);
+    };
+  }, [map, baseLayer, layer]);
+
   return null;
 }
 

package/src/RouteDestination/RouteDestination.tsx

@@ -1,8 +1,8 @@
-import type { RealtimeStopSequence } from "mobility-toolbox-js/types";
-
-import { JSX, PreactDOMAttributes } from "preact";
 import { memo } from "preact/compat";
 
+import type { RealtimeStopSequence } from "mobility-toolbox-js/types";
+import type { JSX, PreactDOMAttributes } from "preact";
+
 export type RouteDestinationProps = {
   stopSequence?: RealtimeStopSequence;
 } & JSX.HTMLAttributes<HTMLSpanElement> &

package/src/RouteIcon/RouteIcon.tsx

@@ -1,10 +1,4 @@
-import {
-  RealtimeDeparture,
-  RealtimeLine,
-  RealtimeStopSequence,
-  RealtimeTrajectory,
-} from "mobility-toolbox-js/types";
-import { JSX, PreactDOMAttributes } from "preact";
+import { twMerge } from "tailwind-merge";
 
 import NoRealtime from "../icons/NoRealtime";
 import getMainColorForVehicle from "../utils/getMainColorForVehicle";
@@ -12,18 +6,30 @@ import getTextColor from "../utils/getTextColor";
 import getTextFontForVehicle from "../utils/getTextFontForVehicle";
 import getTextForVehicle from "../utils/getTextForVehicle";
 
+import type {
+  RealtimeDeparture,
+  RealtimeLine,
+  RealtimeStopSequence,
+  RealtimeTrajectory,
+} from "mobility-toolbox-js/types";
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
+
 export type RouteIconProps = {
+  className?: string;
   departure?: RealtimeDeparture;
+  displayNoRealtimeIcon?: boolean;
   line?: RealtimeLine;
   stopSequence?: RealtimeStopSequence;
   trajectory?: RealtimeTrajectory;
-} & JSX.HTMLAttributes<HTMLSpanElement> &
+} & HTMLAttributes<HTMLSpanElement> &
   PreactDOMAttributes;
 const fontSizesByNbLetters = [16, 16, 16, 14, 12];
 
 function RouteIcon({
   children,
+  className,
   departure,
+  displayNoRealtimeIcon = false,
   line,
   stopSequence,
   trajectory,
@@ -57,24 +63,26 @@ function RouteIcon({
   }
 
   return (
-    <>
-      <span
-        className="relative flex h-[40px] min-w-[40px] items-center justify-center rounded-full border px-1"
-        style={{
-          backgroundColor,
-          borderColor,
-          color,
-          font,
-        }}
-        {...props}
-      >
-        {children || text}
+    <span
+      className={twMerge(
+        "relative flex h-[40px] min-w-[40px] items-center justify-center rounded-full border-2 px-1",
+        className,
+      )}
+      style={{
+        backgroundColor,
+        borderColor,
+        color,
+        font,
+      }}
+      {...props}
+    >
+      {children || text}
 
-        {showNoRealtimeIcon && !isCancelled && !hasRealtime && (
-          <NoRealtime className={"absolute -left-2 -top-2"} />
-        )}
-      </span>
-    </>
+      {displayNoRealtimeIcon &&
+        showNoRealtimeIcon &&
+        !isCancelled &&
+        !hasRealtime && <NoRealtime className={"absolute -top-2 -left-2"} />}
+    </span>
   );
 }
 export default RouteIcon;

package/src/RouteIcon/index.tsx

@@ -1 +1 @@
-export { default } from "./RouteIcon";
+export { default } from "../RvfRouteIcon";

package/src/RouteIdentifier/RouteIdentifer.tsx

@@ -1,7 +1,8 @@
-import { RealtimeStopSequence } from "mobility-toolbox-js/types";
-import { JSX, PreactDOMAttributes } from "preact";
 import { memo } from "preact/compat";
 
+import type { RealtimeStopSequence } from "mobility-toolbox-js/types";
+import type { JSX, PreactDOMAttributes } from "preact";
+
 export type RouteIdentifierProps = {
   stopSequence?: RealtimeStopSequence;
 } & JSX.HTMLAttributes<HTMLSpanElement> &
@@ -14,11 +15,11 @@ function RouteIdentifier({ stopSequence, ...props }: RouteIdentifierProps) {
     // first part of the id, without leading zeros.
     let id = routeIdentifier;
 
-    if (/\./.test(routeIdentifier)) {
+    if (routeIdentifier.includes(".")) {
       [id] = routeIdentifier.split(".");
-    } else if (/_/.test(routeIdentifier)) {
+    } else if (routeIdentifier.includes("_")) {
       [id] = routeIdentifier.split("_");
-    } else if (/:/.test(routeIdentifier)) {
+    } else if (routeIdentifier.includes(":")) {
       [id] = routeIdentifier.split(":");
     }
 

package/src/RouteInfos/RouteInfos.tsx

@@ -1,10 +1,11 @@
-import { RealtimeStopSequence } from "mobility-toolbox-js/types";
-import { JSX, PreactDOMAttributes } from "preact";
 import { memo } from "preact/compat";
 
 import RouteDestination from "../RouteDestination";
 import RouteIdentifier from "../RouteIdentifier";
 
+import type { RealtimeStopSequence } from "mobility-toolbox-js/types";
+import type { JSX, PreactDOMAttributes } from "preact";
+
 export type RouteInfosProps = {
   stopSequence?: RealtimeStopSequence;
 } & JSX.HTMLAttributes<HTMLDivElement> &
@@ -13,7 +14,10 @@ export type RouteInfosProps = {
 function RouteInfos({ stopSequence, ...props }: RouteInfosProps) {
   return (
     <div {...props}>
-      <RouteDestination className="font-bold" stopSequence={stopSequence} />
+      <RouteDestination
+        className="text-base font-bold"
+        stopSequence={stopSequence}
+      />
       <RouteIdentifier className="text-sm" stopSequence={stopSequence} />
     </div>
   );

package/src/RouteSchedule/RouteSchedule.tsx

@@ -1,6 +1,3 @@
-import type { RealtimeStop } from "mobility-toolbox-js/types";
-import type { JSX, PreactDOMAttributes } from "preact";
-
 import { memo } from "preact/compat";
 import { useEffect, useRef } from "preact/hooks";
 
@@ -9,6 +6,9 @@ import RouteScheduleHeader from "../RouteScheduleHeader";
 import RouteStop from "../RouteStop";
 import useMapContext from "../utils/hooks/useMapContext";
 
+import type { RealtimeStop } from "mobility-toolbox-js/types";
+import type { JSX, PreactDOMAttributes } from "preact";
+
 export type RouteScheduleProps = JSX.HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 

package/src/RouteScheduleFooter/RouteScheduleFooter.tsx

@@ -25,7 +25,7 @@ function RouteScheduleFooter() {
 
   return (
     <>
-      <div className="m-4 mb-0 flex flex-wrap  text-sm text-gray-500 ">
+      <div className="m-4 mb-0 flex flex-wrap text-sm text-gray-500">
         {stopSequence.operator &&
           defaultRenderLink(stopSequence.operator, stopSequence.operatorUrl)}
         {stopSequence.operator && stopSequence.publisher && <span> - </span>}

package/src/RouteScheduleHeader/RouteScheduleHeader.tsx

@@ -1,7 +1,9 @@
 import { memo } from "preact/compat";
 
+import Tracking from "../icons/Tracking";
 import RouteIcon from "../RouteIcon";
 import RouteInfos from "../RouteInfos";
+import IconButton from "../ui/IconButton";
 import getBgColor from "../utils/getBgColor";
 import useMapContext from "../utils/hooks/useMapContext";
 
@@ -11,13 +13,11 @@ function RouteScheduleHeader() {
   const backgroundColor = stroke || getBgColor(type || vehicleType);
   const color = textColor || "black";
   return (
-    <div className="flex items-center gap-x-4 bg-slate-100 p-4">
+    <div className="flex items-center gap-x-4 bg-slate-100 p-4 py-2">
       <RouteIcon stopSequence={stopSequence} />
       <RouteInfos className="flex grow flex-col" stopSequence={stopSequence} />
-      <button
-        className={`flex size-[38px] flex-none items-center justify-center rounded-full bg-white p-1.5 shadow-lg ${
-          isFollowing ? "animate-pulse" : ""
-        }`}
+      <IconButton
+        className={`${isFollowing ? "animate-pulse" : ""}`}
         onClick={() => {
           setIsFollowing(!isFollowing);
         }}
@@ -26,31 +26,9 @@ function RouteScheduleHeader() {
           backgroundColor: isFollowing ? backgroundColor : "white",
           color: isFollowing ? color : "black",
         }}
-        type="button"
       >
-        <svg
-          fill="none"
-          height="24"
-          part="svg"
-          viewBox="0 0 14 14"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            clipRule="evenodd"
-            d="M7 0.333344C7.375 0.333344 7.66667 0.62501 7.66667 0.97921V2.35414C9.7292 2.66668 11.3333 4.27081 11.625 6.33334H13C13.375 6.33334 13.6667 6.62501 13.6667 7.00001C13.6667 7.37501 13.375 7.66668 13 7.66668H11.625C11.3333 9.70834 9.70833 11.3333 7.66667 11.625V13C7.66667 13.375 7.375 13.6667 7 13.6667C6.64587 13.6667 6.33333 13.375 6.33333 13V11.625C4.29167 11.3333 2.68747 9.70834 2.39587 7.66668H1C0.625 7.66668 0.333333 7.37501 0.333333 7.00001C0.333333 6.62501 0.625 6.33334 1 6.33334H2.39587C2.68747 4.27081 4.29167 2.66668 6.33333 2.35414V0.97921C6.33333 0.62501 6.64587 0.333344 7 0.333344ZM7 3.66668C5.16667 3.66668 3.66667 5.16668 3.66667 7.00001C3.66667 8.79168 5.08333 10.3125 7 10.3125C8.89587 10.3125 10.3333 8.81254 10.3333 7.00001C10.3333 5.16668 8.83333 3.66668 7 3.66668Z"
-            fill="currentColor"
-            fillRule="evenodd"
-          />
-          <path
-            clipRule="evenodd"
-            d="M5.66667 7.00001C5.66667 6.27081 6.2708 5.66668 7 5.66668C7.7292 5.66668 8.33333 6.27081 8.33333 7.00001C8.33333 7.72921 7.7292 8.33334 7 8.33334C6.2708 8.33334 5.66667 7.72921 5.66667 7.00001Z"
-            fill="currentColor"
-            fillRule="evenodd"
-            part="circle"
-          />
-        </svg>
-      </button>
+        <Tracking />
+      </IconButton>
     </div>
   );
 }

package/src/RouteStop/RouteStop.tsx

@@ -1,6 +1,3 @@
-import type { RealtimeStation, RealtimeStop } from "mobility-toolbox-js/types";
-
-import { JSX, PreactDOMAttributes } from "preact";
 import { memo } from "preact/compat";
 import { useEffect, useMemo, useState } from "preact/hooks";
 
@@ -13,6 +10,9 @@ import getStopStatus from "../utils/getStopStatus";
 import useMapContext from "../utils/hooks/useMapContext";
 import { RouteStopContext } from "../utils/hooks/useRouteStop";
 
+import type { RealtimeStation, RealtimeStop } from "mobility-toolbox-js/types";
+import type { JSX, PreactDOMAttributes } from "preact";
+
 export type RouteScheduleStopProps = {
   classNameGreyOut?: string;
   index?: number;
@@ -58,14 +58,11 @@ function RouteStop({
     if (!stopUID || !realtimeLayer?.api) {
       return;
     }
-    const subscribe = async () => {
-      realtimeLayer?.api?.subscribe(`station ${stopUID}`, ({ content }) => {
-        if (content) {
-          setStation(content);
-        }
-      });
-    };
-    subscribe();
+    realtimeLayer?.api?.subscribe(`station ${stopUID}`, ({ content }) => {
+      if (content) {
+        setStation(content);
+      }
+    });
 
     return () => {
       setStation(null);

package/src/RouteStopDelay/RouteStopDelay.tsx

@@ -1,10 +1,11 @@
-import { JSX, PreactDOMAttributes } from "preact";
 import { memo } from "preact/compat";
 
 import getDelayColor from "../utils/getDelayColor";
 import getDelayString from "../utils/getDelayString";
 import useRouteStop from "../utils/hooks/useRouteStop";
 
+import type { JSX, PreactDOMAttributes } from "preact";
+
 export type RouteStopDelayProps = JSX.HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 

package/src/RouteStopName/RouteStopName.tsx

@@ -1,10 +1,10 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
 import { memo } from "preact/compat";
 
 import RouteStopPlatform from "../RouteStopPlatform";
 import useRouteStop from "../utils/hooks/useRouteStop";
 
+import type { JSX, PreactDOMAttributes } from "preact";
+
 export type RouteStopNameProps = JSX.HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 

package/src/RouteStopPlatform/RouteStopPlatform.tsx

@@ -1,11 +1,11 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
 import { memo } from "preact/compat";
 
 import useI18n from "../utils/hooks/useI18n";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRouteStop from "../utils/hooks/useRouteStop";
 
+import type { JSX, PreactDOMAttributes } from "preact";
+
 export type RouteStopPlatformProps = JSX.HTMLAttributes<HTMLSpanElement> &
   PreactDOMAttributes;
 

package/src/RouteStopProgress/RouteStopProgress.tsx

@@ -1,10 +1,11 @@
-import { JSX, PreactDOMAttributes } from "preact";
 import { memo } from "preact/compat";
 
 import getMainColorForVehicle from "../utils/getMainColorForVehicle";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRouteStop from "../utils/hooks/useRouteStop";
 
+import type { JSX, PreactDOMAttributes } from "preact";
+
 export type RouteStopProgressProps = {
   lineColor?: string;
   svgProps?: JSX.HTMLAttributes<SVGElement> & PreactDOMAttributes;

package/src/RouteStopServices/RouteStopServices.tsx

@@ -1,10 +1,10 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
 import { memo } from "preact/compat";
 
 import StationServices from "../StationServices";
 import useRouteStop from "../utils/hooks/useRouteStop";
 
+import type { JSX, PreactDOMAttributes } from "preact";
+
 export type RouteStopNameProps = JSX.HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 

package/src/RouteStopStation/RouteStopStation.tsx

@@ -1,11 +1,14 @@
-import { JSX, PreactDOMAttributes } from "preact";
 import { memo } from "preact/compat";
+import { twMerge } from "tailwind-merge";
 
 import RouteStopName from "../RouteStopName";
 import RouteStopServices from "../RouteStopServices";
 import useRouteStop from "../utils/hooks/useRouteStop";
 
+import type { JSX, PreactDOMAttributes } from "preact";
+
 export type RouteStopStationProps = {
+  className?: string;
   classNameCancelled?: string;
 } & JSX.HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
@@ -21,7 +24,10 @@ function RouteStopStation({
   return (
     <div
       {...props}
-      className={`${className} ${status.isCancelled ? classNameCancelled : ""}`}
+      className={twMerge(
+        className,
+        status.isCancelled ? classNameCancelled : "",
+      )}
     >
       <RouteStopName />
       <RouteStopServices className="flex flex-wrap gap-1" />

package/src/RouteStopTime/RouteStopTime.tsx

@@ -1,9 +1,10 @@
-import { JSX, PreactDOMAttributes } from "preact";
 import { memo } from "preact/compat";
 
 import getHoursAndMinutes from "../utils/getHoursAndMinutes";
 import useRouteStop from "../utils/hooks/useRouteStop";
 
+import type { JSX, PreactDOMAttributes } from "preact";
+
 export type RouteStopTimeProps = JSX.HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 

package/src/RvfButton/RvfButton.tsx

@@ -1,16 +1,16 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
 import { memo, useMemo } from "preact/compat";
 import { twMerge } from "tailwind-merge";
 
+import type { ButtonProps } from "../ui/Button/Button";
+
 export type RvfButtonProps = {
+  className?: string;
   selected?: boolean;
   theme?: "primary" | "secondary";
-} & JSX.ButtonHTMLAttributes<HTMLButtonElement> &
-  PreactDOMAttributes;
+} & ButtonProps;
 
 const baseClasses =
-  "flex  gap-2 text-[14px] @sm/main:text-[16px] @md/main:text-[18px] h-[32px] @sm/main:h-[36px] @md/main:h-[40px] px-[22px] @sm/main:px-[22.5px] @md/main:px-[27.5px] pt-[7px] pb-[5px] @sm/main:pt-[8px] @sm/main:pb-[6px] @md/main:pt-[8.5px] @md/main:pb-[6.5px]  items-center justify-left rounded-full border font-semibold text-button";
+  "flex  gap-2 text-[14px] @sm:text-[16px] @md:text-[18px] h-[32px] @sm:h-[36px] @md:h-[40px] px-[22px] @sm:px-[22.5px] @md:px-[27.5px] pt-[7px] pb-[5px] @sm:pt-[8px] @sm:pb-[6px] @md:pt-[8.5px] @md:pb-[6.5px]  items-center justify-left rounded-full border font-semibold text-button cursor-pointer disabled:cursor-default";
 
 export const themes = {
   primary: {
@@ -28,6 +28,7 @@ export const themes = {
 function RvfButton({
   children,
   className,
+  href,
   selected = false,
   theme = "secondary",
   ...props
@@ -38,6 +39,14 @@ function RvfButton({
     );
   }, [className, selected, theme]);
 
+  if (href) {
+    return (
+      <a className={classes} href={href} {...props}>
+        {children}
+      </a>
+    );
+  }
+
   return (
     <button className={classes} {...props}>
       {children}

package/src/RvfCheckbox/RvfCheckbox.tsx

@@ -1,26 +1,26 @@
-import type { JSX } from "preact";
-
 import { memo } from "preact/compat";
 import { twMerge } from "tailwind-merge";
 
 // @ts-expect-error - required for htm to resolve the JSX pragma
 import ok from "../icons/Ok/ok-grey.svg";
 
+import type { InputHTMLAttributes } from "preact";
+
 export type RvfCheckboxProps = {
   checkedIconUrl?: string;
-} & JSX.InputHTMLAttributes<HTMLInputElement>;
+  className?: string;
+} & InputHTMLAttributes<HTMLInputElement>;
 
 function RvfCheckbox({ className, ...props }: RvfCheckboxProps) {
   const checkedIconUrl = props.checkedIconUrl || ok;
   return (
     <input
-      className={twMerge(`
-        box-border size-[20px] flex-none cursor-pointer appearance-none rounded border-2 border-grey bg-white bg-contain bg-center text-grey disabled:cursor-default disabled:border-lightgrey ${className}`)}
+      className={twMerge(
+        `border-grey text-grey disabled:border-lightgrey box-border size-[20px] flex-none cursor-pointer appearance-none rounded border-2 bg-white bg-contain bg-center disabled:cursor-default ${className}`,
+      )}
       style={{
         backgroundImage:
-          props.checked && !props.disabled
-            ? `url('` + checkedIconUrl + `')`
-            : "",
+          props.checked && !props.disabled ? `url('${checkedIconUrl}')` : "",
       }}
       {...props}
       type="checkbox"