fix: fix switch issues

mehdibha · Oct 29, 2024 · 41446cd · 41446cd
1 parent c9f1aff
commit 41446cd
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 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
@@ -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
@@ -7,36 +7,36 @@ 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: {
     size: {
       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>}