Merge pull request #30 from linked-planet/dev

added calendar focus-visible outlines

Author: marcus-wishes

library/src/components/Calendar.tsx

@@ -171,7 +171,9 @@ type CalendarBaseRangeProps = Pick<
 		secondarySelected?: DateRange
 	}
 
-const captionStyles = "flex justify-center items-center relative w-full"
+const buttonStyles =
+	"h-full w-full group-data-[disabled=true]:cursor-not-allowed focus-visible:ring-0 focus-visible:outline focus-visible:outline-selected-bold focus-visible:outline-2 focus-visible:outline-offset-2"
+const captionStyles = "flex justify-center items-center relative w-full pb-2"
 const captionLabelStyles = "text-text text-sm font-bold flex justify-center"
 const daySelectedStyles =
 	"rounded-none bg-selected group-data-[disabled=false]:hover:bg-selected-hovered group-data-[disabled=false]:active:bg-selected-pressed text-selected-text-inverse font-bold w-full h-full"
@@ -189,7 +191,7 @@ const classNames: DayPickerProps["classNames"] = {
 	caption: captionStyles,
 	day_selected: daySelectedStyles,
 	cell: cellStyles,
-	button: "h-full w-full group-data-[disabled=true]:cursor-not-allowed",
+	button: buttonStyles,
 	nav: navStyles,
 	nav_button:
 		"p-1 rounded hover:bg-neutral-subtle-hovered flex items-center justify-center",