Switch

1"use client";
2 
3import "./switch.css";
4import { Switch as BaseSwitch } from "@base-ui/react/switch";
5import type React from "react";
6import { cn } from "tailwind-variants";
7 
8import { SwitchContext, useSwitchContext } from "./switch.context";
9import { switchVariants, type SwitchVariants } from "./switch.variants";
10 
11export type SwitchProps = SwitchVariants & React.ComponentProps<typeof BaseSwitch.Root>;
12 
13export const SwitchRoot = ({ children, className, size, ...props }: SwitchProps) => {
14  const slots = switchVariants({ size });
15 
16  return (
17    <SwitchContext.Provider value={{ slots }}>
18      <BaseSwitch.Root className={cn(slots.root(), className)} {...props}>
19        {children}
20      </BaseSwitch.Root>
21    </SwitchContext.Provider>
22  );
23};
24 
25export type SwitchThumbProps = React.ComponentProps<typeof BaseSwitch.Thumb>;
26 
27export const SwitchThumb = ({ className, ...props }: SwitchThumbProps) => {
28  const { slots } = useSwitchContext();
29  return <BaseSwitch.Thumb className={cn(slots.thumb(), className)} {...props} />;
30};