Skip to content

Commit

Permalink
Merge pull request #1 from jjeem/main
Browse files Browse the repository at this point in the history
RTL support for more components
  • Loading branch information
nahasco authored Dec 6, 2024
2 parents 3a5b777 + 8525300 commit 238d856
Show file tree
Hide file tree
Showing 6 changed files with 18 additions and 18 deletions.
2 changes: 1 addition & 1 deletion apps/www/registry/default/ui/breadcrumb.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ const BreadcrumbSeparator = ({
className={cn("[&>svg]:size-3.5", className)}
{...props}
>
{children ?? <ChevronRight />}
{children ?? <ChevronRight className="rtl:rotate-180" />}
</li>
)
BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
Expand Down
12 changes: 6 additions & 6 deletions apps/www/registry/default/ui/calendar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,17 @@ function Calendar({
showOutsideDays={showOutsideDays}
className={cn("p-3", className)}
classNames={{
months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 rtl:space-x-reverse",
month: "space-y-4",
caption: "flex justify-center pt-1 relative items-center",
caption_label: "text-sm font-medium",
nav: "space-x-1 flex items-center",
nav: "space-x-1 flex items-center rtl:space-x-reverse",
nav_button: cn(
buttonVariants({ variant: "outline" }),
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
),
nav_button_previous: "absolute left-1",
nav_button_next: "absolute right-1",
nav_button_previous: "absolute start-1",
nav_button_next: "absolute end-1",
table: "w-full border-collapse space-y-1",
head_row: "flex",
head_cell:
Expand All @@ -54,8 +54,8 @@ function Calendar({
...classNames,
}}
components={{
IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4 rtl:rotate-180" />,
IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4 rtl:rotate-180" />,
}}
{...props}
/>
Expand Down
4 changes: 2 additions & 2 deletions apps/www/registry/default/ui/input-otp.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const InputOTP = React.forwardRef<
"flex items-center gap-2 has-[:disabled]:opacity-50",
containerClassName
)}
className={cn("disabled:cursor-not-allowed", className)}
className={cn("disabled:cursor-not-allowed rtl:-mr-[40px]", className)}
{...props}
/>
))
Expand All @@ -41,7 +41,7 @@ const InputOTPSlot = React.forwardRef<
<div
ref={ref}
className={cn(
"relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
"relative flex h-10 w-10 items-center justify-center border-y border-e border-input text-sm transition-all first:rounded-s-md first:border-s last:rounded-e-md",
isActive && "z-10 ring-2 ring-ring ring-offset-background",
className
)}
Expand Down
2 changes: 1 addition & 1 deletion apps/www/registry/new-york/ui/breadcrumb.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ const BreadcrumbSeparator = ({
className={cn("[&>svg]:size-3.5", className)}
{...props}
>
{children ?? <ChevronRightIcon />}
{children ?? <ChevronRightIcon className="rtl:rotate-180" />}
</li>
)
BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
Expand Down
12 changes: 6 additions & 6 deletions apps/www/registry/new-york/ui/calendar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,17 @@ function Calendar({
showOutsideDays={showOutsideDays}
className={cn("p-3", className)}
classNames={{
months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 rtl:space-x-reverse",
month: "space-y-4",
caption: "flex justify-center pt-1 relative items-center",
caption_label: "text-sm font-medium",
nav: "space-x-1 flex items-center",
nav: "space-x-1 flex items-center rtl:space-x-reverse",
nav_button: cn(
buttonVariants({ variant: "outline" }),
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
),
nav_button_previous: "absolute left-1",
nav_button_next: "absolute right-1",
nav_button_previous: "absolute start-1",
nav_button_next: "absolute end-1",
table: "w-full border-collapse space-y-1",
head_row: "flex",
head_cell:
Expand Down Expand Up @@ -60,8 +60,8 @@ function Calendar({
...classNames,
}}
components={{
IconLeft: ({ ...props }) => <ChevronLeftIcon className="h-4 w-4" />,
IconRight: ({ ...props }) => <ChevronRightIcon className="h-4 w-4" />,
IconLeft: ({ ...props }) => <ChevronLeftIcon className="h-4 w-4 rtl:rotate-180" />,
IconRight: ({ ...props }) => <ChevronRightIcon className="h-4 w-4 rtl:rotate-180" />,
}}
{...props}
/>
Expand Down
4 changes: 2 additions & 2 deletions apps/www/registry/new-york/ui/input-otp.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const InputOTP = React.forwardRef<
"flex items-center gap-2 has-[:disabled]:opacity-50",
containerClassName
)}
className={cn("disabled:cursor-not-allowed", className)}
className={cn("disabled:cursor-not-allowed rtl:-mr-[40px]", className)}
{...props}
/>
))
Expand All @@ -41,7 +41,7 @@ const InputOTPSlot = React.forwardRef<
<div
ref={ref}
className={cn(
"relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
"relative flex h-9 w-9 items-center justify-center border-y border-e border-input text-sm shadow-sm transition-all first:rounded-s-md first:border-s last:rounded-e-md",
isActive && "z-10 ring-1 ring-ring",
className
)}
Expand Down

0 comments on commit 238d856

Please sign in to comment.