[fix]: RTL Support for Switch Component Not Working.

[forestDev1212]

Feature description

Issue The RTL (right-to-left) support for the Switch component is not working as expected. When checked, the switch moves to the right, even in RTL mode.

I did like this:

1. Set the dir prop to 'rtl'.
2. Toggle the switch.
3. Notice that the switch moves to the right instead of to the left in RTL mode.

Affected component/components

No response

Additional Context

Additional details here...

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues and PRs

[forestDev1212]

For that I have changed the current shadcn basic component for Switch like that: ` "use client"

import as React from "react" import as SwitchPrimitives from "@radix-ui/react-switch"

import { cn } from "@/lib/utils"

const Switch = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { dir?: 'ltr' | 'rtl' }>(({ className, dir = 'ltr', ...props },ref) => { const isRtl = dir === 'rtl'

return ( <SwitchPrimitives.Root className={cn( "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", "disabled:cursor-not-allowed disabled:opacity-50", "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", className )} {...props} ref={ref}

<SwitchPrimitives.Thumb className={cn( "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform", // Use inset-inline for better RTL support isRtl ? "data-[state=checked]:-translate-x-5 data-[state=unchecked]:translate-x-0" : "data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0" )} /> </SwitchPrimitives.Root> ) }) Switch.displayName = SwitchPrimitives.Root.displayName

export { Switch }

`