etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: switch component — replace motion with CSS transition-transform

Browse Source
This commit is contained in:
Fringg
2026-04-29 08:34:37 +03:00
parent 8044b664c3
commit 9b1e26d4ec
1 changed files with 2 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/primitives/Switch/Switch.tsx
View File

@@ -1,9 +1,7 @@
import * as SwitchPrimitive from '@radix-ui/react-switch'; import * as SwitchPrimitive from '@radix-ui/react-switch';
import { motion } from 'framer-motion';
import { forwardRef, type ComponentPropsWithoutRef } from 'react'; import { forwardRef, type ComponentPropsWithoutRef } from 'react';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { usePlatform } from '@/platform'; import { usePlatform } from '@/platform';
import { springTransition } from '../../motion/transitions';
export interface SwitchProps extends Omit< export interface SwitchProps extends Omit<
ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>,
@@ -42,13 +40,11 @@ export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
{...props} {...props}
> >
<SwitchPrimitive.Thumb asChild> <SwitchPrimitive.Thumb asChild>
<motion.span <span
className={cn( className={cn(
'pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0', 'pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform duration-200',
'data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0', 'data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
)} )}
layout
transition={springTransition}
/> />
</SwitchPrimitive.Thumb> </SwitchPrimitive.Thumb>
</SwitchPrimitive.Root> </SwitchPrimitive.Root>