From 41446cda4fd8e5881bd584b5184d4a9f04e71241 Mon Sep 17 00:00:00 2001
From: Mehdi BHA <mehdibenhadjali@gmail.com>
Date: Tue, 29 Oct 2024 12:59:16 +0100
Subject: [PATCH] fix: fix switch issues

---
 .../default/core/switch/demos/controlled.tsx   |  4 ++--
 .../registry/ui/default/core/switch/switch.tsx | 18 +++++++++---------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/www/src/registry/ui/default/core/switch/demos/controlled.tsx b/www/src/registry/ui/default/core/switch/demos/controlled.tsx
index b7f1c1b0..803512d7 100644
--- a/www/src/registry/ui/default/core/switch/demos/controlled.tsx
+++ b/www/src/registry/ui/default/core/switch/demos/controlled.tsx
@@ -8,10 +8,10 @@ export default function Demo() {
   return (
     <div className="flex flex-col items-center gap-4">
       <Switch isSelected={isSelected} onChange={setSelected}>
-        Airplane Mode
+        Focus mode
       </Switch>
       <p className="text-fg-muted text-xs">
-        You are {isSelected && "not"} on{" "}
+        You are {!isSelected && "not"} on{" "}
         <span className="font-bold">focus mode</span>.
       </p>
     </div>
diff --git a/www/src/registry/ui/default/core/switch/switch.tsx b/www/src/registry/ui/default/core/switch/switch.tsx
index def154eb..f21ae7ac 100644
--- a/www/src/registry/ui/default/core/switch/switch.tsx
+++ b/www/src/registry/ui/default/core/switch/switch.tsx
@@ -7,18 +7,18 @@ import {
   type SwitchProps as AriaSwitchProps,
 } from "react-aria-components";
 import { tv, type VariantProps } from "tailwind-variants";
-import { focusRing } from "@/registry/ui/default/lib/focus-styles";
+import { focusRingGroup } from "@/registry/ui/default/lib/focus-styles";
 
 const switchStyles = tv({
   slots: {
-    root: "group/switch disabled:text-fg-disabled flex items-center gap-3",
+    root: "disabled:text-fg-disabled group flex items-center justify-start gap-3",
     wrapper: [
-      focusRing(),
+      focusRingGroup(),
       "inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
-      "group-disabled/switch:border-border-disabled group-disabled/switch:group-selected/switch:border-none group-disabled/switch:group-selected/switch:bg-bg-disabled group-selected/switch:bg-border-focus bg-bg-neutral group-disabled/switch:cursor-not-allowed group-disabled/switch:border group-disabled/switch:bg-transparent",
+      "group-disabled:border-border-disabled group-disabled:group-selected:border-none group-disabled:group-selected:bg-bg-disabled group-selected:bg-border-focus bg-bg-neutral group-disabled:cursor-not-allowed group-disabled:border group-disabled:bg-transparent",
     ],
     indicator:
-      "group-disabled/switch:bg-fg-disabled pointer-events-none block origin-right rounded-full bg-white shadow-lg ring-0 transition-all duration-200",
+      "group-disabled:bg-fg-disabled pointer-events-none block origin-right rounded-full bg-white shadow-lg ring-0 transition-all duration-200",
     label: "",
   },
   variants: {
@@ -26,17 +26,17 @@ const switchStyles = tv({
       sm: {
         wrapper: "h-5 w-9",
         indicator:
-          "group-pressed/switch:w-5 group-selected/switch:ml-4 group-selected/switch:group-pressed/switch:ml-3 size-4",
+          "group-pressed:w-5 group-selected:ml-4 group-selected:group-pressed:ml-3 size-4",
       },
       md: {
         wrapper: "h-6 w-11",
         indicator:
-          "group-pressed/switch:w-6 group-selected/switch:ml-5 group-selected/switch:group-pressed/switch:ml-4 size-5",
+          "group-pressed:w-6 group-selected:ml-5 group-selected:group-pressed:ml-4 size-5",
       },
       lg: {
         wrapper: "h-7 w-12",
         indicator:
-          "group-pressed/switch:w-7 group-selected/switch:ml-6 group-selected/switch:group-pressed/switch:ml-5 size-6",
+          "group-pressed:w-7 group-selected:ml-6 group-selected:group-pressed:ml-5 size-6",
       },
     },
   },
@@ -57,7 +57,7 @@ const Switch = ({ className, size, ...props }: SwitchProps) => {
     <AriaSwitch className={root({ className })} {...props}>
       {composeRenderProps(props.children, (children) => (
         <>
-          <span className={wrapper({ className })}>
+          <span className={wrapper({})}>
             <span className={indicator({})} style={{ contain: "layout" }} />
           </span>
           {children && <span className={label({})}>{children}</span>}