svg]:rotate-180`,
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
className
)}
captionLayout={captionLayout}
+ locale={locale}
formatters={{
formatMonthDropdown: (date) =>
- date.toLocaleString("default", { month: "short" }),
+ date.toLocaleString(locale?.code, { month: "short" }),
...formatters,
}}
classNames={{
@@ -74,7 +73,7 @@ function Calendar({
defaultClassNames.dropdowns
),
dropdown_root: cn(
- "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+ "relative rounded-(--cell-radius)",
defaultClassNames.dropdown_root
),
dropdown: cn(
@@ -85,13 +84,13 @@ function Calendar({
"select-none font-medium",
captionLayout === "label"
? "text-sm"
- : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+ : "rounded-(--cell-radius) flex items-center gap-1 text-sm [&>svg]:text-muted-foreground [&>svg]:size-3.5",
defaultClassNames.caption_label
),
table: "w-full border-collapse",
weekdays: cn("flex", defaultClassNames.weekdays),
weekday: cn(
- "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+ "text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none",
defaultClassNames.weekday
),
week: cn("flex w-full mt-2", defaultClassNames.week),
@@ -104,20 +103,23 @@ function Calendar({
defaultClassNames.week_number
),
day: cn(
- "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+ "relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none",
props.showWeekNumber
- ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
- : "[&:first-child[data-selected=true]_button]:rounded-l-md",
+ ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
+ : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
defaultClassNames.day
),
range_start: cn(
- "rounded-l-md bg-accent",
+ "rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate",
defaultClassNames.range_start
),
range_middle: cn("rounded-none", defaultClassNames.range_middle),
- range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+ range_end: cn(
+ "rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate",
+ defaultClassNames.range_end
+ ),
today: cn(
- "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+ "bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none",
defaultClassNames.today
),
outside: cn(
@@ -151,10 +153,7 @@ function Calendar({
if (orientation === "right") {
return (
-
+
)
}
@@ -162,7 +161,9 @@ function Calendar({
)
},
- DayButton: CalendarDayButton,
+ DayButton: ({ ...props }) => (
+
+ ),
WeekNumber: ({ children, ...props }) => {
return (
|
@@ -183,8 +184,9 @@ function CalendarDayButton({
className,
day,
modifiers,
+ locale,
...props
-}: React.ComponentProps) {
+}: React.ComponentProps & { locale?: Partial }) {
const defaultClassNames = getDefaultClassNames()
const ref = React.useRef(null)
@@ -194,10 +196,9 @@ function CalendarDayButton({
return (
|