Improve today highlighting in calendar

This commit is contained in:
Esdras Renan 2025-11-13 18:43:41 -03:00
parent a419965aca
commit 12acbc5b1c

View file

@ -20,6 +20,14 @@ type OptionElement = React.ReactElement<{
type CalendarDropdownProps = DropdownProps & { children?: React.ReactNode }
const TODAY_HIGHLIGHT_CLASS = [
// Subtle cyan background + ring when today isn't selected
"[&_button]:ring-1 [&_button]:ring-[#00d6eb] [&_button]:ring-offset-1 [&_button]:ring-offset-white",
"[&_button:not([aria-selected='true'])]:bg-[#00e8ff]/20 [&_button:not([aria-selected='true'])]:text-neutral-900",
// Preserve selection colors but keep a cyan outline when today is part of the range
"[&_button[aria-selected='true']]:ring-[#00f5ff] [&_button[aria-selected='true']]:ring-offset-neutral-900 [&_button[aria-selected='true']]:shadow-[0_0_0_1.5px_rgba(0,214,235,0.45)]",
].join(" ")
const buildOptions = (options?: DropdownProps["options"], children?: React.ReactNode) => {
if (options && options.length > 0) {
return options.map((option) => ({
@ -169,8 +177,7 @@ export function Calendar({
range_middle: "bg-transparent text-neutral-900 [&_button]:rounded-full [&_button]:bg-neutral-900/10 [&_button]:text-neutral-900",
range_start: "bg-transparent [&_button]:rounded-full [&_button]:bg-neutral-900 [&_button]:text-neutral-50 [&_button]:focus-visible:ring-0",
range_end: "bg-transparent [&_button]:rounded-full [&_button]:bg-neutral-900 [&_button]:text-neutral-50 [&_button]:focus-visible:ring-0",
today:
"[&_button]:bg-[#00e8ff]/20 [&_button]:text-neutral-900 [&_button]:ring-1 [&_button]:ring-[#00d6eb] [&_button]:ring-offset-1 [&_button]:ring-offset-white",
today: TODAY_HIGHLIGHT_CLASS,
...modifiersClassNames,
}}
// Setas ao lado do caption