Switch

1"use client";23import * as React from "react";4import { cn } from "@/lib/utils";5import { Switch as SwitchPrimitive } from "@sprawlify/react/switch";67const Switch = React.forwardRef<8  HTMLLabelElement,9  React.ComponentProps<typeof SwitchPrimitive.Root> & {10    size?: "sm" | "default";11  }12>(({ className, size = "default", ...props }, ref) => (13  <SwitchPrimitive.Root14    ref={ref}15    data-slot="switch"16    data-size={size}17    className={cn(18      "group/switch inline-flex items-center gap-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",19      className,20    )}21    {...props}22  />23));24Switch.displayName = "Switch";2526const SwitchControl = React.forwardRef<27  HTMLSpanElement,28  React.ComponentProps<typeof SwitchPrimitive.Control>29>(({ className, ...props }, ref) => (30  <SwitchPrimitive.Control31    ref={ref}32    data-slot="switch-control"33    className={cn(34      "inline-flex h-5 group-data-[size=sm]/switch:h-4 w-9 group-data-[size=sm]/switch:w-7 shrink-0 cursor-pointer items-center rounded-full border ring-2 border-transparent ring-transparent transition-colors focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-2 focus-visible:outline-ring data-invalid:border-destructive data-invalid:ring-destructive/20 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-invalid:border-destructive/50 dark:data-invalid:ring-destructive/40 dark:data-[state=unchecked]:bg-input/80",35      className,36    )}37    {...props}38  />39));40SwitchControl.displayName = "SwitchControl";4142const SwitchThumb = React.forwardRef<43  HTMLSpanElement,44  React.ComponentProps<typeof SwitchPrimitive.Thumb>45>(({ className, ...props }, ref) => (46  <SwitchPrimitive.Thumb47    ref={ref}48    data-slot="switch-thumb"49    className={cn(50      "pointer-events-none block size-4 group-data-[size=sm]/switch:size-3 rounded-full bg-background shadow-xs ring-0 transition-transform data-[state=checked]:translate-x-4 group-data-[size=sm]/switch:data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground",51      className,52    )}53    {...props}54  />55));56SwitchThumb.displayName = "SwitchThumb";5758const SwitchLabel = React.forwardRef<59  HTMLSpanElement,60  React.ComponentProps<typeof SwitchPrimitive.Label>61>(({ className, ...props }, ref) => (62  <SwitchPrimitive.Label63    ref={ref}64    data-slot="switch-label"65    className={cn(66      "text-sm group-data-[size=sm]/switch:text-xs leading-none font-medium select-none data-disabled:cursor-not-allowed data-disabled:opacity-50",67      className,68    )}69    {...props}70  />71));72SwitchLabel.displayName = "SwitchLabel";7374const SwitchHiddenInput = SwitchPrimitive.HiddenInput;7576const SwitchContext = SwitchPrimitive.Context;77const SwitchRootProvider = SwitchPrimitive.RootProvider;7879export {80  Switch,81  SwitchControl,82  SwitchThumb,83  SwitchLabel,84  SwitchHiddenInput,85  SwitchContext,86  SwitchRootProvider,87};88