esdras/sistema-de-chamados
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve today highlighting in calendar

Browse source
This commit is contained in:
Esdras Renan 2025-11-13 18:43:41 -03:00
parent a419965aca
commit 12acbc5b1c
1 changed files with 9 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/ui/calendar.tsx
View file

@ -20,6 +20,14 @@ type OptionElement = React.ReactElement<{
type CalendarDropdownProps = DropdownProps & { children?: React.ReactNode } 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) => { const buildOptions = (options?: DropdownProps["options"], children?: React.ReactNode) => {
if (options && options.length > 0) { if (options && options.length > 0) {
return options.map((option) => ({ 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_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_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", range_end: "bg-transparent [&_button]:rounded-full [&_button]:bg-neutral-900 [&_button]:text-neutral-50 [&_button]:focus-visible:ring-0",
today: today: TODAY_HIGHLIGHT_CLASS,
"[&_button]:bg-[#00e8ff]/20 [&_button]:text-neutral-900 [&_button]:ring-1 [&_button]:ring-[#00d6eb] [&_button]:ring-offset-1 [&_button]:ring-offset-white",
...modifiersClassNames, ...modifiersClassNames,
}} }}
// Setas ao lado do caption // Setas ao lado do caption