feat: add monthClor, monthBtnSelected, monthBtn to Datepicker

Author: shinokada

src/lib/datepicker/Datepicker.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
   import { onMount } from "svelte";
+  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
   import { fade } from "svelte/transition";
   import { Button, ToolbarButton, type DatepickerProps, cn } from "$lib";
   import { datepicker } from "./theme";
 
-  let { value = $bindable(), defaultDate = null, range = false, rangeFrom = $bindable(), rangeTo = $bindable(), locale = "default", firstDayOfWeek = 0, dateFormat, placeholder = "Select date", disabled = false, required = false, inputClass = "", color = "primary", inline = false, autohide = true, showActionButtons = false, title = "", onselect, onclear, onapply, btnClass, inputmode = "none", classes, class: className }: DatepickerProps = $props();
+  let { value = $bindable(), defaultDate = null, range = false, rangeFrom = $bindable(), rangeTo = $bindable(), locale = "default", firstDayOfWeek = 0, dateFormat, placeholder = "Select date", disabled = false, required = false, inputClass = "", color = "primary", inline = false, autohide = true, showActionButtons = false, title = "", onselect, onclear, onapply, btnClass, inputmode = "none", classes, monthColor="alternative", monthBtnSelected ='bg-primary-500 text-white', monthBtn='text-gray-700 dark:text-gray-300', class: className }: DatepickerProps = $props();
 
   const dateFormatDefault = { year: "numeric", month: "long", day: "numeric" };
   // const dateFormatOptions = $derived(dateFormat ?? dateFormatDefault);
@@ -193,7 +194,7 @@
     if (!inline) isOpen = false;
   }
 
-  let { base, input, button, titleVariant, actionButtons, columnHeader, polite, grid, nav, dayButton } = datepicker();
+  let { base, input, button, titleVariant, actionButtons, columnHeader, polite, grid, nav, dayButton, monthButton } = datepicker();
 </script>
 
 {#snippet navButton(forward: boolean)}
@@ -241,7 +242,7 @@
         </div>
         <div class="grid grid-cols-4 gap-2 p-4">
           {#each monthNames as month, index}
-            <Button type="button" class="rounded-lg px-3 py-2 text-sm hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:hover:bg-gray-700 {currentMonth.getMonth() === index ? 'bg-blue-500 text-white' : 'text-gray-700 dark:text-gray-300'}" onclick={(event: MouseEvent) => selectMonth(index, event)}>
+            <Button type="button" color={monthColor} class={twMerge(monthButton(), currentMonth.getMonth() === index ? clsx(monthBtnSelected) : clsx(monthBtn), clsx(classes?.monthButton))} onclick={(event: MouseEvent) => selectMonth(index, event)}>
               {month}
             </Button>
           {/each}

src/lib/datepicker/theme.ts

@@ -18,7 +18,8 @@ export const datepicker = tv({
     columnHeader: "text-center text-sm font-medium text-gray-500 dark:text-gray-400",
     grid: "grid grid-cols-7 gap-1 w-64",
     nav: "mb-4 flex items-center justify-between",
-    dayButton: "h-8 w-full block flex-1 leading-9 border-0 rounded-lg cursor-pointer text-center font-semibold text-sm day p-0"
+    dayButton: "h-8 w-full block flex-1 leading-9 border-0 rounded-lg cursor-pointer text-center font-semibold text-sm day p-0",
+    monthButton: "rounded-lg px-3 py-2 text-sm hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:hover:bg-gray-700"
   },
   variants: {
     color: {

src/lib/types.ts

@@ -504,6 +504,9 @@ export interface DatepickerProps extends DatepickerVariants, Omit<HTMLAttributes
   onapply?: (x: DateOrRange) => void;
   btnClass?: ClassValue;
   inputmode?: HTMLInputAttributes["inputmode"];
+  monthColor?: ButtonProps["color"];
+  monthBtnSelected?: ClassValue;
+  monthBtn?: ClassValue;
 }
 
 // device-mockups

src/routes/docs/components/datepicker.md

@@ -84,15 +84,15 @@ Use the `inline` prop to display the calendar without a popup.
 Select one of the following colors for the `color` prop:
 `primary`(default), `blue`, `red`, `green`, `yellow`, `purple`, `dark`, `light`, `alternative`, `secondary`, `gray`, `orange`, `amber`, `lime`, `emerald`, `teal`, `cyan`, `sky`, `indigo`, `violet`, `fuchsia`, `pink`, `rose`.
 
-The `classes` prop has the following `class` for disposal: `base`, `input`, `titleVariant`, `polite`, `button`,`actionButtons`, `columnHeader`, `grid`, `nav`, `dayButton`.
+The `classes` prop has the following `class` for disposal: `base`, `input`, `titleVariant`, `polite`, `button`,`actionButtons`, `columnHeader`, `grid`, `nav`, `dayButton`, `monthButton`.
 
 ```svelte example class="h-[430px]"
 <script lang="ts">
   import { Datepicker } from "flowbite-svelte";
 </script>
 
 <div class="mb-64 md:w-1/2">
-  <Datepicker color="blue" classes={{ polite: "hover:text-blue-700!", dayButton: "hover:text-blue-400", titleVariant: "text-blue-800" }} title="Select your preferred date" />
+  <Datepicker color="blue" classes={{ polite: "hover:text-blue-700!", dayButton: "hover:text-blue-400", titleVariant: "text-blue-800", monthButton:"text-blue-700" }} title="Select your preferred date" monthBtnSelected="bg-blue-200" />
 </div>
 ```