fix(ui): Toggle Switch - styles (#1428)

* fix(ui): toggle switch
- RTL
- broken switch when label too long
- bring back animations

* fix(ui): toggle switch
- text align start

* add changeset

.changeset/seven-carrots-report.md

@@ -0,0 +1,9 @@
+---
+"flowbite-react": patch
+---
+
+fix(ui): Toggle Switch - styles
+
+- RTL
+- broken switch when label too long
+- bring back animations

apps/web/examples/forms/forms.toggleSwitch.tsx

@@ -16,7 +16,7 @@ export function Component() {
   const [switch3, setSwitch3] = useState(true);
 
   return (
-    <div className="flex max-w-md flex-col gap-4">
+    <div className="flex max-w-md flex-col items-start gap-4">
       <ToggleSwitch checked={switch1} label="Toggle me" onChange={setSwitch1} />
       <ToggleSwitch checked={switch2} label="Toggle me (checked)" onChange={setSwitch2} />
       <ToggleSwitch checked={false} disabled label="Toggle me (disabled)" onChange={() => undefined} />
@@ -33,7 +33,7 @@ export function Component() {
   const [switch3, setSwitch3] = useState(true);
 
   return (
-    <div className="flex max-w-md flex-col gap-4">
+    <div className="flex max-w-md flex-col items-start gap-4">
       <ToggleSwitch checked={switch1} label="Toggle me" onChange={setSwitch1} />
       <ToggleSwitch checked={switch2} label="Toggle me (checked)" onChange={setSwitch2} />
       <ToggleSwitch checked={false} disabled label="Toggle me (disabled)" onChange={() => undefined} />

packages/ui/src/components/ToggleSwitch/theme.ts

@@ -3,17 +3,17 @@ import type { FlowbiteToggleSwitchTheme } from "./ToggleSwitch";
 
 export const toggleSwitchTheme: FlowbiteToggleSwitchTheme = createTheme({
   root: {
-    base: "group relative flex items-center rounded-lg focus:outline-none",
+    base: "group flex rounded-lg focus:outline-none",
     active: {
       on: "cursor-pointer",
       off: "cursor-not-allowed opacity-50",
     },
-    label: "ml-3 text-sm font-medium text-gray-900 dark:text-gray-300",
+    label: "ms-3 mt-0.5 text-start text-sm font-medium text-gray-900 dark:text-gray-300",
   },
   toggle: {
-    base: "rounded-full border after:rounded-full after:bg-white group-focus:ring-4 group-focus:ring-cyan-500/25",
+    base: "relative rounded-full border after:absolute after:rounded-full after:bg-white after:transition-all group-focus:ring-4 group-focus:ring-cyan-500/25",
     checked: {
-      on: "after:translate-x-full after:border-white",
+      on: "after:translate-x-full after:border-white rtl:after:-translate-x-full",
       off: "border-gray-200 bg-gray-200 dark:border-gray-600 dark:bg-gray-700",
       color: {
         blue: "border-cyan-700 bg-cyan-700",
@@ -36,9 +36,9 @@ export const toggleSwitchTheme: FlowbiteToggleSwitchTheme = createTheme({
       },
     },
     sizes: {
-      sm: "h-5 w-9 after:absolute after:left-[2px] after:top-[2px] after:h-4 after:w-4",
-      md: "h-6 w-11 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5",
-      lg: "h-7 w-14 after:absolute after:left-[4px] after:top-0.5 after:h-6 after:w-6",
+      sm: "h-5 w-9 min-w-9 after:left-px after:top-px after:h-4 after:w-4 rtl:after:right-px",
+      md: "h-6 w-11 min-w-11 after:left-px after:top-px after:h-5 after:w-5 rtl:after:right-px",
+      lg: "h-7 w-14 min-w-14 after:left-1 after:top-0.5 after:h-6 after:w-6 rtl:after:right-1",
     },
   },
 });