@thinkbuff/figma-react/dist/components/switch/switch.mjs

A Figma React UI components for creating plugins and widgets

import { jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import * as SwitchPrimitives from '@radix-ui/react-switch';
import { cn } from '../../utils/cn.mjs';

const Switch = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  SwitchPrimitives.Root,
  {
    className: cn(
      "peer",
      "inline-flex",
      "shrink-0",
      "items-center",
      "w-6",
      "h-3",
      "rounded-full",
      "cursor-default",
      "border-1",
      "border-solid",
      "border-transparent",
      "transition-colors",
      "disabled:cursor-not-allowed disabled:bg-figma-disabled",
      "data-[state=checked]:bg-figma-brand",
      "data-[state=unchecked]:bg-figma-icon-tertiary",
      className
    ),
    ...props,
    ref,
    children: /* @__PURE__ */ jsx(
      SwitchPrimitives.Thumb,
      {
        className: "pointer-events-none block size-2.5 rounded-full transition-transform bg-figma-icon-onbrand data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0"
      }
    )
  }
));
Switch.displayName = SwitchPrimitives.Root.displayName;

export { Switch };