@colisweb/rescript-toolkit 5.6.4 → 5.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "5.6.4",
+  "version": "5.6.5",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",

package/src/ui/Toolkit__Ui_WeekdayNavigation.res

@@ -49,6 +49,10 @@ let make = (
   ~children,
   ~onChange: option<state => unit>=?,
   ~disabledBefore: option<Js.Date.t>=?,
+  ~showMonths=true,
+  ~selectedDateClassName="",
+  ~dateClassName="",
+  ~periodButtonClassName="",
 ) => {
   let {isSm} = Toolkit__Hooks.useMediaQuery()
 
@@ -149,6 +153,7 @@ let make = (
         variant=#outline
         color=#neutral
         onClick={_ => dispatch(PreviousPeriod)}
+        className=periodButtonClassName
         ariaLabel="previous week"
         disabled=?{disabledBefore->Option.map(disabledBefore => {
           let isPreviousPeriodOutOfBounds =
@@ -157,7 +162,7 @@ let make = (
         })}
         icon={<ReactIcons.MdKeyboardArrowLeft size=30 />}
       />
-      <div className="flex items-center mx-2">
+      <div className="flex items-center gap-1 mx-1 md:mx-2">
         {days
         ->Array.mapWithIndex((i, day) => {
           let formattedDay =
@@ -170,7 +175,7 @@ let make = (
               day->DateFns.isBefore(disabledBefore)
             )
           <React.Fragment key={i->Int.toString ++ "-day"}>
-            {i == 0 || day->DateFns.isFirstDayOfMonth
+            {(i == 0 || day->DateFns.isFirstDayOfMonth) && showMonths
               ? <p className="text-xs text-neutral-700 uppercase">
                   <FormattedDate value=day month=#short />
                 </p>
@@ -178,13 +183,15 @@ let make = (
             <div
               onClick={_ => isDisabled ? () : dispatch(UpdateSelectedDay(day))}
               className={cx([
-                "flex flex-col items-stretch w-16 mx-1 font-display",
+                "flex flex-col items-stretch w-14 sm:w-16 font-display",
                 isDisabled ? "opacity-50 cursor-not-allowed" : "",
               ])}>
               <p
                 className={cx([
                   "flex flex-col items-center justify-center uppercase text-xs w-full rounded-sm leading-tight py-1",
-                  isSelected ? "text-white bg-primary-700" : "text-primary-700 bg-primary-50",
+                  isSelected
+                    ? "text-white bg-primary-700 " ++ selectedDateClassName
+                    : "text-primary-700 bg-primary-50 " ++ dateClassName,
                 ])}>
                 <span>
                   {formattedDay
@@ -213,6 +220,7 @@ let make = (
         size=#xs
         variant=#outline
         color=#neutral
+        className=periodButtonClassName
         onClick={_ => dispatch(NextPeriod)}
         ariaLabel="next week"
         icon={<ReactIcons.MdKeyboardArrowRight size=30 />}