diff --git a/packages/components/calendar/src/calendar-base.tsx b/packages/components/calendar/src/calendar-base.tsx index af6d34ff80..f40bcd22f2 100644 --- a/packages/components/calendar/src/calendar-base.tsx +++ b/packages/components/calendar/src/calendar-base.tsx @@ -5,7 +5,6 @@ import type {HTMLAttributes, ReactNode, RefObject} from "react"; import {Fragment} from "react"; import {useState} from "react"; -import {useLocale} from "@react-aria/i18n"; import {VisuallyHidden} from "@react-aria/visually-hidden"; import {Button} from "@nextui-org/button"; import {chain, mergeProps} from "@react-aria/utils"; @@ -55,8 +54,6 @@ export function CalendarBase(props: CalendarBaseProps) { const [direction, setDirection] = useState(0); - const {direction: rtlDirection} = useLocale(); - const currentMonth = state.visibleRange.start; const headers: React.ReactNode[] = []; @@ -72,7 +69,7 @@ export function CalendarBase(props: CalendarBaseProps) { {...prevButtonProps} onPress={chain(prevButtonProps.onPress, () => setDirection(-1))} > - {rtlDirection === "rtl" ? : } + )} setDirection(1))} > - {rtlDirection === "rtl" ? : } + )} , diff --git a/packages/core/theme/src/components/calendar.ts b/packages/core/theme/src/components/calendar.ts index 115915f7cb..224002b373 100644 --- a/packages/core/theme/src/components/calendar.ts +++ b/packages/core/theme/src/components/calendar.ts @@ -10,10 +10,10 @@ const calendar = tv({ "rounded-large overflow-x-auto bg-default-50 dark:bg-background", "w-[calc(var(--visible-months)_*_var(--calendar-width))]", ], - prevButton: [], - nextButton: [], + prevButton: ["order-1"], + nextButton: ["order-3"], headerWrapper: [ - "px-4 py-2 flex items-center justify-between gap-2 bg-content1 overflow-hidden", + "px-4 py-2 flex items-center justify-between gap-2 bg-content1 overflow-hidden rtl:flex-row-reverse", "[&_.chevron-icon]:flex-none", // month/year picker wrapper "after:content-['']", @@ -21,7 +21,7 @@ const calendar = tv({ "after:w-full after:h-0", "after:absolute after:top-0 after:left-0", ], - header: "flex w-full items-center justify-center gap-2 z-10", + header: "flex w-full items-center justify-center gap-2 z-10 order-2", title: "text-default-500 text-small font-medium", content: "w-[calc(var(--visible-months)_*_var(--calendar-width))]", gridWrapper: "flex max-w-full overflow-hidden pb-2 h-auto relative",