fosrl.pangolin/src/components/ui/switch.tsx

33 lines
1.1 KiB
TypeScript
Raw Normal View History

2024-10-13 16:18:54 -04:00
"use client"
import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"
2025-01-01 21:41:31 -05:00
import { cn } from "@app/lib/cn"
2024-10-13 16:18:54 -04:00
2025-04-12 12:40:52 -04:00
const Switch = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & {
ref: React.RefObject<React.ElementRef<typeof SwitchPrimitives.Root>>;
}
) => (<SwitchPrimitives.Root
className={cn(
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden 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
2024-10-13 16:18:54 -04:00
className={cn(
2025-04-12 12:40:52 -04:00
"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
2024-10-13 16:18:54 -04:00
)}
2025-04-12 12:40:52 -04:00
/>
</SwitchPrimitives.Root>)
2024-10-13 16:18:54 -04:00
Switch.displayName = SwitchPrimitives.Root.displayName
export { Switch }